Tabel digunakan dalam dokumen HTML (halaman web) untuk menyajikan data tabular. Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Mari simak cara membuat tabel sederhana pada HTML.
Menggunakan Tabel
- Tabel didefinisikan menggunakan elemen <table>, dan berisi sejumlah sel tabel (<td>, untuk “data tabel”) yang disusun dalam baris tabel (<tr>). Markup (kode HTML) untuk tabel selalu didasarkan pada baris, tidak pernah kolom.
- Sel tabel yang bertindak sebagai tajuk kolom atau tajuk baris harus menggunakan elemen <th> (tajuk tabel).
- Sel tabel dapat digabungkan menggunakan atribut colspan dan rowspan.
- Tabel dapat dipecah menjadi beberapa bagian menggunakan elemen-elemen berikut:
<thead> – Header tabel
<tbody> – Badan tabel
<tfoot> – Footer meja - Teks dapat ditambahkan ke tabel menggunakan elemen <caption>.
Kalian dapat menggunakan <col> dan <colgroup> untuk menentukan kolom tabel untuk penataan. Namun, ada sejumlah batasan dengan praktik ini.
Contoh Kode Tabel: Tabel Sederhana
<table> <tr> <th> Name </th> <th> Warna Favorit </th> </tr> <tr> <td> Bob </td> <td> Yellow </td> </tr> <tr> <td> Michelle </td> <td> Ungu </td> </tr> </table>
Contoh Kode Tabel: Tabel Kompleks
<table> <caption>A complex table</caption> <thead> <tr> <th colspan="3">Invoice #123456789</th> <th>14 January 2025 </tr> <tr> <td colspan="2"> <strong>Pay to:</strong><br> Acme Billing Co.<br> 123 Main St.<br> Cityville, NA 12345 </td> <td colspan="2"> <strong>Customer:</strong><br> John Smith<br> 321 Willow Way<br> Southeast Northwestershire, MA 54321 </td> </tr> </thead> <tbody> <tr> <th>Name / Description</th> <th>Qty.</th> <th>@</th> <th>Cost</th> </tr> <tr> <td>Paperclips</td> <td>1000</td> <td>0.01</td> <td>10.00</td> </tr> <tr> <td>Staples (box)</td> <td>100</td> <td>1.00</td> <td>100.00</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">Subtotal</th> <td> 110.00</td> </tr> <tr> <th colspan="2">Tax</th> <td> 8% </td> <td>8.80</td> </tr> <tr> <th colspan="3">Grand Total</th> <td>$ 118.80</td> </tr> </tfoot> </table>
Tentang Tata Letak Berbasis Tabel
Sudah umum di awal-awal web untuk menggunakan tabel sebagai perangkat tata letak. Sebelum munculnya browser berbasis standar modern, ini adalah cara termudah untuk memastikan bahwa elemen halaman diatur dengan benar di layar.
Pola desain ini sekarang dianggap sangat buruk. Ini buruk untuk pengalaman pengguna, buruk untuk SEO, dan buruk bagi pengembang yang harus memelihara halaman.
Kalian tidak boleh menggunakan tata letak berbasis tabel dalam kondisi apa pun.
Namun, itu tidak berarti Anda harus menghindari tabel-tabel harus digunakan kapan pun Anda perlu menyajikan informasi dalam format tabel.
