<colgroup>: Phần tử Nhóm Cột Bảng

Try it

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Batman</th>
      <th scope="col">Robin</th>
      <th scope="col">The Flash</th>
      <th scope="col">Kid Flash</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Skill</th>
      <td>Smarts, strong</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
    </tr>
  </tbody>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

span

Xác định số cột liên tiếp mà phần tử <colgroup> trải rộng. Giá trị phải là một số nguyên dương lớn hơn không. Nếu không có, giá trị mặc định là 1.

Note: Thuộc tính span không được phép nếu có một hoặc nhiều phần tử <col> trong <colgroup>.

Thuộc tính không còn dùng

Các thuộc tính sau đây đã không còn được dùng và không nên sử dụng. Chúng được ghi lại dưới đây để tham khảo khi cập nhật code hiện có và chỉ vì lý do lịch sử.

align Deprecated

Xác định căn chỉnh ngang của mỗi ô nhóm cột. Các giá trị enumerated có thể là left, center, right, justify và char. Khi được hỗ trợ, giá trị char căn chỉnh nội dung văn bản theo ký tự được định nghĩa trong thuộc tính char và độ lệch được định nghĩa bởi thuộc tính charoff. Lưu ý rằng các phần tử <col> con có thể ghi đè giá trị này bằng thuộc tính align của riêng chúng. Thay vào đó hãy sử dụng thuộc tính CSS text-align trên các phần tử <td> và <th>, vì thuộc tính này đã không còn được dùng.

Note: Đặt text-align trên phần tử <colgroup> không có hiệu lực vì các phần tử <td> và <th> không phải con của phần tử <colgroup>, và do đó chúng không kế thừa từ nó.

Nếu bảng không sử dụng thuộc tính colspan, hãy dùng selector CSS td:nth-of-type(an+b) theo từng cột, trong đó a là tổng số cột trong bảng và b là vị trí thứ tự của cột trong bảng, ví dụ td:nth-of-type(7n+2) { text-align: right; } để căn phải các ô của cột thứ hai.

Nếu bảng có sử dụng thuộc tính colspan, hiệu ứng có thể đạt được bằng cách kết hợp các selector thuộc tính CSS phù hợp như [colspan=n], mặc dù điều này không đơn giản.

bgcolor Deprecated

Xác định màu nền của mỗi ô nhóm cột. Giá trị là màu HTML; có thể là mã RGB thập lục phân 6 chữ số, có tiền tố #, hoặc một từ khóa màu. Các giá trị CSS <color> khác không được hỗ trợ. Thay vào đó hãy sử dụng thuộc tính CSS background-color, vì thuộc tính này đã không còn được dùng.

char Deprecated

Không có tác dụng. Ban đầu được dùng để xác định căn chỉnh nội dung theo một ký tự của mỗi ô nhóm cột. Các giá trị điển hình bao gồm dấu chấm (.) khi muốn căn chỉnh số hoặc giá trị tiền tệ. Nếu align không được đặt thành char, thuộc tính này bị bỏ qua, mặc dù nó vẫn được dùng làm giá trị mặc định cho align của các phần tử <col> trong nhóm cột này.

charoff Deprecated

Không có tác dụng. Ban đầu được dùng để xác định số ký tự để bù đầu nội dung ô nhóm cột từ ký tự căn chỉnh được xác định bởi thuộc tính char.

valign Deprecated

Xác định căn chỉnh dọc của mỗi ô nhóm cột. Các giá trị enumerated có thể là baseline, bottom, middle và top. Lưu ý rằng các phần tử <col> con có thể ghi đè giá trị này bằng thuộc tính valign của riêng chúng. Thay vào đó hãy sử dụng thuộc tính CSS vertical-align trên các phần tử <td> và <th>, vì thuộc tính này đã không còn được dùng.

Note: Đặt vertical-align trên phần tử <colgroup> không có hiệu lực vì các phần tử <td> và <th> không phải con của phần tử <colgroup>, và do đó chúng không kế thừa từ nó.

Nếu bảng không sử dụng thuộc tính colspan, hãy dùng selector CSS td:nth-of-type() theo từng cột, ví dụ td:nth-of-type(2) { vertical-align: middle; } để căn giữa dọc các ô của cột thứ hai.

Nếu bảng có sử dụng thuộc tính colspan, hiệu ứng có thể đạt được bằng cách kết hợp các selector thuộc tính CSS phù hợp như [colspan=n], mặc dù điều này không đơn giản.

width Deprecated

Xác định chiều rộng mặc định cho mỗi cột trong nhóm cột hiện tại. Ngoài các giá trị pixel và phần trăm tiêu chuẩn, thuộc tính này có thể nhận dạng đặc biệt 0*, có nghĩa là chiều rộng của mỗi cột được trải rộng sẽ là chiều rộng tối thiểu cần thiết để chứa nội dung của cột. Chiều rộng tương đối như 5* cũng có thể được sử dụng. Lưu ý rằng các phần tử <col> con có thể ghi đè giá trị này bằng thuộc tính width của riêng chúng. Thay vào đó hãy sử dụng thuộc tính CSS width, vì thuộc tính này đã không còn được dùng.

Ghi chú sử dụng

• <colgroup> nên xuất hiện trong <table>, sau bất kỳ phần tử <caption> nào (nếu được sử dụng), nhưng trước bất kỳ phần tử <thead>, <tbody>, <tfoot> và <tr> nào.
• Chỉ một số lượng hạn chế các thuộc tính CSS ảnh hưởng đến <colgroup>:
  • background: Các thuộc tính background khác nhau sẽ đặt nền cho các ô trong nhóm cột. Vì màu nền nhóm cột được vẽ lên trên bảng, nhưng phía sau màu nền áp dụng cho các cột (<col>), nhóm hàng (<thead>, <tbody> và <tfoot>), các hàng (<tr>) và các ô riêng lẻ (<th> và <td>), nền áp dụng cho nhóm cột bảng chỉ hiển thị nếu mọi lớp vẽ lên trên chúng có nền trong suốt.
  • border: Các thuộc tính border khác nhau được áp dụng, nhưng chỉ khi <table> có border-collapse: collapse được đặt.
  • visibility: Giá trị collapse cho một nhóm cột dẫn đến tất cả các ô của các cột trong nhóm cột đó không được hiển thị, và các ô trải sang các cột khác bị cắt. Không gian mà các cột trong nhóm cột này chiếm sẽ bị xóa. Tuy nhiên, kích thước của các cột khác vẫn được tính như thể các ô trong cột (các cột) bị thu gọn trong nhóm cột vẫn còn. Các giá trị khác cho visibility không có hiệu lực.
  • width: Thuộc tính width định nghĩa chiều rộng tối thiểu cho các cột trong nhóm cột, như thể min-width được đặt.

Ví dụ

Xem <table> để biết ví dụ bảng đầy đủ giới thiệu các chuẩn và thực hành phổ biến.

Ví dụ này minh họa một bảng bảy cột được chia thành hai phần tử <colgroup> trải rộng nhiều cột.

HTML

Hai phần tử <colgroup> được sử dụng để cấu trúc một bảng cơ bản bằng cách tạo nhóm cột. Số cột trong mỗi nhóm cột được xác định bởi thuộc tính span.

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Clean room</td>
      <td>Football training</td>
      <td>Dance Course</td>
      <td>History Class</td>
      <td>Buy drinks</td>
      <td>Study hour</td>
      <td>Free time</td>
    </tr>
    <tr>
      <td>Yoga</td>
      <td>Chess Club</td>
      <td>Meet friends</td>
      <td>Gymnastics</td>
      <td>Birthday party</td>
      <td>Fishing trip</td>
      <td>Free time</td>
    </tr>
  </tbody>
</table>

CSS

Các cột được nhóm có thể được dùng để làm nổi bật cấu trúc trực quan bằng CSS:

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
  text-align: center;
}

.weekdays {
  background-color: #d7d9f2;
}

.weekend {
  background-color: #ffe8d4;
}

table {
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Học: Kiến thức cơ bản về bảng HTML
• <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>: Các phần tử liên quan đến bảng khác
• background-color: Thuộc tính CSS để đặt màu nền của mỗi ô nhóm cột
• border: Thuộc tính CSS để kiểm soát đường viền của các ô nhóm cột
• text-align: Thuộc tính CSS để căn chỉnh ngang nội dung mỗi ô nhóm cột
• vertical-align: Thuộc tính CSS để căn chỉnh dọc nội dung mỗi ô nhóm cột
• visibility: Thuộc tính CSS để ẩn (hoặc hiện) các ô của một nhóm cột
• width: Thuộc tính CSS để kiểm soát chiều rộng mặc định cho mỗi cột trong nhóm cột
• :nth-of-type, :first-of-type, :last-of-type: Các pseudo-class CSS để chọn các ô cột mong muốn