HTML Tabel

HTML memungkinkan kamu untuk membuat **tabel** yang terdiri dari baris dan kolom untuk menampilkan data secara terstruktur.

1. Membuat Tabel Dasar

Tabel dibuat dengan elemen <table>, baris dengan <tr>, dan sel dengan <td>.

<table>
  <tr>
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

2. Menambahkan Header Tabel

Gunakan elemen <th> untuk mendefinisikan header tabel. Header ini secara default akan tebal dan berada di tengah.

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

3. Menentukan Lebar Tabel dan Kolom

Gunakan atribut width pada elemen <table>, <th>, atau <td> untuk menentukan lebar tabel atau kolom.

<table style="width:100%">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>

4. Menambahkan Baris dan Kolom

Setiap tabel dapat memiliki beberapa baris dan kolom. Tambahkan lebih banyak <tr> untuk baris, dan lebih banyak <td> untuk kolom.

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Lokasi</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
    <td>London</td>
  </tr>
</table>

5. Menambahkan Batas Tabel

Gunakan CSS untuk menambahkan batas pada tabel.

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>
 
<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>

6. Menggabungkan Sel dengan `colspan` dan `rowspan`

Gunakan atribut colspan untuk menggabungkan beberapa kolom dan rowspan untuk menggabungkan beberapa baris.

<table border="1">
  <tr>
    <th colspan="2">Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td rowspan="2">John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>35</td>
  </tr>
</table>