Manfaatkan colspan untuk menggabungkan sel pada baris footer yang mencakup beberapa kolom.

6. Menggabungkan Sel: colspan dan rowspan

Kadang tabel membutuhkan sel yang menyatukan beberapa baris atau kolom. Tag colspan mengontrol berapa kolom yang digabungkan, sedangkan rowspan mengontrol berapa baris yang digabungkan.

Contoh penggunaan colspan:

<tr>
  <td>Header 1</td>
  <td colspan="2">Header 2 & 3 (gabungan)</td>
</tr>

Contoh penggunaan rowspan:

<tr>
  <th rowspan="2">Header Atas</th>
  <td>Sel Kanan</td>
</tr>
<tr>
  <td>Sel Bawah</td>
</tr>

Perhatikan bahwa jumlah <td> atau <th> pada setiap baris harus selalu sejalan dengan jumlah kolom yang dideklarasikan.

7. Mendesain Tabel yang Responsif

Di era perangkat mobile, tabel harus tetap terbaca tanpa memecah layout. Beberapa strategi yang efektif:

• Gunakan overflow-x:auto pada kontainer tabel sehingga tabel dapat discroll secara horizontal di layar kecil.
• Hindari colspan berlebihan pada data yang berisi teks panjang.
• Manfaatkan media query untuk menyesuaikan tampilan pada resolusi berbeda.

Contoh CSS sederhana:

.responsive-table {
  width: 100%;
  overflow-x: auto;
}
.responsive-table table {
  border-collapse: collapse;
  min-width: 600px;
}
.responsive-table th,
.responsive-table td {
  padding: 8px;
  border: 1px solid #ddd;
}

Wrap tabel dalam <div class="responsive-table"> lalu pasang tabel di dalamnya.

8. Penambahan Gaya dengan CSS

Styling tabel dengan CSS memberi kehidupan visual. Berikut beberapa properti yang umum dipakai:

• border – menentukan garis tepi.
• background-color – warna latar belakang baris atau sel.
• text-align – mengatur penyelarasan teks (left, center, right).
• padding – memberi ruang isi pada sel.
• list-style – tidak relevan, tapi kadang digunakan untuk bullet di dalam sel.

Contoh CSS lengkap:

.my-table {
  width: 100%;
  border-collapse: collapse;
}
.my-table th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}
.my-table td {
  padding: 10px;
  border: 1px solid #ddd;
}
.my-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.my-table tr:hover {
  background-color: #e2e2e2;
}

Pilihan warna dan gaya harus konsisten dengan tema blog atau situs Anda.

9. Tips Mengoptimalkan SEO pada Tabel

Meskipun tabel secara teknis tidak langsung memengaruhi peringkat SEO, struktur tabel yang benar dapat meningkatkan crawlability dan pemahaman konten oleh mesin pencarian. Tips SEO:

• Gunakan <caption> yang deskriptif – memastikan tiap tabel memiliki judul yang relevan.
• Fallback pada struktur <thead> dan <tbody> – membantu crawler membedakan header dari data.
• Hindari mengisi tabel dengan keyword stuffing berlebihan; cukupkan informasi yang relevan dan bernilai.
• Gunakan atribut summary (meski tidak umum dipakai) jika tabel berisi data statistik yang memerlukan penjelasan singkat.

Dengan tabel yang semantik, Google lebih mudah mengindex data tabular sebagai entitas terstruktur.

10. Contoh Implementasi Lengkap dalam Blog Post

Berikut contoh kode HTML yang siap dipasang pada artikel WordPress Anda:

<div class="responsive-table">
  <table border="1" class="my-table">
    <caption>Penjualan Produk per Bulan</caption>
    <thead>
      <tr>
        <th>Produk</th>
        <th>Januari</th>
        <th>Februari</th>
        <th>Maret</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Produk A</td>
        <td>120</td>
        <td>130</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Produk B</td>
        <td>80</td>
        <td>95</td>
        <td>110</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3"><strong>Total Penjualan Q1</strong></td>
        <td><strong>355</strong></td>
      </tr>
    </tfoot>
  </table>
</div>

Salin kode di atas ke editor HTML WordPress; CSS yang terkait dapat dimasukkan ke style.css tema atau ke Additional CSS pada Customizer.

11. Kesimpulan

Belajar membuat tabel di HTML tidaklah rumit jika Anda memahami elemen dasar — <table>, <tr>, <td>, dan <th> — serta menambahkan tag semantik seperti <thead>, <tbody>, <tfoot>, serta atribut colspan dan rowspan. Dengan menambahkan CSS untuk responsivitas dan styling, tabel Anda akan tidak hanya terlihat rapi di desktop, tetapi juga mudah diakses di perangkat mobile.

Selain hal tersebut, pemanfaatan <caption> dan struktur semantik lainnya meningkatkan kemampuan mesin pencarian untuk memahami isi tabel, sehingga berkontribusi pada SEO blog Anda secara tak langsung. Terapkan contoh kode di atas, sesuaikan gaya dengan desain Anda, dan lihat perbedaan tampilan serta keterbacaan data yang lebih baik.

Setelah Anda menguasai dasar, eksklusif Anda bisa mengembangkan tabel dengan menambahkan Javascript untuk interaksi, atau menggunakan library CSS seperti Bootstrap untuk menghasilkan tabel yang lebih canggih tanpa menulis banyak kode.

Semoga panduan ini membantu Anda belajar membuat tabel di HTML dengan mudah. Selamat mencoba, dan semoga tabel Anda selalu menjadi aset nilai dalam konten blog!