Untuk kita menyajikan data secara terstruktur dan mudah dipahami audien susunlah table di halaman website, perhatikan setiap kodenya, dan pahami setiap penjelasan nya agar agan paham dan gampang untuk menerapkan dalam website agan Berikut beberapa contoh susunan kode table :
Berikut beberapa penjelasan dari kita menyusun table :
Catatan : Tabel hanya menyajikan data, bukan untuk menata layout sebuah halaman website, banyak dari kita yang melakukan kesalahan ini, Untuk kebutuhan layout gunakanlah teknik sectioning lalu atur lebih lanjut tampilanya melalui CSS.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tabel</title>
<style>
th, td {border: 1px solid #ddd; padding: 5px;}
col {background-color: #eee;}
</style>
</head>
<body>
<table>
<caption>Tabel ringkas</caption>
<tr>
<td>Satu A</td>
<td>Satu B</td>
</tr>
<tr>
<td>Satu A</td>
<td>Satu B</td>
</table>
<hr>
<table>
<caption>Tabel Utama</caption>
<colgroup>
<col span="2">
</colgroup>
<thead>
<tr>
<th>Judul A</th>
<th>Judul B</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Satu A</td>
<td>Dua B</td>
<td>Baris satu</td>
</tr>
<tr>
<td>Dua A</td>
<td>Dua B</td>
<td>Baris dua</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total A</td>
<td>Total B</td>
<td>Total</td>
</tr>
</tfoot>
</table>
</body>
</html>
Berikut beberapa penjelasan dari kita menyusun table :
- <table> Untuk menandai elemen table di halaman
- <thead> menandai baris judul table di halaman
- <tbody> penjelasan menandai baris isi table, sifatnya opsional
- <tfoot> Menandai baris kaki atau ringkasan tabel yang bersifat opsional
- <tr> membuat baris table jika menggunakan <thead> <tbody> dan <tfoot>, Maka <tr> ada di dalam nya
- <th> Membuat kolom judul di <thead>
- <td> Membuat kolom kolom di sebuah baris <tbody> dan <tfoot>
- <colgrup> Membuat kelompok umum
- <col> menetapkan kolom kolm di <colgroup>
- <caption> Membuat keterangan nama atau judul table.
Catatan : Tabel hanya menyajikan data, bukan untuk menata layout sebuah halaman website, banyak dari kita yang melakukan kesalahan ini, Untuk kebutuhan layout gunakanlah teknik sectioning lalu atur lebih lanjut tampilanya melalui CSS.
0 komentar