Halo Authemers! Jumpa lagi dengan Mas Hedi dalam Tutorial HTML untuk Pemula. Nah, pada bagian ini kita akan bahas tabel dalam HTML. Tabel adalah salah satu elemen yang sangat berguna untuk menampilkan data secara terstruktur dan mudah dibaca, baik itu untuk statistik, jadwal, daftar harga, maupun konten lainnya. Simak terus sampai selesai ya…!

Sebelumnya, di Bab 8, kita sudah belajar bagaimana menambahkan gambar, video, dan audio untuk membuat halaman lebih interaktif. Sekarang, kita akan menambahkan dimensi baru: data yang rapi dan terorganisir menggunakan tabel. Dengan kombinasi tabel, teks, dan multimedia, halaman Authemers akan semakin profesional dan mudah dipahami.

1. Struktur Dasar Tabel

Tabel HTML dibuat menggunakan beberapa tag utama:

• <table> → membungkus seluruh tabel
• <thead> → bagian header tabel (opsional, tapi disarankan untuk semantik)
• <tbody> → bagian isi tabel
• <tr> → baris tabel
• <th> → header kolom
• <td> → sel data

Contoh dasar tabel:

<table border="1">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Pekerjaan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hedy</td>
      <td>25</td>
      <td>Web Developer</td>
    </tr>
    <tr>
      <td>Authemers</td>
      <td>21</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>

<table border="1"> → menambahkan garis sederhana (untuk latihan, nanti bisa diganti CSS)

<thead> dan <tbody> → memisahkan header dan isi tabel, membantu SEO dan aksesibilitas

2. Styling Tabel dengan CSS

Supaya tabel terlihat lebih profesional, kita bisa menggunakan CSS:

table {
  width: 100%;
  border-collapse: collapse; /* Menghapus spasi ganda antar border */
  margin-bottom: 20px;
  font-family: Inter, system-ui;
}

th, td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #2563eb;
  color: white;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}

• border-collapse: collapse → membuat border sel lebih rapi
• tr:nth-child(even) → memberi warna berbeda untuk baris genap (zebra stripe)
• tr:hover → efek hover saat mouse melewati baris tabel

Tip Authemers: Gunakan font yang konsisten dengan teks halaman agar tabel tetap terlihat rapi dan mudah dibaca.

3. Menggabungkan Sel: colspan dan rowspan

Kadang kita ingin sebuah sel menempati lebih dari satu kolom atau baris. Gunakan colspan untuk kolom, rowspan untuk baris.

Contoh:

<table>
  <tr>
    <th>Nama</th>
    <th colspan="2">Kontak</th>
  </tr>
  <tr>
    <td>Hedy</td>
    <td>Email</td>
    <td>hedy@example.com</td>
  </tr>
</table>

colspan="2" → header “Kontak” menempati dua kolom

4. Tabel Responsif

Untuk tampilan mobile-friendly, kita bisa membuat tabel responsif dengan CSS:

@media screen and (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  td {
    position: relative;
    padding-left: 50%;
    border: none;
    border-bottom: 1px solid #ddd;
  }

  td:before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    font-weight: bold;
  }
}

• Setiap td akan menampilkan label kolom menggunakan data-label
• Membuat tabel tetap mudah dibaca di layar kecil

Contoh penggunaan data-label:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Pekerjaan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Nama">Hedy</td>
      <td data-label="Umur">25</td>
      <td data-label="Pekerjaan">Web Developer</td>
    </tr>
  </tbody>
</table>

5. Mengintegrasikan Multimedia dalam Tabel

Salah satu keunggulan HTML modern adalah bisa menambahkan gambar, video, atau link langsung di dalam tabel.

Contoh tabel dengan gambar dan link:

<table>
  <thead>
    <tr>
      <th>Artikel</th>
      <th>Preview</th>
      <th>Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tutorial HTML untuk Pemula</td>
      <td>
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Ilustrasi HTML" width="100">
      </td>
      <td>
        <a href="https://authemic.com/tutorial-html-untuk-pemula/">Baca Selengkapnya</a>
      </td>
    </tr>
    <tr>
      <td>Apa Itu CSS</td>
      <td>
        <video width="150" controls>
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          Browser tidak mendukung video.
        </video>
      </td>
      <td>
        <a href="https://authemic.com/apa-itu-css-dalam-pengembangan-website/">Baca Selengkapnya</a>
      </td>
    </tr>
  </tbody>
</table>

• Kolom “Preview” menampilkan gambar/video
• Kolom “Link” tetap menggunakan anchor <a> untuk internal linking dan navigasi pengunjung

6. Praktik SEO dan Aksesibilitas untuk Tabel

1. Gunakan <thead> dan <tbody> untuk membedakan header dan isi tabel. Ini membantu screen reader.
2. Tambahkan atribut scope="col" pada <th> agar aksesibilitas lebih baik:

<th scope="col">Nama</th>

3. Gunakan caption untuk memberi judul tabel:

<caption>Daftar Artikel dan Preview Multimedia</caption>

4. Pastikan media di dalam tabel memiliki alt atau title untuk SEO.

Tabel dalam HTML adalah elemen penting untuk menampilkan data secara terstruktur dan mudah dipahami. Dengan memahami struktur <table>, <thead>, <tbody>, <tr>, <th>, dan <td>, Authemers bisa membuat tabel sederhana maupun kompleks.

Dengan tambahan CSS modern, tabel bisa terlihat profesional, interaktif, dan responsif untuk berbagai perangkat. Penggunaan colspan, rowspan, media di dalam tabel, dan link internal juga memperkaya halaman tutorial Authemers.

Selain itu, praktik SEO dan aksesibilitas seperti penggunaan <caption>, scope="col", dan alt pada gambar sangat penting untuk memastikan konten tabel mudah diakses dan dipahami oleh semua pengunjung, termasuk pengguna screen reader dan mesin pencari.

Dengan Bab 9 ini, Authemers sekarang bisa membuat tabel yang profesional, interaktif, dan siap diintegrasikan dengan multimedia yang sudah dipelajari di Bab 8.

Setelah ini, kita akan lanjutkan ke bab 10 yaitu membuat form dalam html.