Langsung ke konten

Mengatur Tabel HTML: Colspan, Rowspan, dan Styling

Pelajari cara mengatur tabel HTML dengan colspan, rowspan, dan attribute scope. Kenali juga cara styling tabel dengan CSS untuk tampilan lebih menarik.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami tabel dasar, kita lanjut ke pengaturan lebih lanjut: merge cells, aksesibilitas, dan styling.

Colspan: Menggabungkan Kolom

colspan digunakan untuk menggabungkan beberapa kolom dalam satu sel:

<table border="1">
  <tr>
    <th colspan="3">Penjualan Q1 2026</th>
  </tr>
  <tr>
    <th>Januari</th>
    <th>Februari</th>
    <th>Maret</th>
  </tr>
  <tr>
    <td>100</td>
    <td>150</td>
    <td>200</td>
  </tr>
</table>

Output:

Penjualan Q1 2026
JanuariFebruariMaret
100150200

Header “Penjualan Q1 2026” menjangkau tiga kolom karena colspan="3".

Rowspan: Menggabungkan Baris

rowspan digunakan untuk menggabungkan beberapa baris dalam satu sel:

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Mata Pelajaran</th>
    <th>Nilai</th>
  </tr>
  <tr>
    <td rowspan="2">Budi</td>
    <td>Matematika</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Fisika</td>
    <td>85</td>
  </tr>
  <tr>
    <td rowspan="2">Ani</td>
    <td>Matematika</td>
    <td>88</td>
  </tr>
  <tr>
    <td>Kimia</td>
    <td>92</td>
  </tr>
</table>

Output:

NamaMata PelajaranNilai
BudiMatematika90
Fisika85
AniMatematika88
Kimia92

Nama “Budi” dan “Ani” menjangkau dua baris karena rowspan="2".

Kombinasi Colspan dan Rowspan

Keduanya bisa dikombinasikan dalam satu tabel:

<table border="1">
  <tr>
    <th colspan="2">Header Gabungan</th>
    <th>Saja</th>
  </tr>
  <tr>
    <td>Baris 1</td>
    <td rowspan="2">Gabungan 2 Baris</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Baris 2</td>
    <td>Data</td>
  </tr>
</table>

Attribute scope

scope membantu screen reader memahami hubungan sel header dengan sel data:

<table border="1">
  <thead>
    <tr>
      <th scope="col">Nama</th>
      <th scope="col">Usia</th>
      <th scope="col">Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Budi</th>
      <td>25</td>
      <td>Jakarta</td>
    </tr>
    <tr>
      <th scope="row">Ani</th>
      <td>22</td>
      <td>Bandung</td>
    </tr>
  </tbody>
</table>
  • scope="col" — Sel header untuk kolom
  • scope="row" — Sel header untuk baris

Styling Tabel dengan CSS

Attribute HTML untuk tabel sudah mulai deprecated. Gunakan CSS untuk styling:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
  }

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

  th {
    background-color: #4caf50;
    color: white;
  }

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

  tr:hover {
    background-color: #ddd;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
      <th>Stok</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>Rp 8.000.000</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>Rp 150.000</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td>Rp 350.000</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

CSS di atas menghasilkan tabel dengan:

  • Garis tepi yang rapi (border-collapse)
  • Header berwarna hijau
  • Baris bergantian berwarna abu-abu
  • Efek hover saat kursor di atas baris

Contoh Tabel Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Tabel Lengkap</title>
    <style>
      table {
        border-collapse: collapse;
        width: 80%;
        margin: 20px auto;
      }
      th,
      td {
        border: 1px solid #333;
        padding: 10px;
        text-align: center;
      }
      th {
        background-color: #2196f3;
        color: white;
      }
      caption {
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Jadwal Pelajaran</caption>
      <thead>
        <tr>
          <th>Waktu</th>
          <th>Senin</th>
          <th>Selasa</th>
          <th>Rabu</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>08:00-09:30</td>
          <td>Matematika</td>
          <td>Fisika</td>
          <td>Kimia</td>
        </tr>
        <tr>
          <td>09:30-11:00</td>
          <td>B. Indonesia</td>
          <td>B. Inggris</td>
          <td>Biologi</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Best Practice Tabel

  • Gunakan border-collapse: collapse di CSS agar garis tepi tidak dobel
  • Beri padding yang cukup agar data mudah dibaca
  • Gunakan <caption> untuk judul tabel (baik untuk SEO dan aksesibilitas)
  • Hindari attribute border, cellpadding, cellspacing — gunakan CSS
  • Untuk tabel responsif, bungkus <table> dengan <div> dan tambahkan overflow-x: auto

Ringkasan

  • colspan menggabungkan kolom
  • rowspan menggabungkan baris
  • scope membantu aksesibilitas (screen reader)
  • Styling tabel lebih baik pakai CSS daripada attribute HTML
  • border-collapse: collapse untuk garis tepi yang rapi
  • Gunakan <caption> untuk judul tabel

Langkah Selanjutnya

Kamu sudah memahami cara mengatur tabel HTML. Artikel selanjutnya membahas element form dasar, langkah pertama membuat form interaktif.