HTML5: Thẻ <col> và <colgroup>

Tổng quan

Thẻ <col> dùng để thiết lập các hiệu ứng chung cho các ô của cột ứng với nó trong bảng, điều này có thể sẽ giúp ta tốn ít công sức hơn so với việc thiết lập hiệu ứng một cách thủ công trên từng ô của cột đó. <col> là thẻ con của thẻ <colgroup>.

Thẻ <colgroup> là thẻ cha của thẻ <col> và là thẻ con trực tiếp của thẻ <table>. <colgroup> cùng với thẻ <col> dùng để thiết lập các hiệu ứng chung cho từng cột của bảng.

Nhóm nội dung

Thẻ <col> và <colgroup> không thuộc nhóm nội dung nào.

Nội dung được phép

Thẻ <col> không chứa nội dung.

Đối với thẻ <colgroup>: nếu thẻ này sử dụng thuộc tính span thì nó là thẻ trắng (empty); nếu không sử dụng span thì nó sẽ không chứa hoặc chứa các thẻ <col>.

Thẻ đóng

Thẻ <col> là thẻ đơn (<col />) .

Đối với thẻ <colgroup>: có thể bỏ qua thẻ mở <colgroup> nếu nó chứa thẻ <col> và thẻ <colgroup> nằm trước nó không bỏ qua thẻ đóng; có thể bỏ qua thẻ đóng (</colgroup>) nếu phía sau nó không có các khoảng trắng hoặc thẻ chú thích (<!-- -->).

Phần tử cha được phép

Đối với thẻ <col>: phần tử cha được phép là <colgroup>, nhưng không được sử dụng thuộc tính span trong thẻ <colgroup>.

Đối với thẻ <colgroup>: phần tử cha được phép là thẻ <table> nhưng <colgroup> phải nằm sau thẻ <caption> và nằm trước các thẻ  <thead>, <tbody>, <tfoot> và <tr>.

DOM interface

Cả <col> và <colgroup> đều thuộc HTMLTableColElement.

Thuộc tính

<col> và <colgroup> bao gồm các thuộc tính Global. Dưới đây là những thuộc tính cơ bản của hai thẻ này.

align

Đây là thuộc tính liệt kê, nó được dùng để canh lề theo chiều ngang cho nội dung nằm trong từng ô của của cột ứng với thẻ <col> hiện thời, nếu nó được sử dụng trong thẻ <colgroup> thì hiệu ứng canh lề sẽ áp dụng cho các cột ứng với các thẻ <col> nằm trong thẻ <colgroup> hiện thời. Các giá trị có thể có của align gồm:

· left, canh trái nội dung trong ô;

· center, canh giữa nội dụng;

· right, canh phải nội dung;

· justify, canh thẳng hàng hai bên trái phải đối với nội dung;

· char, canh lề nội dung văn bản với độ lệch nhỏ nhất, được xác định bằng các thuộc tính char và charoff (giá trị này đã lỗi thời và có thể không còn được dùng đến nữa).

Nếu thuộc tính này không được dùng đến thì <col> sẽ thừa kế giá trị của align trong thẻ <colgroup> chứa nó, còn nếu thẻ <colgroup> cũng không sử dụng đến thuộc tính align thì mặc định nội dung trong ô sẽ được canh trái.

Lưu ý: Thuộc tính align đã trở nên lỗi thời từ phiên bản HTML5, vì vậy nên tránh dùng nó. 

Để tạo được các hiệu ứng tương tự như những giá trị left, center, right hay justify của align ta làm như sau:

- Không nên cố gắng sử dụng thuộc tính text-align của CSS cho <col> cũng như <colgroup> bởi vì thẻ <td> của bảng không phải là con của chúng, và vì vậy <td> sẽ không thừa kế được.

- Nếu bảng không sử dụng thuộc tính colspan thì ta có thể sử dụng bộ chọn td:nth-child(an+b) của CSS, trong đó a bằng 0 hoặc a là một số nguyên có trị tuyệt đối lớn hơn hoặc bằng tổng số cột trong bảng và b là thứ tự của cột (cột thứ mấy) trong bảng, sau đó bên trong bộ chọn này ta sử dụng thuộc tính text-align thì lúc đó text-align mới có tác dụng. Ví dụ như nếu bạn muốn canh giữa cho nội dung nằm trong các ô của cột thứ 4 của bảng có 8 cột thì ta làm như sau:

Trong trường hợp a có trị tuyệt đối nhỏ hơn tổng số cột thì cột có vị trí b và những cột khác cách cột đó a*i vị trí (i = ±1, ±2, ...) sẽ được canh lề. Ví dụ nếu như bạn muốn canh phải cho nội dung nằm trong các ô của cột thứ 4 và những cột bên phải nó cách nó 2*i vị trí thì ta làm như sau:

- Nếu bảng có sử dụng thuộc tính colspan thì có thể thiết lập hiệu ứng canh lề bằng cách kết hợp các bộ chọn CSS một cách thích hợp (ví dụ như td[colspan=2]{text-align:center}).

Để tạo được hiệu ứng tương tự như giá trị char của thuộc tính align thì trong CSS3 ta có thể sử dụng giá trị của thuộc tính char tương tự như giá trị của thuộc tính text-align.

bgcolor

Thuộc tính này dùng để tạo màu nền cho các ô của cột. Giá trị màu được thể hiện là tên màu theo tiếng Anh hoặc bao gồm ký tự '#" và 6 ký số hệ 16 được chia thành 3 cặp theo 3 màu cơ bản: #RRGGBB (R: Red, G: Green, B: Blue). Dưới đây là 16 màu cơ bản thường được dùng đến:

Lưu ý: Đây là thuộc tính không chuẩn, nên có thể nó không còn được dùng đến, nó chỉ được sử dụng trong một số phiên bản của trình duyệt Internet Explorer; ta có thể thay thế nó bằng thuộc tính background-color hoặc background của CSS.

char

Thuộc tính này dùng để thiết lập ký tự để canh lề cho các ô của cột. Ký tự thường dùng đến là ký tự '.' khi muốn canh lề cho các số hoặc các giá trị tiền tệ. Thuộc tính này sẽ không có tác dụng nếu thuộc tính align không thiết lập giá trị là char.

Lưu ý: Thuộc tính này đã lỗi thời và có thể không còn được sử dụng nữa. Để thay thế, trong CSS3 ta có thể dùng tập ký tự để áp dụng thuộc tính char như giá trị của thuộc tính text-align.

charoff

Thuộc tính này được dùng để chỉ ra số ký tự cần thêm vào các cột dữ liệu từ các ký tự liện kết được xác định thông qua thuộc tính char. Thuộc tính này cũng đã lỗi thời và có thể không còn được dùng đến nữa.

span

Thuộc tính này chứa một số nguyên dương để chỉ ra số cột liên tiếp nhau bắt đầu từ cột tương ứng với thẻ <col> sẽ được thẻ <col> mở rộng hiệu ứng. Nếu thuộc tính này không được sử dụng thì giá trị mặc định sẽ là 1. Ví dụ:

valign

Thuộc tính này dùng để canh lề theo chiều dọc đối với nội dung trong mỗi ô của cột tương ứng. Các giá trị có thể có của thuộc tính này gồm:

· baseline, giá trị này sẽ canh dưới cho văn bản trong với ô, nhưng canh chỉnh nó nằm trên đường cơ sở của các ký tự chứ không nằm phía dưới chúng. Trong trường hợp tất cả các ký tự trong ô đều có cùng kích thước thì giá trị baseline tương đương với giá trị bottom.

· bottom, giá trị này sẽ đặt văn bản trong ô xuống phía dưới cùng nhất có thể của ô (canh dưới);

· middle, giá trị này sẽ canh giữa đối với văn bản trong ô;

· top, giá trị này sẽ đặt văn bản lên phía trên cùng nhất có thể của ô.

Lưu ý: Thuộc tính valign đã lỗi thời, do đó có thể nó không còn được dùng nữa, ta nên tránh sử dụng; thay vào đó ta có thể xử lý hiệu ứng canh dọc văn bản trong ô như sau:

- Nếu bảng không sử dụng thuộc tính colspan thì ta áp dụng bộ chọn td:nth-child(an+b) của CSS để xác định cột muốn canh dọc rồi sử dụng thuộc tính vertical-align trong bộ chọn. Ví dụ, nếu ta muốn canh dưới cho các ô của cột thứ 4 ta làm như sau:

- Nếu bảng có sử dụng thuộc tính colspan thì có thể thiết lập hiệu ứng canh lề bằng cách kết hợp các bộ chọn CSS một cách thích hợp (ví dụ như td[colspan=2]{vertical-align:center}).

width

Thuộc tính này dùng để xác định độ rộng mặc định cho cột ứng với thẻ <col> hiện thời, nếu nó được sử dụng cho thẻ <colgroup> thì tất cả các cột ứng với các thẻ <col> nằm trong thẻ <colgroup> tương ứng sẽ được xác định độ rộng; đơn vị sử dụng là pixel (px) hoặc percentage (%); width cũng có thể mang giá trị đặc biệt là 0* với ý nghĩa rằng độ rộng của cột hiện thời nên đủ ở mức cần thiết để chứa nội dung; một giá trị khác cũng hay được sử dụng là 0.5*. Thuộc tính này đã lỗi thời đối với HTML5.

Ví dụ áp dụng