Nhóm bảng HTML
Phần <colgroup>tử được sử dụng để tạo kiểu cho các cột cụ thể của bảng.
Nhóm bảng HTML
Nếu bạn muốn tạo kiểu cho hai cột đầu tiên của bảng, hãy sử dụng các phần tử <colgroup>
và <col>
.
| THỨ HAI | TUE | THỨ TƯ | THU | FRI | ĐÃ NGỒI | MẶT TRỜI |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| số 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Phần <colgroup>tử nên được sử dụng như một vùng chứa cho các thông số kỹ thuật của cột.
Mỗi nhóm được chỉ định bằng một <col>phần tử.
Thuộc spantính chỉ định số lượng cột có kiểu.
Thuộc styletính chỉ định kiểu để cung cấp cho các cột.
Lưu ý: Có rất ít lựa chọn các thuộc tính CSS hợp pháp cho các nhóm .
Thí dụ
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Lưu ý: Thẻ <colgroup>phải là con của một <table>phần tử và phải được đặt trước bất kỳ phần tử bảng nào khác, chẳng hạn như <thead>,
v.v., nhưng sau <tr>phần tử, nếu có.<td><caption>
Thuộc tính CSS hợp pháp
Chỉ có một lựa chọn rất hạn chế các thuộc tính CSS được phép sử dụng trong nhóm cột:
widthtài
visibilitysản tài sản tài sản
backgroundtài sản tài
bordersản
Tất cả các thuộc tính CSS khác sẽ không ảnh hưởng đến bảng của bạn.
Nhiều yếu tố Col
Nếu bạn muốn tạo kiểu cho nhiều cột hơn với các kiểu khác nhau, hãy sử dụng nhiều
<col>phần tử hơn bên trong
<colgroup>:
Thí dụ
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
<col span="3"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Nhóm trống
Nếu bạn muốn tạo kiểu cho các cột ở giữa bảng, hãy chèn phần tử "trống"
<col>(không có kiểu) cho các cột trước:
Thí dụ
<table>
<colgroup>
<col span="3">
<col
span="2"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Ẩn các cột
Bạn có thể ẩn các cột bằng thuộc visibility: collapsetính:
Thí dụ
<table>
<colgroup>
<col span="2">
<col span="3"
style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...