Thẻ HTML <colgroup>

Định nghĩa và cách sử dụng

Thẻ <colgroup> chỉ định một nhóm gồm một hoặc nhiều cột trong bảng để định dạng.

Thẻ <colgroup> hữu ích để áp dụng kiểu cho toàn bộ cột, thay vì lặp lại kiểu cho từng ô hay cho mỗi hàng.

Lưu ý: Thẻ <colgroup> phải là con của phần tử <table>, sau bất kỳ phần tử <caption> nào và trước bất kỳ phần tử <thead>, <tbody>, <tfoot><tr> nào.

Mẹo: Để xác định các thuộc tính khác nhau cho một cột trong <colgroup>, hãy sử dụng thẻ <col> trong thẻ <colgroup>.

Hỗ trợ trình duyệt

Phần tử
<colgroup>
Google ChromeMS EdgeFirefoxSafariOpera

Thuộc tính

Thuộc tínhGiá trịMô tả
spannumberChỉ định số cột mà một nhóm cột sẽ kéo dài

Thuộc tính Global

Thẻ <colgroup> cũng hỗ trợ thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <colgroup> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Các ví dụ khác

Căn chỉnh văn bản trong các cột bảng (với CSS):

<table style="width:100%">
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td style="text-align:right">$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td style="text-align:right">$47</td>
  </tr>
</table>

Căn chỉnh theo chiều dọc văn bản trong các cột của bảng (với CSS):

<table style="height:200px">
  <tr>
    <th>Month</th>
    <th style="vertical-align:bottom">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td style="vertical-align:bottom">$100</td>
  </tr>
</table>

Chỉ định chiều rộng của một cột trong bảng (với CSS):

<table>
  <tr>
    <th style="width:200px">Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Cài đặt CSS mặc định

Hầu hết mọi trình duyệt sẽ hiển thị phần tử <colgroup> với các giá trị mặc định sau:

colgroup {
  display: table-column-group;
}
Thứ Hai, 06/06/2022 09:05
569 👨 686
Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!
Số điện thoại này đã được xác thực!
Bạn có thể dùng Sđt này đăng nhập tại đây!
Lỗi gửi SMS, liên hệ Admin
0 Bình luận
Sắp xếp theo
    ❖ HTML