Membuat Tabel HTML
Tabel dalam HTML ditulis dengan tag <table>.
Tabel dibagi menjadi baris dengan tag <tr>, yang merupakan singkatan dari baris tabel (Table Row), dan setiap baris dibagi menjadi data sel dengan tag <td>, yang merupakan singkatan dari tabel data (Table Data).
Tag <td> dapat berisi teks, tautan, gambar, daftar, formulir, tabel lainnya, dll. Berikut contohnya:
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
Catatan: Peramban style bawaan browser akan menampilkan teks dalam elemen <th> dengan karakter tebal (bold) dan posisinya di tengah. Tapi, kalian bisa mengganti style sheet default browser dengan menggunakan CSS.
Tabel Cellpadding dan Cellspacing
Atribut cellpadding dan cellspacing digunakan untuk menyesuaikan ruang kosong di dalam tabel.
- Cellpadding menyesuaikan ruang kosong antara batas sel tabel dan kontennya.
- Cellspacing menyesuaikan ruang kosong antara sel-sel tabel.
Berikut contohnya:
<table border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
Spanning Lebih dari Satu Baris dan Kolom
Spanning memungkinkan kalian untuk memperluas kolom dan baris di beberapa kolom dan baris lainnya.
Biasanya, ketika kita membuat sel tabel, kita tidak bisa melewati batas bawah atau atas sel tabel lainnya. Tapi, kalian bisa menggunakan atribut colspan untuk melebarkan beberapa kolom kesamping dan atribut rowspan untuk menggabungkan beberapa baris kebawah dalam sebuah tabel. Berikut contohnya:
<table border="1">
<tr>
<th rowspan="4">Users Info</th>
</tr>
<tr>
<td>1</td>
<td>John Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</table>
