Thuộc tính colspan trong HTML

Giới thiệu

Thuộc tính colspan trong HTML dùng để gộp nhiều cột thành một ô trong bảng. Áp dụng cho thẻ <td> (ô dữ liệu) hoặc <th> (ô tiêu đề).

1. Thuộc tính colspan trên <td>

Gộp cột cho ô dữ liệu.

<td colspan="so_cot">

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style> table, th, td { border: 2px solid blue; } </style>
</head>
<body>
  <h2>Chi phí sản phẩm</h2>
  <table>
    <tr><th>Miền</th><th>Chi phí</th></tr>
    <tr><td>Phát triển sản phẩm</td><td>500000</td></tr>
    <tr><td>Marketing</td><td>500000</td></tr>
    <tr><td>Dịch vụ</td><td>100000</td></tr>
    <tr><td>Hỗ trợ</td><td>100000</td></tr>
    <tr><td>Bảo trì</td><td>100000</td></tr>
    <tr><td colspan="2">Tổng ngân sách = 1.300.000</td></tr>
  </table>
</body>
</html>

2. Thuộc tính colspan trên <th>

Gộp cột cho ô tiêu đề.

<th colspan="so_cot">

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style> table, th, td { border: 2px solid green; } </style>
</head>
<body>
  <h2>Chi phí sản phẩm</h2>
  <table>
    <tr><th colspan="2">Chi tiêu</th></tr>
    <tr><td>Phát triển sản phẩm</td><td>500000</td></tr>
    <tr><td>Marketing</td><td>500000</td></tr>
    <tr><td>Dịch vụ</td><td>100000</td></tr>
    <tr><td>Hỗ trợ</td><td>100000</td></tr>
    <tr><td>Bảo trì</td><td>100000</td></tr>
    <tr><td colspan="2">Tổng ngân sách = 1.300.000</td></tr>
  </table>
</body>
</html>

Kết quả hiển thị

Ô tiêu đề "Chi tiêu" trải dài 2 cột. Ô tổng cuối cũng gộp 2 cột.

<th colspan="2">Chi tiêu</th>