Thẻ colgroup trong HTML

• Bùi Tấn Lực
• 909
• 27/09/2025

Chức năng của Thẻ colgroup trong HTML

Thẻ colgroup trong HTML dùng để định dạng từng cột hoặc định dạng từng nhóm cột bằng cách css chiều rộng, màu nền,... cho cột, thẻ colgroup nằm trước tất cả các thẻ như: thead , tbody, tfoot, tr,... và ở ngay sau thẻ caption (nếu có) trong thẻ chứa các thẻ col dùng để định dạng từng cột, nhóm cột.

Cú pháp của Thẻ colgroup trong HTML

<colgroup>
    <col style="thuoctinh:giatri">
    <col style="thuoctinh:giatri">
    <col style="thuoctinh:giatri">
</colgroup>	

Code Thẻ colgroup trong HTML

Thẻ colgroup định dạng từng cột trong HTML

Css cho từng cột:

<colgroup>
    <col style="background-color:red;width:50px">
    <col style="background-color:yellow;">
    <col style="background-color:green;">
</colgroup>	

<table>
  <colgroup>
    <col style="background-color:red;width:50px">
    <col style="background-color:yellow;">
    <col style="background-color:green;">
  </colgroup>	
  <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
  
</table>

Chạy Thử

Thẻ colgroup định dạng nhóm cột trong HTML

Nhóm nhiều hơn 2 cột lại với nhau để css:

<colgroup>
    <col style="background-color:red;width:50px">
    <col span="2" style="background-color:green;">
</colgroup>	

<table>
  <colgroup>
    <col style="background-color:red;width:50px">
    <col span="2" style="background-color:green;">
  </colgroup>	
  <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
  
</table>

Chạy Thử

Lưu ý khi sử dụng thẻ colgroup trong HTML

Khi sử dụng thẻ colgroup trong HTML, việc hiểu đúng vị trí đặt thẻ, cách kết hợp với CSS và giới hạn của nó sẽ giúp việc quản lý bảng trở nên hiệu quả hơn. Đây là phần thường bị bỏ qua nhưng lại rất quan trọng khi xây dựng các bảng dữ liệu có nhiều cột.

Vị trí đặt thẻ colgroup trong cấu trúc bảng HTML

Thẻ colgroup cần được đặt bên trong thẻ table và nằm sau phần caption (nếu có), trước các nhóm dữ liệu như thead, tbody hoặc các hàng tr.

Việc đặt đúng vị trí giúp trình duyệt hiểu được những thiết lập định dạng nào sẽ được áp dụng cho từng nhóm cột trước khi hiển thị nội dung bảng.

<table>
  <caption>Danh sách sản phẩm</caption>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Tên sản phẩm</th>
    <th>Giá</th>
  </tr>
</table>

Nếu đặt colgroup sai vị trí, trình duyệt có thể bỏ qua một số thuộc tính hoặc khiến việc kiểm soát giao diện bảng không đạt được kết quả mong muốn.

Kết hợp colgroup với CSS để quản lý giao diện bảng hiệu quả

Trong thực tế, thẻ colgroup thường được sử dụng cùng CSS để kiểm soát cách hiển thị của từng cột thay vì định dạng thủ công từng ô trong bảng.

Cách này đặc biệt hữu ích với các bảng có nhiều dữ liệu, vì chỉ cần thiết lập một lần cho nhóm cột là có thể áp dụng cho toàn bộ cột liên quan.

<table>
  <colgroup>
    <col class="product">
    <col class="price">
  </colgroup>
  <tr>
    <td>Laptop</td>
    <td>15000000</td>
  </tr>
</table>

Ví dụ trên cho phép gán kiểu hiển thị thông qua class CSS, giúp mã nguồn dễ bảo trì hơn khi cần thay đổi giao diện bảng.

Tuy nhiên, không phải mọi thuộc tính CSS đều có thể tác động trực tiếp lên colgroup hoặc col. Vì vậy, nên kiểm tra khả năng hỗ trợ của trình duyệt trước khi áp dụng các kiểu định dạng phức tạp.

Những giới hạn của colgroup khi định dạng bảng HTML

Mặc dù giúp quản lý cột thuận tiện hơn, colgroup không phải là công cụ thay thế hoàn toàn cho CSS hoặc các phương pháp xây dựng bảng hiện đại.

• Chỉ tập trung vào việc nhóm và định dạng cột, không xử lý nội dung bên trong từng ô.
• Một số thuộc tính CSS có thể không hoạt động như mong muốn khi áp dụng trực tiếp cho cột.
• Không phù hợp với các bảng có cấu trúc dữ liệu thay đổi liên tục hoặc cần bố cục quá phức tạp.

Vì vậy, nên sử dụng colgroup khi cần kiểm soát cách trình bày các cột trong bảng một cách rõ ràng. Với những giao diện phức tạp hơn, nên kết hợp thêm CSS hoặc các kỹ thuật bố cục khác để đạt hiệu quả tốt nhất.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ colgroup trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ colgroup trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn