Menata Pembuatan Tabel dalam Blog

Tentu kita telah tidak asing lagi dengan yang namanya “tabel”. Yah, meskipun jarang membuat dokumen dalam bentuk tabulasi, namun tidak ada salahnya jika kita mengetahui bagaimana cara membuatnya. Tabel pada posting ini, kemungkinan akan lebih dioptimalkan melalui kustomisasi CSS. Sedangkan HTML akan tampak seperti biasa saja, sehingga akan berbeda seperti posting tentang cara membuat tabel dalam blog yang pernah kami terbitkan sebelumnya.

Bentuk tabel sederhana

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

<table>
 <caption>Judul Tabel</caption>
 <!-- baris pertama untuk table row (tr) -->
 <tr>
  <!-- kolom table head (th) -->
  <th>Uraian</th> <!-- kolom pertama -->
  <th>Angka</th> <!-- kolom kedua -->
  <th>Huruf</th> <!-- kolom ketiga -->
 </tr>
 <!-- baris kedua -->
 <tr>
  <!-- kolom table data (td) -->
  <td>Satuan</td>
  <td>1</td>
  <td>Satu</td>
 </tr>
 <!-- baris ketiga -->
 <tr>
  <td>Puluhan</td>
  <td>10</td>
  <td>Sepuluh</td>
 </tr>
 <!-- baris ke-empat -->
 <tr>
  <td>Ratusan</td>
  <td>100</td>
  <td>Seratus</td>
 </tr>
</table>

Terkadang penerapan dalam HTML semua bagian dari pengkodean tabel disambung menjadi satu. Sedangkan pengkodean di atas hanya sekedar memudahkan pemahaman.

table {
 border-bottom: 1px solid #ddd;
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
caption {
 margin-bottom: 0;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 border-top: 1px solid #ddd;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}

CSS di atas telah disesuaikan dengan vertical rhythm struktur kode awal blog ini yakni line-height:1.6em;.

Sekarang kita coba untuk sedikit mengkonfigurasi tabel tanpa caption ke bentuk lain seperti di bawah ini. Kita masih menggunakan dasar pengkodean CSS sebelumnya dengan sedikit merubah & menambah sedikit properti serta nilainya.

table,
th,
td {
 border: 1px solid #ddd;
}
th,
td {
 text-align: center;
}

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus

Atau kita ingin menampilkan baris tabel yang berbelang-belang — seperti kuda zebra — dengan sedikit ditambahkan pula variasi ketika didekati tetikus (:hover).

tr:nth-child(2n+1) {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}

Ketentuan pemberian latar (background) akan berlaku dimulai pada baris ke-3 (2n+1) dan seterusnya berselang satu baris (2n).

Uraian	Angka	Huruf
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

Bentuk terakhir adalah menggunakan properti tabel secara lengkap (thead, tbody, tfoot), namun mungkin tidak sering digunakan.

<table>
 <caption>Judul Tabel</caption>
 <!-- table head (thead) -->
 <thead>
  <tr>
   <th rowspan="2">Uraian</th> <!-- menggabungkan 2 baris -->
   <th colspan="2">Keterangan</th> <!-- menggabungkan 2 kolom -->
  </tr>
  <!-- pisahkan kembali dengan table row (tr) -->
  <tr>
   <th>Angka</th>
   <th>Huruf</th>
  </tr>
 </thead>
 <!-- table foot (tfoot), nanti letak tampilannya tetap pada bagian bawah tabel -->
 <tfoot>
  <tr>
   <td>Jumlah</td>
   <td>1111</td>
   <td>Seribu Seratus Sebelas</td>
  </tr>
 </tfoot>
 <!-- table body (tbody) -->
 <tbody>
  <tr>
   <td>Satuan</td>
   <td>1</td>
   <td>Satu</td>
  </tr>
  <tr>
   <td>Puluhan</td>
   <td>10</td>
   <td>Sepuluh</td>
  </tr>
  <tr>
   <td>Ratusan</td>
   <td>100</td>
   <td>Seratus</td>
  </tr>
 </tbody>
</table>

table {
 border-spacing: 2px;
 margin: 1.6em 0;
 width: 100%;
}
table,
th,
td {
 border: 1px solid #ddd;
}
caption {
 text-align: left;
 margin-bottom: .8em;
}
thead,
tbody,
tfoot {
 vertical-align: middle;
}
tfoot {
 border-top: 3px double #ddd;
}
tr,
th,
td {
 vertical-align: inherit;
}
th,
td {
 text-align: center;
 padding: .8em .5em;
}
th {
 background: #f9f9f9;
 font-weight: 600;
 text-transform: uppercase;
}
tr:nth-child(even) /* sama dengan (2n) atau (2n+0) */ {
 background: #f9f9f9;
}
tr:hover {
 background: #bde5f8;
 color: #000;
}

Pastikan bahwa tr:hover berada pada susunan CSS dibawah pseudo-classes posisi (:nth-child(n) dan sejenisnya) dari pengkodean tabel. Jika tidak, sangat dimungkinkan fungsi hover akan tidak bekerja. Mungkin sama perlakuannya terhadap pengkodean pranala (link), dimana a:visited berada di bawah a dan/atau a:link.

Judul Tabel

Uraian	Keterangan
	Angka	Huruf
Jumlah	1111	Seribu Seratus Sebelas
Satuan	1	Satu
Puluhan	10	Sepuluh
Ratusan	100	Seratus
Ribuan	1000	Seribu

Disamping pengkodean yang telah diuraikan di atas, tidak menutup kemungkinan masih banyak bentuk tabel lain & tentu saja dengan menggunakan kustomisasi pengkodean yang berbeda pula. Namun yang patut dijadikan sebagai generalisasi adalah HTML tabel dapat disajikan secara bersih dengan hanya mengoptimalkan CSS kita dapat menampilkan bentuk tabel secara unik serta mungkin mudah diterima oleh pengguna.