HTML Table

HTML Dasar: Tabel (HTML Table)

Apa Itu Tabel dalam HTML?

Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom — mirip seperti di Excel. HTML menyediakan elemen-elemen khusus untuk membuat struktur tabel dengan rapi.

Struktur Dasar HTML Table

<table>
  <tr>
    <th>Judul Kolom 1</th>
    <th>Judul Kolom 2</th>
  </tr>
  <tr>
    <td>Isi Baris 1 Kolom 1</td>
    <td>Isi Baris 1 Kolom 2</td>
  </tr>
</table>

Penjelasan Tag:

Tag	Fungsi
`<table>`	Elemen utama untuk membuat tabel
`<tr>`	(table row) baris dalam tabel
`<th>`	(table header) sel judul kolom
`<td>`	(table data) isi data dari tabel

Contoh Tabel Sederhana

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>17</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>18</td>
  </tr>
</table>

Keterangan: border="1" digunakan untuk memberikan garis batas (bisa diganti dengan CSS untuk tampilan lebih bagus).

Menambahkan Style pada Tabel

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
  }
</style>

Atribut Penting

Atribut	Fungsi
`colspan`	Menggabungkan beberapa kolom
`rowspan`	Menggabungkan beberapa baris

Contoh colspan:

<tr>
  <td colspan="2">Data digabung 2 kolom</td>
</tr>

Contoh rowspan:

<tr>
  <td rowspan="2">Gabung 2 baris</td>
  <td>Data 1</td>
</tr>
<tr>
  <td>Data 2</td>
</tr>

Contoh Kode HTML Lengkap

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Tabel HTML</title>
  <style>
    table {
      border-collapse: collapse;
      width: 60%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #444;
      padding: 10px;
      text-align: center;
    }
    th {
      background-color: #eee;
    }
  </style>
</head>
<body>

  <h2 style="text-align: center;">Data Siswa</h2>

  <table>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Kelas</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Siti</td>
      <td>XII RPL</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Andi</td>
      <td>XII TKJ</td>
    </tr>
  </table>

</body>
</html>

Kesimpulan

Gunakan <table> untuk membuat tabel.
Setiap baris menggunakan <tr>, setiap kolom isi pakai <td>, dan untuk judul kolom gunakan <th>.
Gunakan colspan dan rowspan untuk menggabungkan sel.
Styling tabel sebaiknya menggunakan CSS agar lebih fleksibel dan menarik.