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
UraianAngkaHuruf
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus
<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;
}
UraianAngkaHuruf
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus

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).

UraianAngkaHuruf
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus
Ribuan1000Seribu

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
UraianKeterangan
AngkaHuruf
Jumlah1111Seribu Seratus Sebelas
Satuan1Satu
Puluhan10Sepuluh
Ratusan100Seratus
Ribuan1000Seribu

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.

11 komentar untuk “Menata Pembuatan Tabel dalam Blog”

  1. makasih gan atas tips nya. ini sangat bermanfaat buat banyak orang.

    BalasHapus
  2. tabel yang biasa biasa saja, setelah ditambah dengan CSS tambah keren dan enak di pandang mas....

    BalasHapus
  3. wah kreatif amat yah si abang ini :) , saya kaga kepikiran untuk membuat tabel dengan memanfaatkan hover agar tampilan tabelnya lebih interaktif..

    Oia, saya punya kenang-kenangan nih ama blog ini. pertama saya kenal blog ini thn 2010. ternyata blog OB masih jaya aja nih bang :)

    blog saya yang dulu (oot banget, ampe karang juga saya masih oot)
    http://videoklip-pasmantap.blogspot.com/

    sayangnya udah lupa paswordnya :D

    BalasHapus
    Balasan
    1. wah agan yang satu ini mahir benar soal optimasi blog, kebetulan blog ane memang sangat perlu di optimasi. saya masih amatiran soal optimasi blog,.perlu belajar banyak sama agan, oh ya salam kenal, saya blogger asal Riau, kalau boleh mau ajak tuker link gan..terimakaish

      Hapus
    2. @gaptek32 — Waktu berganti waktu terkadang butuh pengembangan. Optimasi Blog juga sebelumnya lama ‘hiatus’ hampir 1 (satu tahun) untuk tahun 2012 dan memulai aktif kembali pada bulan September.

      @ucapan tahun baru — Panjang benar itu nama. :) Untuk saat ini kami belum/tidak menerima tukaran pranala, karena ingin lebih dulu memfokuskan pada penerbitan posting secara berkala dan beberapa pekerjaan rumah yang mesti diselesaikan. Jadi kami mohon maaf, mas.

      Hapus
  4. ini dia nih info yg sedang aku cari, makasih yah atas informasinya..

    BalasHapus
  5. Mantab, ketemu juga akhirnya...

    BalasHapus
  6. nah ini nih yang saya cari2 mas...
    thanks infonya ya mas

    BalasHapus
  7. Terima kasih infonya..
    Tapi kalau tentang css saya kurang mengerti..
    (Pemula)

    BalasHapus
  8. kadang kalo bikin tabel yang masih belum bisa pengaturan style nya aja, belum ngerti :(

    BalasHapus
  9. makasih artikelnya ya.. sy biasanya bingung klo mau buat tabel di postingan

    BalasHapus