Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar (elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel? HTML memiliki elemen khusus untuk membuat tabel, yaitu table.
Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel, menggunakan elemen table:
<table>
<!-- Data -->
</table>
<table>
<tr>
<!-- Isi Baris Tabel -->
</tr>
<tr>
<!-- Isi Baris Tabel -->
</tr>
</table>
dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel. Pengisian data pada tabel dilakukan dengan menggunakan elemen td, seperti berikut:
<table>
<tr>
<td>NIM</td>
<td>Nama</td>
</tr>
<tr>
<td>23511000</td>
<td>Alex Xandra Albert Sim</td>
</tr>
</table>
maka kita akan mendapatkan sebuah tabel HTML, seperti berikut:
Sebuah tabel umumnya memiliki bagian header, untuk memberikan keterangan mengenai data yang ditampilkan ke pengguna. Sebuah header dari tabel dapat berada di atas (baris pertama) dari tabel, ataupun berada pada ujung kiri (kolom pertama) dari tabel. Gambar di bawah memberikan contoh kedua jenis header tabel pada umumnya.
Atas: Header pada Baris Pertama Bawah: Header pada Kolom Pertama dan Baris Pertama
Tentunya HTML memiliki fasilitas untuk membuat kedua jenis header tersebut, baik secara tampilan maupun secara semantik. Bagaimanakah kita membuat header tabel pada HTML?
Langkah pertama dalam membuat header tabel pada HTML ialah dengan menggunakan elemen th, yang digunakan selayaknya kita menggunakan td. Misalnya, jika ingin membuat baris pertama pada tabel sebagai header, kita dapat mengisikan baris pertama dengan elemen th seluruhnya:
<table>
<tr>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td>23511000</td>
<td>Alex Xandra Albert Sim</td>
</tr>
</table>
dan kita akan mendapatkan hasil sebagai berikut:
Demo Elemen th
Perhatikan bagaimana teks “NIM” dan “Nama” secara otomatis dicetak tebal dan rata tengah. Elemen th akan secara otomatis memberikan kedua gaya tampilan tersebut. Jika ingin membuat setiap kolom pertama menjadi header, tentunya kita harus mengisikan kolom pertama pada tiap baris dengan elemen th:
<table>
<tr>
<th> </th>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
</tr>
<tr>
<th>TI-A</th>
<td>Basis Data</td>
<td>Desain Web</td>
<td>Matematika</td>
</tr>
<tr>
<th>TI-B</th>
<td>Desain Web</td>
<td>Struktur Data</td>
<td>Basis Data</td>
</tr>
<tr>
<th>TI-C</th>
<td>Struktur Data</td>
<td>Pemrograman</td>
<td>Matematika</td>
</tr>
</table>
dan kita akan mendapatkan header tabel secara vertikal, pada kolom pertama:
Untuk menambahkan makna semantik pada header tabel, kita dapat menggunakan dua atribut, yaitu: scope dan headers. Atribut scope digunakan untuk menghubungkan data dengan kolom atau baris dari elemen yang bersangkutan. Misalkan jika pada tabel di gambar Demo Header Vertikal di atas kita memberikan scope pada salah satu header (TI-A) seperti berikut:
<table>
<tr>
<th> </th>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
</tr>
<tr>
<th scope="row">TI-A</th>
<td>Basis Data</td>
<td>Desain Web</td>
<td>Matematika</td>
</tr>
<tr>
<th>TI-B</th>
<td>Desain Web</td>
<td>Struktur Data</td>
<td>Basis Data</td>
</tr>
<tr>
<th>TI-C</th>
<td>Struktur Data</td>
<td>Pemrograman</td>
<td>Matematika</td>
</tr>
</table>
Berarti kita memberitahukan ke browser bahwa data yang ada pada baris yang sama dengan “TI-A” (dalam kasus ini: “Basis Data”, “Desain Web”, dan “Matematika”) merupakan keterangan untuk “TI-A”. Perlu diingat bahwa karena atribut scope hanya memberikan makna semnatik maka kita tidak akan ada perubahan tampilan. Atribut scope dapat diisikan dengan nilai col, colgroup, row, dan rowgroup. Nilai col dan row cukup jelas, sementara colgroup dan rowgroup akandi jelaskan pada bagian berikutnya.
Sampai di sini, kode untuk membuat tabel beserta makna semantiknya yang ideal ialah sebagai berikut:
<table>
<tr>
<th> </th>
<th scope="col">Senin</th>
<th scope="col">Selasa</th>
<th scope="col">Rabu</th>
</tr>
<tr>
<th scope="row">TI-A</th>
<td>Basis Data</td>
<td>Desain Web</td>
<td>Matematika</td>
</tr>
<tr>
<th scope="row">TI-B</th>
<td>Desain Web</td>
<td>Struktur Data</td>
<td>Basis Data</td>
</tr>
<tr>
<th scope="row">TI-C</th>
<td>Struktur Data</td>
<td>Pemrograman</td>
<td>Matematika</td>
</tr>
</table>