Table atau tabel merupakan sesuatu elemen yang penting dalam memberikan informasi yang informasi tersebut tersusun rapi dan terstruktur. Selain itu ada berbagai jenis informasi yang harus ditampilkan dalam bentuk tabel seperti jadwal seperti tabel olahraga atau kalender. Ketika kita membuat tabel tentu kita bermain dengan banyak baris dan kolom. Dalam materi ini kita akan belajar cara membuat dan mengatur tabel dalam HTML.
Tapi sebelum dilanjut, apa sih sebenarnya tabel dalam HTML itu? Elemen <table> pada HTML merepresentasikan data tabular. Yaitu informasi yang disajikan dalam sebuah tabel. Tabel sendiri disajikan dalam dua dimensi yang terdiri dari baris dan kolom (cell) yang berisikan sebuah data. Berikut contoh data yang disajikan dalam bentuk tabel.
Sebuah tabel yang dituangkan dalam bentuk HTML disusun dari tiga buah elemen, yaitu <table>, <tr> dan <td> atau <th>. Elemen <table> digunakan untuk menandakan dimulainya dan diakhirinya sebuah konten tabel dan juga sebagai wadah untuk tabel itu sendiri. Kemudian elemen <tr> digunakan untuk membuat sebuah baris baru yang di dalamnya terdapat elemen <td> atau <th> sehingga menghasilkan sebuah cell.
Elemen <td> yang berarti “table data” selain membuat cell elemen ini juga merupakan tempat di mana data pada tabel ditampung, dan elemen <th> atau “table header” digunakan untuk menentukan sebuah header pada kolom datanya. Untuk lebih jelasnya, perhatikan ilustrasi berikut:
Cukup mudah kan? Sekarang mari kita ubah menjadi penerapan elemen HTML seperti berikut:
Yang perlu kita ingat lagi, seluruh konten atau data dapat dituliskan pada elemen <td> ataupun <th>. Kita juga bisa memberikan konten apa saja untuk di dalamnya seperti teks, gambar atau bahkan sebuah tabel lainnya.
Terkadang kita membutuhkan sel yang berisi dua kolom atau dua baris secara bersamaan. Dalam aplikasi seperti Microsoft Word umumnya dikenal sebagai menghubungkan atau menghubungkan sel dalam html dinamakan colspan table. Ini benar-benar fitur yang sangat dasar saat membuat tabel dalam HTML. Dalam HTML ini lebih dikenal sebagai rentang sel yang berarti mencapai atau meregangkan ukuran sel yang lebih besar dari ukuran normal. Dengan Spanning Sell pada suatu tabel bisa menjadi tabel yang lebih kompleks tetapi ini akan membuat markup tertulis agak sulit dibaca. Untuk meregangkan kolom (meregangkan kolom) kita dapat menggunakan atribut colspan dalam elemen <td> atau <th>.
Berikut contoh untuk penggunaan colspan sehingga sebuah header mencangkup dua kolom.
 | ||||||||
|---|---|---|---|---|---|---|---|---|
| Untuk kodenya di bawah ini: | ||||||||
<table> <tr><th>18:30</th> <th>19:40</th> <th>21:00</th> </tr> <tr> <td colspan='2'>Adam</td> <td>Superman</td> </tr> <tr> <td>The Up</td> <td>Weathering With You</td> <td>Nikah yuk</td> </tr> <tr> <td>Gundala</td> <td colspan='2'>Batman</td> </tr> </table> | ||||||||
Row Spans digunakan untuk merentangkan sebuah baris (row spanning) kita dapat menggunakan atribut rowspan. Sama seperti column spanning, tetapi atribut ini akan merentangkan sebuah sel ke bawah. Berikut contohnya.
| <table> <tr> <td rowspan='3'>18:00</td> <td>Upin</td> </tr> <tr> <td>Spongebob Party</td> </tr> <tr> <td>Hellboy 2</td> </tr> </table> | |||