Tabel adalah struktur yang cukup kompleks yang terdiri dari baris dan kolom. Kerangka dasar tabel selalu terdiri dari elemen table.
<table> … </table>
Dalam elemen ini, definisi tabel sebenarnya dilakukan. Selama mengimplementasikan tabel dalam HTML, disarankan untuk memberikan tabel bingkai. Dengan demikian, Anda dapat lebih mudah melihat bagaimana baris dan kolom berjalan. Untuk melakukannya, berikan kombinasi atribut-nilai border="1" pada <table> pembuka. (Perhatikan bahwa atribut border dalam HTML sebaiknya tidak digunakan. Sebaiknya gunakan properti CSS yang sesuai. Namun akan dibahas lebih lanjut nanti).
<table border="1"> … </table>
Selanjutnya adalah definisi baris tabel. Ini dilakukan melalui elemen tr.
<table border="1"> <tr></tr> </table>
Namun, ini masih belum menghasilkan output yang diinginkan. Selanjutnya, kita harus mendefinisikan kolom. Ini dilakukan melalui elemen td.
<table border="1">
<tr>
<td></td>
</tr>
</table>Sekarang Anda dapat mendefinisikan konten tabel pertama. Ini didefinisikan antara <td> dan </td>.
<table border="1">
<tr>
<td>Konten 1</td>
</tr>
</table>
Baru sekarang layak untuk melihat hasilnya di browser.
Mungkin masih belum terlalu menarik, karena pada saat ini tabel hanya terdiri dari satu sel tabel. Anda sekarang dapat menambahkan kolom lainnya. Ini dilakukan melalui elemen td lagi. Pastikan untuk mendefinisikannya di dalam elemen tr.
<table border="1">
<tr>
<td>Konten 1</td>
<td>Konten 2</td>
</tr>
</table>
Sekali lagi, lihat hasilnya di sini.
Untuk menambahkan baris tambahan ke dalam tabel, cukup tambahkan elemen tr baru, di mana elemen-elemen td yang diinginkan kemudian didefinisikan lagi di dalamnya.
Di sini contohnya:
<table border="1">
<tr>
<td>Konten 1</td>
<td>Konten 2</td>
</tr>
<tr>
<td>Konten 3</td>
<td>Konten 4</td>
</tr>
</table>
Lihat hasilnya di browser untuk mendapatkan hasil berikut:
Dengan cara ini, Anda dapat membuat tabel yang lebih lengkap.
Menentukan Kepala, Tubuh, dan Kaki
Tabel dapat dibagi menjadi area logis. Ini termasuk area kepala, satu atau lebih area data, dan area kaki. Contoh berikut menunjukkan bagaimana hal tersebut dapat terlihat:
<table border="1">
<thead>
<tr>
<th>Berangkat</th>
<th>Tiba</th>
<th>Peron</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlin</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>1</td>
</tr>
<tr>
<td>München</td>
<td>Berlin</td>
<td>3</td>
</tr>
</tbody>
</table>Dan berikut adalah hasilnya di browser:
Pembagian ke dalam area-berarea yang disebutkan tersebut tidak tampak memberikan efek visual. Tentu muncul pertanyaan: Mengapa harus repot-repot mendefinisikan area tersebut? Ada dua alasan bagus untuk ini:
• Dapat mengatur format area berbeda dengan CSS.
• Browser dapat mengulang kepala tabel dan kaki tabel pada setiap halaman saat mencetak tabel panjang.
Kepala tabel dimulai dengan thead. Diikuti oleh baris-baris tabel yang termasuk dalam kepala. Jangan lupa untuk menutup kepala tabel dengan </thead>.
Jika tabel memerlukan kaki tabel, maka kaki tersebut harus didefinisikan sebelum tubuh tabel. Kaki diawali dengan <tfoot>. Diikuti oleh satu atau lebih baris yang termasuk dalam area kaki. Tutup kaki tabel dengan </tfoot>.
Tubuh tabel sebenarnya didefinisikan di dalam elemen tbody. Elemen tbody ini bisa muncul beberapa kali. Tutup setiap tubuh tabel dengan </tbody>.
Mengapa mungkin Anda menggunakan beberapa elemen tbody dalam satu tabel? Misalnya dalam tabel Bundesliga sepak bola. Dalam tabel semacam itu, biasanya terdapat beberapa area.
• Juara
• Peserta Liga Champions
• Kualifikasi Liga Champions
• Peserta Liga Eropa
• Daftar tengah abu-abu
• Tempat degradasi
• Tim yang terdegradasi
Setiap area tersebut dapat dimasukkan ke dalam elemen tbody yang berbeda dan kemudian dapat diatur dengan CSS secara berbeda.
Mendefinisikan Kolom Terlebih Dahulu
Cara di mana tabel ditampilkan oleh browser tergantung pada jumlah baris dan kolom yang tersedia. Proses menampilkan tabel bagi browser sebenarnya tidaklah mudah. Faktanya, browser harus membaca seluruh tabel terlebih dahulu sebelum dapat menampilkannya. Terutama pada tabel yang sangat besar, tentu saja proses ini akan memakan waktu tertentu. Masalah ini dapat diatasi dengan memberi tahu browser langsung, jumlah kolom yang sebenarnya ada dalam tabel.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Judul</th>
<th>Harga</th>
</tr>
<tr>
<td>23223423434</td>
<td>Sebuah Sejarah Singkat tentang Segalanya</td>
<td>29,95 Euro</td>
</tr>
</table>
Melalui colgroup, definisi awal kolom dimulai. Perhatikan bahwa sebagian besar atribut yang tersedia dalam versi HTML sebelumnya untuk colgroup tidak lagi diperbolehkan dalam HTML5. Yang diperbolehkan sekarang hanyalah atribut span. Sebagai nilai, atribut span ini mengharapkan jumlah kolom yang ada dalam tabel.
Elemen colgroup berada langsung di belakang <table>. Kolom-kolom sendiri kemudian didefinisikan melalui elemen-elemen col.
Saat menggunakan colgroup, ada dua pilihan dasar:
• Dengan atribut span
• Tanpa atribut span
Jika tanpa atribut span, dalam elemen colgroup harus didefinisikan satu elemen col untuk setiap kolom yang harus tercakup dalam grup kolom. Perhatikan bahwa col merupakan elemen mandiri.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Judul</th>
<th>Harga</th>
</tr>
<tr>
<td>23223423434</td>
<td>Sebuah Sejarah Singkat tentang Segalanya</td>
<td>29,95 Euro</td>
</tr>
</table>
Terdapat juga bentuk campuran.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Ini sangat berguna ketika satu kolom ingin didefinisikan terpisah, namun yang lain ingin dikumpulkan dalam satu grup.
