Border Tabel HTML: Collapse, Garis dan Sudut Membulat

Cara menambahkan border ke tabel

Secara default tabel tidak punya border. Tambahkan dengan CSS: border pada setiap sel menggambar kisi-kisinya, dan border-collapse: collapse pada tabel menggabungkan setiap pasangan border yang bersebelahan menjadi satu garis.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

Shorthand border menerima lebar, gaya dan warna, dalam urutan apa pun: 1px solid #6b7280. Letakkan di th, td, jangan hanya di table: border pada tabel hanya menggambar bingkai luarnya.

border-collapse: separate vs collapse

border-collapse menentukan apakah sel-sel berbagi border.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

Di tabel separate kamu bisa melihat kedua lapisannya: bingkai tabel biru dan kotak kuning terpisah di sekeliling setiap sel, dengan border-spacing di antaranya. Ganti 6px menjadi 0 dan sel-selnya saling menempel, tapi garisnya tetap ganda. Hanya collapse yang menggabungkannya.

Saat dua border dalam model collapse bertemu dan berbeda, yang lebih lebar yang menang. Kalau lebarnya sama, gayanya yang menentukan (double mengalahkan solid, yang mengalahkan dashed dan dotted), dan kalau masih seri, border sel mengalahkan border baris, yang mengalahkan border tabel. Karena itulah tepi luar tabel collapse berwarna kuning, bukan biru: sel dan tabel sama-sama punya border solid 2px di sana, dan sel yang menang.

Hanya garis horizontal, atau hanya garis bagian dalam

Kebanyakan tabel modern tidak menggambar semua garis. Dua pola yang umum:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

Tabel kedua menghapus border di sisi luar setiap sel di tepi. border-inline-start dan border-inline-end berarti awal dan akhir baris, jadi CSS yang sama tetap benar di bahasa yang ditulis dari kanan ke kiri, tempat sel pertama berada di sisi yang lain.

Sudut tabel membulat

border-radius tidak berpengaruh pada tabel dengan border-collapse: collapse. Tabel bersudut bulat memakai model separate tanpa spasi, dan menggambar setiap garis sekali dengan hanya memberi sel border bawah dan border akhir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

Dua sel di sudut header mendapat radius sendiri supaya background abu-abunya mengikuti lengkungan. Tanpa itu, sudut persegi keduanya mencuat melewati border yang membulat. Radius-nya 9px, yaitu 10px milik tabel dikurangi border 1px-nya, jadi kedua lengkungan itu sejajar.

Warna dan ketebalan border per bagian

Border bisa berbeda untuk setiap bagian tabel. Selector pada thead, tfoot dan baris tertentu mengatur garis yang lebih tebal di bawah header atau di atas total:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

Garis 3px menang atas garis abu-abu 1px di tempat keduanya bertemu, mengikuti aturan collapse di atas. Untuk struktur tabel lainnya (thead, tfoot, th), lihat tabel HTML.

Atribut border

Tutorial lama memakai atribut pada tag <table>:

<table border="1" cellspacing="0" cellpadding="6">

Browser masih mengikuti border="1": atribut ini menggambar border pada tabel dan setiap sel, dalam model separate, yang menghasilkan tampilan garis ganda. Ketiga atribut itu sudah usang di HTML5. Padanan CSS-nya adalah border pada sel, border-spacing (atau border-collapse: collapse) pada tabel, dan padding pada sel.

Kesalahan umum

• Border hanya pada table. Hasilnya bingkai tanpa garis di dalamnya. Tambahkan border ke th, td.
• Lupa border-collapse: collapse, lalu melihat garis ganda.
• border-radius dengan border-collapse: collapse. Radius-nya diabaikan.
• border-spacing dengan border-collapse: collapse. Spasi hanya berfungsi di model separate.
• Border pada <tr> di model separate. Baris tidak menggambar border kecuali tabelnya memakai model collapse; atur gaya sel-selnya saja.
• Memakai border="1" di kode baru. Masih berfungsi, tapi tidak bisa mengatur warna dan sudah usang.