Giới thiệu

Trong HTML, tag <colgroup> được sử dụng để nhóm các cột trong một bảng và áp dụng các thuộc tính chung cho nhóm cột đó. Tag này giúp tăng tính linh hoạt và hiệu quả trong việc quản lý và định dạng các cột trong bảng.

Cú pháp

Cú pháp của tag <colgroup> như sau:

<colgroup>
  <col />
  <col />
  ...
</colgroup>

Trong đó, mỗi thẻ <col> đại diện cho một cột trong bảng.

Thuộc tính của tag colgroup

Tag <colgroup> hỗ trợ một số thuộc tính để định dạng các cột trong bảng:

• span: Xác định số lượng cột mà nhóm cột sẽ áp dụng thuộc tính. Giá trị mặc định là 1.
• width: Xác định độ rộng của các cột trong nhóm. Giá trị có thể là một số nguyên hoặc một phần trăm. Ví dụ: width="100" hoặc width="50%".
• style: Định dạng CSS để áp dụng cho các cột trong nhóm.
• class: Xác định lớp CSS để áp dụng cho các cột trong nhóm.

Ví dụ

Dưới đây là một ví dụ minh họa về cách sử dụng tag <colgroup> để định dạng các cột trong một bảng:

Trong ví dụ này, chúng ta sử dụng tag <colgroup> để nhóm các cột và áp dụng màu nền khác nhau cho từng cột. Kết quả là các cột trong bảng sẽ có màu nền tương ứng.

<table>
  <colgroup>
    <col style="background-color: lightblue" />
    <col style="background-color: lightgreen" />
    <col style="background-color: lightyellow" />
  </colgroup>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Kết luận

Tag <colgroup> trong HTML là một công cụ hữu ích để quản lý và định dạng các cột trong bảng. Bằng cách sử dụng tag này, chúng ta có thể áp dụng các thuộc tính chung cho một nhóm cột, giúp tăng tính linh hoạt và hiệu quả trong việc thiết kế và định dạng b