Membuat Tabel pada HTML

Sebelumya, kita pernah membuat sebuah daftar menggunakan elemen list pada HTML. Contoh dari list tersebut bisa berupa daftar alat dan bahan dalam resep masakan, daftar belanjaan dan lain sebagainya. Namun, bagaimana jika teman-teman ingin menampilkan daftar tersebut dengan lebih rapi pada sebuah tabel? Begini contohnya :

<table>
    <tr>
        <td>John Jainudin</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Jane Salimar</td>
        <td>25</td>
    </tr>
</table>

Tabel HTML tanpa border dan header

Untuk membuat tabel dalam HTML, kita peru menggunakan tag <table>. Sebuah tabel terdiri dari baris dan kolom, yang diwakili oleh tag <tr> (table row) dan <td> (table data/cell). Sekilas tampak ada yang aneh dari tabel di atas. Sebuah tabel yang biasanya kita lihat, memiliki garis-garis pembatas yang memisahkan antar kolom dan barisnya. Selain itu, kita juga memerlukan header (bagian atas berisi nama kolom pada tabel). Pada HTML, kita perlu menambahkan beberapa hal pada kode tersebut.

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Usia</th>
    </tr>
    <tr>
        <td>John Jainudin</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Jane Salimar</td>
        <td>25</td>
    </tr>
</table>

Tabel HTML dengan border dan header

Penjelasan Tag Tabel

• <table>: Tag pembungkus yang mendefinisikan awal dan akhir tabel.

• <tr>: Tag untuk mendefinisikan baris dalam tabel.

• <td>: Tag untuk mendefinisikan data atau sel dalam tabel.

• <th>: Tag untuk mendefinisikan header dalam tabel.

• border: Menentukan ketebalan garis batas tabel (misalnya, border="1").

• width: Menentukan lebar tabel (misalnya, width="50%").

• cellpadding: Menentukan jarak antara isi sel dan tepi sel (misalnya, cellpadding="5").

• cellspacing: Menentukan jarak antara sel-sel dalam tabel (misalnya, cellspacing="10").

---

Menggabungkan Sel

Kita juga dapat menggabungkan sel-sel untuk membuat sel yang lebih besar. Ini berguna untuk header kolom atau baris yang mencakup beberapa kolom atau baris. Gunakan atribut colspan atau rowspan pada tag <td> atau <th>. Contoh:

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Info</th>
    </tr>
    <tr>
        <td rowspan="2">John</td>
        <td>Usia: 30</td>
    </tr>
    <tr>
        <td>Kota: New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Usia: 25</td>
    </tr>
</table>

Tabel HTML dengan rowspan

<table border="1">
  <tr>
    <td colspan="2">Ini adalah sel tabel yang mencakup dua kolom</td>
  </tr>
  <tr>
    <td>Kolom 1</td>
    <td>Kolom 2</td>
  </tr>
</table>

Tabel HTML dengan colspan

---

Referensi

https://www.w3schools.com/html/html_tables.asp