Colgroup tag dùng để chứa các thẻ col
<colgroup></colgroup> thẻ này dùng để chứa các thẻ <col> dùng để định dạng thuộc tính css cho một cột chứa nhiều ô nằm bên trong của <table></table> được áp dụng các thuộc tính của css gộp chung vào các ô nằm chung vào một cột , tuy nhiên để áp dụng các thuộc tính css mình vân khuyến nghị mọi người nên dùng thuộc tính class để áp dụng css một cách hiệu quả và bao quát hơn, vì tuy thẻ này sinh ra là để xác định chức năng áp dụng thuộc tính cho cột trong <table></table> nhưng nó có nhiều vấn đề hạn chế chức năng hơn là mình dung css trực tiếp cho nó,
Cách thức sử dụng của thẻ này trong bảng <table></table> sau đây mình sẽ làm một ví ví dụ cho các bạn xem và thực hành lại, cũng như thay đổi các tham số để có thể có trải nghiệm rõ rệt hơn, về các chức năng của thẻ này mang lạng,
Cùng xem ví dụ sau đây nhé:
Code
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> Hộp 1</td>
<td> Hộp 2</td>
<td> Hộp 3</td>
<td> Hộp 4</td>
<td> Hộp 5</td>
</tr>
</tbody>
<colgroup>
<col style=" background: black ; ">
<col style=" background: red ; ">
<col style=" background: green ; ">
<col style=" background: pink ; ">
</colgroup>
</table>
Giao diện
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
| Hộp 1 | Hộp 2 | Hộp 3 | Hộp 4 | Hộp 5 |
Thuộc tính: class
xác định tên gọi một phần tử
Ví dụ: class="section"
class có thể đặt cho nhiều phần tử và nhóm chúng lại để áp dụng css lên một loạt các phần tử cần áp dụng thuộc tính css
Thuộc tính id
xác định tên gọi của phần tử một cách riêng biệt
Ví dụ: id="layout"
id khi được sử dụng chỉ được sử dụng riêng biệt và duy nhất, không được trùng lặp
Thuộc tính - lang
Xác định Mã ngôn ngữ
Ví dụ: lang="vi"
Xác định mã ngôn ngữ cho nội dung trong một thành phần.
Thuộc tính - dir
dir="rtl"
dir=”ltr”
Xác định hướng văn bản cho các nội dung trong một thành phần.
Thuộc tính - style
Xác định kiểu định dạng
Ví dụ: style="background : green; color:black ; "
Thuộc tính này có chức năng xác định kiểu định dạng cho thành phần
title
Ví dụ: Text title=”nội dung ”
Thuộc tính này Xác định thêm thông tin là tiêu đề cho thành phần.
0 Nhận xét