Thẻ col trong HTML

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

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

Thẻ col trong HTML nằm trong colgroup của table dùng để canh chỉnh chiều rộng, chỉnh màu nền,... cho từng cột hoặc nhóm các cột. Dùng thẻ span trong col để định dạng cho nhóm cột.

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

<col span="socot" >

socot: Số cột trong thuộc tính span dùng để nhóm số cột, nếu không nhóm thì bỏ thuộc tính span đi.

Bạn có thể css bằng thuộc tính style hoặc dùng id hoặc class.

Code Thẻ col trong HTML

Thẻ col 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ẻ col nhóm cột trong HTML

Nhóm các 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ử

Cách sử dụng thẻ col trong HTML hiệu quả

Thẻ col trong HTML phát huy tác dụng tốt nhất khi được sử dụng để quản lý định dạng cho từng cột hoặc nhóm cột trong bảng. Thay vì thiết lập kiểu hiển thị riêng cho từng ô, lập trình viên có thể áp dụng cấu hình chung cho cả một cột, giúp mã HTML gọn gàng và dễ bảo trì hơn.

Khi xây dựng bảng có nhiều dữ liệu, việc kết hợp thẻ col với các thành phần hỗ trợ sẽ giúp kiểm soát bố cục tốt hơn. Đây là cách thường được áp dụng khi cần tạo bảng có chiều rộng cột cố định, phân biệt cột dữ liệu hoặc cải thiện khả năng hiển thị trên giao diện website.

Kết hợp thẻ col với colgroup để định dạng bảng HTML

Thẻ col thường không được sử dụng độc lập mà đi kèm với thẻ colgroup để xác định nhóm cột cần áp dụng thuộc tính. Cách kết hợp này giúp trình duyệt hiểu được phạm vi tác động của từng cấu hình trước khi hiển thị bảng.

Ví dụ, một bảng có ba cột có thể sử dụng colgroup để thiết lập độ rộng hoặc kiểu hiển thị cho từng cột tương ứng. Điều này giúp giảm việc lặp lại thuộc tính trong nhiều ô td, đặc biệt hữu ích với những bảng chứa nhiều hàng dữ liệu.

<table>
    <colgroup>
        <col style="width: 30%">
        <col style="width: 40%">
        <col style="width: 30%">
    </colgroup>
    <tr>
        <th>Sản phẩm</th>
        <th>Mô tả</th>
        <th>Giá</th>
    </tr>
</table>

Trong ví dụ trên, mỗi thẻ col đại diện cho một cột trong bảng. Khi thay đổi thuộc tính trên col, toàn bộ cột tương ứng có thể được điều chỉnh mà không cần sửa từng ô riêng lẻ.

Những lưu ý khi sử dụng thẻ col để quản lý cột trong bảng

Khi sử dụng thẻ col, cần hiểu rằng không phải mọi thuộc tính CSS đều có thể áp dụng trực tiếp cho cột. Một số thuộc tính như màu nền hoặc độ rộng thường hoạt động tốt hơn, trong khi các thuộc tính liên quan đến nội dung bên trong ô có thể không tạo ra kết quả như mong muốn.

• Đặt thẻ col đúng vị trí: Thẻ col nên nằm bên trong colgroup và được khai báo trước phần dữ liệu của bảng.
• Không lạm dụng col: Với bảng đơn giản, việc thêm nhiều cấu hình cột có thể khiến mã HTML trở nên phức tạp không cần thiết.
• Kết hợp với CSS: Trong các dự án hiện đại, CSS thường được ưu tiên để kiểm soát giao diện, còn col phù hợp cho những trường hợp cần định nghĩa cấu trúc cột rõ ràng.
• Kiểm tra khả năng hiển thị: Nên xem lại bảng trên nhiều trình duyệt khác nhau để đảm bảo kiểu định dạng hoạt động ổn định.

Sử dụng thẻ col đúng cách giúp việc quản lý bảng HTML trở nên khoa học hơn, đặc biệt khi website có nhiều bảng dữ liệu cần duy trì lâu dài. Đây là một giải pháp đơn giản nhưng hữu ích để tối ưu cấu trúc bảng và giảm công sức chỉnh sửa trong quá trình phát triển website.

Lời kết

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

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ col 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