colspan và rowspan trong HTML: cách gộp ô trong bảng

colspan: một ô trải qua nhiều cột

colspan="n" làm một ô rộng bằng n cột. Khi đó hàng chứa nó có ít hơn n - 1 ô. Ở đây ô tổng trải qua hai cột đầu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

Hàng cuối có hai ô, nhưng ô đầu được tính là hai, nên hàng này vẫn đủ ba cột như các hàng khác.

rowspan: một ô trải xuống nhiều hàng

rowspan="n" làm một ô cao bằng n hàng. Các hàng bên dưới bỏ cột đó, vì ô cao đã lấp nó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

Hàng của Bob và Cy chỉ có một <td>: cột Team đã bị "Design" chiếm. Không có gì đánh dấu điều này trong HTML, nên hãy đọc bảng có rowspan từ trên xuống dưới và nhớ những cột nào vẫn đang bị phủ.

colspan và rowspan cùng lúc: thời khóa biểu

Một ô có thể trải theo cả hai chiều. Thời khóa biểu là ví dụ kinh điển, với một số lớp kéo dài hai tiết và một số lớp diễn ra suốt hai ngày:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

Đếm hàng 10:00: ô tiêu đề giờ, rồi cột Mon bị HTML từ hàng trên phủ, rồi Lab lấp Tue và Wed. Ở hàng 11:00, cột Mon đã trống trở lại còn Lab vẫn phủ Tue và Wed, nên hàng này có một ô dữ liệu.

Đếm ô để bảng luôn vuông vức

Mọi hàng phải có tổng số cột bằng nhau, tính cả colspan của từng ô và các cột bị ô rowspan từ trên phủ xuống. Khi một hàng thừa một ô, trình duyệt thêm một cột mới cho nó và bảng bị lởm chởm ở mép:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

Trong bảng sai, hàng thứ hai quên rằng A đã phủ cột đầu của nó, nên D rơi vào cột thứ ba mà không hàng nào khác có. Cách sửa là xóa một ô. Cùng lỗi đó với colspan là giữ nguyên mọi ô ban đầu trong hàng có ô rộng.

Thiếu một ô là vấn đề ngược lại: hàng kết thúc sớm và để lại một lỗ trống ở cuối.

Tiêu đề nhóm với colspan

Một ô tiêu đề có thể trải qua các cột mà nó gắn nhãn, phía trên một hàng tiêu đề chi tiết hơn. Đánh dấu nó bằng scope="colgroup" để trình đọc màn hình áp dụng nó cho mọi cột bên dưới:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

"City" trải qua cả hai hàng tiêu đề nhờ rowspan="2", và mỗi tháng trải qua hai cột của nó nhờ colspan="2". Các phần tử <colgroup> xác định nhóm cột mà scope="colgroup" tham chiếu tới. Khi đó trình đọc màn hình ở ô 31 của Rome có thể đọc "Rome, July, High, 31". Phần còn lại của cấu trúc bảng có ở trang bảng HTML.

Chỉ gộp ô khi cấu trúc thật sự cần

Ô gộp làm bảng khó đọc hơn với trình đọc màn hình và khó sắp xếp, lọc hay sao chép sang bảng tính hơn. Hãy dùng chúng khi dữ liệu thật sự được nhóm lại (một ô tổng, một tiêu đề phía trên các cột con, một lớp học kéo dài hai giờ). Nếu một bảng cần quá nhiều ô gộp, hai bảng đơn giản hơn thường rõ ràng hơn.

Lỗi thường gặp

• Để lại các ô đã bị phủ. Ô colspan="2" thay cho hai ô; hãy xóa một trong các ô ban đầu.
• Quên các hàng bên dưới rowspan. Mỗi hàng đó cần ít hơn một ô.
• Viết colspan trên <tr>. Nó chỉ hoạt động trên <td> và <th>.
• Gộp ô để dàn trang, như một hàng banner trải ngang trong bảng dùng làm bố cục trang. Hãy dùng CSS grid để dàn trang.
• colspan="100%" với ý "toàn bộ chiều rộng". Trình duyệt chỉ đọc các chữ số ở đầu, nên ô này trải qua 100 cột và thêm các cột trống vào bảng. Giá trị là một số nguyên các cột.