Menggunakan Tabel

Dalam penyajiaan data yang berbentuk daftar atau list banyak menggunakan tabel, maka pada materi ini akan dibahas secara khusus cara menggunakan tabel di HTML 5 dan menggunakan CSS untuk merubah tampilan tabel menjadi lebih menarik.

Cara menggunakan tabel

Tag Dasar

  • beberapa pengertian yang perlu tahu
    • tr = table row
    • td = table data
    • th = table heading
<table class="tabel-model1">
  <tr>
    <th>Nama</th>
    <th>Alamat</th>
    <th>Telepon</th>
  </tr>
  <tr>
    <td>Dono</td>
    <td>Kapasan 3</td> 
    <td>3331122</td>
  </tr>
  <tr>
    <td>kasino</td>
    <td>Gelora 10 November nomor 3</td> 
    <td>3332211</td>
  </tr>
</table>
  • kode css yang digunakan
.tabel-model1 {
  border-style: solid;
  border-color: #F9A875;
  border-width: 0.3em 0 0.5em 0;
  border-collapse: collapse;
  width: 70%;
  margin: auto;
  font-size: 1.2em;
}

.tabel-model1 th {
  background-color: #FFF6E9;
  border-style: solid;
  border-color: #F3A93B;
  border-width: 0 0 0.3em 0;
  padding: 0.5em 0em 0.5em 0.5em;
  text-align: left;
  font-weight: bold;
}

.tabel-model1 td {
  border-style: solid;
  border-color: #F3A93B;
  border-width: 0 0 0.3em 0;
  padding: 0.5em 0em 0.5em 0.5em;
}

.tabel-model1 tr:nth-child(even) {
    background-color: #F6DAAD;
}

.tabel-model1 tr:nth-child(odd) {
   background-color: #E2AD61;
}

melakukan penggabungan sel

  • seperti umumnya saat menggunakan microsoft excel, terkadang kita ingin satu judul kolom bisa memiliki 2 detil atau lebih
  • untuk itu dibutuhkan perintah colspan
  • berikut contoh penggunaannya
<table>
  <tr>
    <th>Nama</th>
    <th colspan="2">Telepon</th>
  </tr>
  <tr>
    <td>Timi</td>
    <td>3761122</td>
    <td>3763344</td>
  </tr>
</table>
  • teknik menggabung baris
<table>
  <tr>
    <th>Nama</th>
    <th>Telepon</th>
  </tr>
  <tr>
    <td rowspan="2">Timi</td>
      <td>3761122</td>
  </tr>
  <tr>
      <td>3763344</td>
  </tr>
</table>

Praktek Siswa

  • Pilih menu File, Open Folder dan buka folder HTML5-CSS3 milik anda
  • Buka kembali dokumen about.html
  • dengan menggunakan teknik tabel yang sudah diajarkan cobalah untuk membuat tabel berikut
    • untuk yang memiliki nilai sama misalnya akhir 1800 dan 1897 gunakan rowspan
  • Buka File style.css

    • ubah warna heading, baris yang ganjil dan genap dengan warna yang berbeda
  • daftar penemuan nikola tesla

Nomor Penemuan Tahun
1 Alternating current (AC) 1893
2 Tesla Coil (Cahaya) Akhir 1800
3 X-rays -
4 Radio 1897
5 Remote Control -