Tabel HTML: Baris, Kolom, Sel Header dan Caption

Cara membuat tabel di HTML

Tabel adalah elemen <table> yang terdiri dari baris (<tr>), dan setiap baris terdiri dari sel: <th> untuk sel header dan <td> untuk sel data.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

Tabel ini tidak punya border sendiri; satu aturan CSS itu menambahkannya supaya kamu bisa melihat sel-selnya. Kolom terbentuk dari sel: sel pertama di setiap baris adalah kolom satu, sel kedua kolom dua, dan seterusnya. Setiap baris sebaiknya punya jumlah sel yang sama. Hapus satu <td> dan baris itu berakhir lebih awal, meninggalkan celah.

Sel <th> tebal dan rata tengah secara default. Itu hanya tampilannya; yang penting adalah sel-sel itu label, yang dibahas di bagian berikutnya.

Elemen-elemen tabel

Border dibahas di border tabel HTML, dan sel yang merentang beberapa kolom atau baris di colspan dan rowspan.

Sel header, scope dan caption

Tabel dengan header di bagian atas dan di sisi samping perlu menyatakan ke arah mana setiap header menunjuk. scope="col" memberi label pada kolom di bawahnya, scope="row" memberi label pada baris di sampingnya. <caption> memberi tabel judul yang terlihat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Dengan markup ini, screen reader yang berpindah ke sel 14:00 bisa mengumumkan "Saturday, Closes, 14:00", jadi angkanya tidak pernah dibacakan sendirian. Untuk tabel sederhana dengan satu baris header, browser biasanya bisa menebak header-nya tanpa scope, tapi menulisnya tidak ada ruginya dan menghilangkan tebak-tebakan.

Caption juga yang diumumkan screen reader saat sampai di tabel. Utamakan caption daripada heading yang diletakkan di atas tabel, yang tidak terhubung dengan tabelnya.

thead, tbody dan tfoot

Ketiga kelompok itu membagi baris menjadi header, body dan footer. Footer adalah tempat untuk total:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

Dua detail membuat angkanya mudah dibaca: text-align: end menyejajarkan titik desimal (setiap harga punya dua desimal), dan font-variant-numeric: tabular-nums memberi setiap digit lebar yang sama.

Kalau kamu menulis <tr> langsung di dalam <table>, seperti di contoh pertama, browser tetap menambahkan <tbody> di sekeliling baris-barisnya. Karena itulah selector CSS seperti table > tr tidak pernah cocok dengan apa pun: di halaman, baris-barisnya ada di dalam tbody. Pakai table tr, atau tulis <tbody> sendiri.

Styling tabel: belang-belang, hover dan lebar

:nth-child membuat baris berselang-seling warnanya, :hover menyorot baris di bawah pointer, dan width: 100% merentangkan tabel selebar container-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start menyejajarkan teks header dengan data di bawahnya; tanpa itu, th rata tengah. start, bukan left, menjaga perataannya tetap benar di bahasa yang ditulis dari kanan ke kiri.

Tabel responsif yang bisa digulir

Tabel tidak bisa mengecil sampai lebih sempit dari isinya. Di ponsel, tabel yang lebar mendorong seluruh halaman ke samping. Sebagai gantinya, bungkus dengan container yang bisa digulir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Di sini lebar container dibatasi 300 piksel supaya berperilaku seperti layar ponsel; gulirkan ke samping. tabindex="0" membuat pengguna keyboard bisa memfokuskan container dan menggulirnya dengan tombol panah, dan role="region" dengan aria-label memberi nama pada perhentian itu.

Tabel untuk data

Pakai tabel kalau kontennya memang punya baris dan kolom: harga, jadwal, perbandingan, hasil. Jangan memakainya untuk menempatkan sesuatu bersebelahan di halaman. Tabel untuk layout membingungkan screen reader, yang mengumumkan baris dan kolom yang tidak berarti apa-apa, dan tidak bisa menyesuaikan diri dengan layar kecil. Untuk layout, pakai flexbox dan grid di CSS.

Kesalahan umum

• Baris dengan jumlah sel berbeda. Baris yang pendek berakhir lebih awal dan kolom-kolomnya tidak lagi sejajar.
• Memakai <td> dengan teks tebal untuk header. Pakai <th> supaya header-nya menjadi label sungguhan.
• Atribut usang border, cellpadding, cellspacing, bgcolor dan align. Pakai CSS.
• Meletakkan konten langsung di <tr> atau <table>, di luar sel mana pun. Browser memindahkannya keluar dari tabel, biasanya ke atasnya.
• Heading di atas tabel, bukan <caption>.
• table > tr di CSS. Browser sudah menyisipkan <tbody>; tulis table tr atau tbody tr.