Menata Pembuatan Tabel dalam Blog

Posted by rike on 0

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.

Tagged as:
About the Author

Write admin description here..

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

Related posts

0 comments:

Blogger templates. Proudly Powered by Blogger.
back to top