Struktur Dasar Sebuah Tabel

 

Tabel pada HTML disusun dari tiga buah elemen, yaitu <table>, <tr> ,dan <td> atau <th>. Elemen <table> digunakan untuk menandakan dimulai 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. Selanjutnya untuk 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.

Berdasarkan ilustrasi di atas, kita dapat menuliskan sebuah struktur dasar tabel pada HTML seperti berikut:

<h1>Pemenang Piala Dunia tiga tahun terakhir</h1>
 
<table>
   <tr>
       <th>Tahun</th>
       <th>Juara 1</th>
       <th>Juara 2</th>
       <th>Juara 3</th>
   </tr>
   <tr>
       <td>2018</td>
       <td>Prancis</td>
       <td>Kroasia</td>
       <td>Belgium</td>
   </tr>
   <tr>
       <td>2014</td>
       <td>Jerman</td>
       <td>Argentina</td>
       <td>Belanda</td>
   </tr>
   <tr>
       <td>2010</td>
       <td>Spanyol</td>
       <td>Belanda</td>
       <td>Jerman</td>
   </tr>
</table>

Jika dibuka pada browser, maka akan tampak seperti ini:
 

Perlu kita ingat, bahwa seluruh konten atau data dituliskan pada elemen <td> ataupun <th>. Kita bisa memberikan konten apa saja di dalamnya seperti teks, gambar, atau tabel lainnya.