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 tabel sederhana

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>
contoh tabel sederhana yang kompleks

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.