Viền bảng trong HTML: border-collapse, đường kẻ và bo góc

Cách thêm viền cho bảng

Bảng mặc định không có viền. Hãy thêm viền bằng CSS: border trên mọi ô vẽ ra lưới, và border-collapse: collapse trên bảng gộp mỗi cặp viền kề nhau thành một đường.

<!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>

Thuộc tính viết tắt border nhận độ rộng, kiểu và màu, theo thứ tự nào cũng được: 1px solid #6b7280. Hãy đặt nó cho th, td, không chỉ cho table: viền trên bảng chỉ vẽ khung bên ngoài.

border-collapse: separate và collapse

border-collapse quyết định các ô có dùng chung viền hay không.

<!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>

Trong bảng separate, bạn thấy được cả hai lớp: khung bảng màu xanh dương và một khung màu hổ phách riêng quanh từng ô, với border-spacing ở giữa. Đổi 6px thành 0 thì các ô chạm nhau nhưng đường kẻ vẫn bị đôi. Chỉ có collapse mới gộp chúng lại.

Khi hai viền đã gộp gặp nhau mà khác nhau, viền rộng hơn sẽ thắng. Nếu cùng độ rộng, kiểu viền quyết định (double thắng solid, solid thắng dashed và dotted), và nếu vẫn ngang nhau, viền của ô thắng viền của hàng, viền của hàng thắng viền của bảng. Đó là lý do cạnh ngoài của bảng collapse có màu hổ phách chứ không phải xanh dương: ở đó cả ô và bảng đều có viền 2px solid, và ô thắng.

Chỉ kẻ dòng ngang, hoặc chỉ kẻ bên trong

Phần lớn bảng hiện đại không vẽ mọi đường kẻ. Hai kiểu phổ biến:

<!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>

Bảng thứ hai bỏ viền ở cạnh ngoài của mỗi ô nằm ở rìa. border-inline-start và border-inline-end nghĩa là đầu và cuối của hàng, nên cùng một đoạn CSS vẫn đúng với các ngôn ngữ viết từ phải sang trái, nơi ô đầu tiên nằm ở phía bên kia.

Bo tròn góc bảng

border-radius không có tác dụng gì trên bảng có border-collapse: collapse. Bảng bo góc dùng mô hình separate không có khoảng hở, và vẽ mỗi đường kẻ một lần bằng cách chỉ cho các ô viền dưới và viền cuối:

<!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>

Hai ô ở góc của hàng tiêu đề có bán kính bo góc riêng để nền màu xám đi theo đường cong. Không có nó, các góc vuông của chúng sẽ lòi ra ngoài viền bo tròn. Bán kính là 9px, tức 10px của bảng trừ đi viền 1px, để hai đường cong khớp nhau.

Màu và độ dày viền cho từng phần

Viền có thể khác nhau theo từng phần của bảng. Các selector trên thead, tfoot và từng hàng đặt một đường kẻ đậm hơn dưới phần tiêu đề hoặc trên hàng tổng:

<!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>

Những đường 3px thắng các đường xám 1px tại chỗ chúng gặp nhau, theo quy tắc gộp viền ở trên. Về phần còn lại của cấu trúc bảng (thead, tfoot, th), xem bảng trong HTML.

Thuộc tính border

Các hướng dẫn cũ dùng thuộc tính trên thẻ <table>:

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

Trình duyệt vẫn hiểu border="1": nó vẽ viền cho bảng và mọi ô, theo mô hình separate, nên tạo ra kiểu viền đôi. Cả ba thuộc tính đều đã lỗi thời trong HTML5. Các cách tương đương trong CSS là border trên các ô, border-spacing (hoặc border-collapse: collapse) trên bảng, và padding trên các ô.

Lỗi thường gặp

• Chỉ đặt viền cho table. Bạn có một khung mà bên trong không có đường kẻ nào. Hãy thêm viền cho th, td.
• Quên border-collapse: collapse, rồi thấy các đường kẻ bị đôi.
• border-radius cùng border-collapse: collapse. Bán kính bo góc bị bỏ qua.
• border-spacing cùng border-collapse: collapse. Khoảng hở chỉ có tác dụng trong mô hình separate.
• Viền trên <tr> trong mô hình separate. Hàng không vẽ viền trừ khi bảng được gộp viền; hãy định dạng các ô.
• Dùng border="1" trong code mới. Nó vẫn chạy, nhưng không đặt được màu và đã lỗi thời.