Elemen Tabel

Tabel di HTML digunakan untuk menampilkan data dalam bentuk baris dan kolom. Elemen utamanya adalah <table>.

🧱 Struktur Dasar Tabel

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>25</td>
  </tr>
</table>

Penjelasan:

• <table>: tag utama untuk membuat tabel
• <tr> (table row): mendefinisikan satu baris
• <th> (table header): kepala kolom (biasanya dicetak tebal & rata tengah)
• <td> (table data): sel berisi data

🔍 Elemen Tambahan dalam Tabel

Contoh

<table>
  <caption>Daftar Nilai</caption>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Nilai</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Siti</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total: 1 Siswa</td>
    </tr>
  </tfoot>
</table>

🎨 Styling Tabel dengan CSS

Tabel bisa diberi gaya menggunakan CSS. Contoh sederhana:

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

  th, td {
    border: 1px solid #ccc;
    padding: 8px;
  }

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

✨ Atribut Umum

Contoh colspan

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

🧼 Best Practice

• Gunakan <th> untuk header, bukan <td>
• Jangan pakai tabel untuk layout halaman (gunakan CSS grid/flex)
• Tambahkan <caption> jika tabel penting untuk aksesibilitas
• Gunakan CSS untuk styling, bukan atribut lama seperti border="1"

🎯 Kesimpulan

Tabel sangat berguna untuk menyajikan data secara rapi. Pastikan struktur dan penggunaannya tepat agar mudah dibaca oleh pengguna dan mesin pencari.

Data yang baik butuh penyajian yang rapi — dan <table> adalah jawabannya! 📊