Sử dụng thuộc tính phần tử TABLE HTML

Khai thác tối đa các bảng HTML bằng cách học thuộc tính bảng

Thuộc tính bảng HTML cung cấp cho bạn nhiều quyền kiểm soát hơn đối với các bảng HTML. Có rất nhiều thuộc tính có sẵn cho các bảng để làm cho chúng thú vị hơn và thay đổi giao diện trang của bạn.

Thuộc tính phần tử HTML TABLE

Trong HTML5, phần tử sử dụng các thuộc tính toàn cục và một thuộc tính khác:. Và nó đã thay đổi chỉ có giá trị 1 hoặc trống (tức là border = ""). Nếu bạn muốn thay đổi chiều rộng của đường viền, bạn nên sử dụng thuộc tính CSS chiều rộng đường viền.

Xem bên dưới để tìm hiểu về các thuộc tính bảng HTML5 hợp lệ.

Ngoài ra còn có một số thuộc tính là một phần của đặc tả HTML 4.01 đã trở nên lỗi thời trong HTML5:

Và một thuộc tính không được chấp nhận trong HTML 4.01 và cũng đã lỗi thời trong HTML5.

Tìm hiểu thêm về thuộc tính HTML 4.01 TABLE.

Ngoài ra còn có một số thuộc tính không phải là một phần của bất kỳ đặc tả HTML nào.

Sử dụng các thuộc tính này nếu bạn biết rằng các trình duyệt bạn hỗ trợ có thể xử lý chúng và bạn không quan tâm đến HTML hợp lệ.

Tìm hiểu thêm về Thuộc tính TABLE cụ thể của trình duyệt.

Thuộc tính phần tử TABLE HTML5

Như chúng tôi đã đề cập ở trên, chỉ có một thuộc tính, ngoài các thuộc tính toàn cục, có giá trị trên phần tử HTML5 TABLE: border.

Thuộc tính border được sử dụng để xác định một đường viền xung quanh toàn bộ bảng và tất cả các ô bên trong nó. Có một số câu hỏi về việc liệu nó có được bao gồm trong đặc tả HTML5 hay không, nhưng nó vẫn còn bởi vì nó cung cấp thông tin về cấu trúc bảng, ngoài những hàm ý phong cách đơn giản.

Để thêm thuộc tính đường viền, bạn đặt giá trị là 1 nếu có đường viền và trống (hoặc rời khỏi thuộc tính) nếu không có. Hầu hết các trình duyệt cũng sẽ hỗ trợ 0 không có đường viền và bất kỳ giá trị số nguyên nào khác (2, 3, 30, 500, v.v.) để khai báo chiều rộng của đường viền theo pixel, nhưng điều này đã lỗi thời trong HTML5. Thay vào đó, bạn nên sử dụng các thuộc tính kiểu đường viền CSS để xác định chiều rộng đường viền và các kiểu khác.

Để tạo một bảng có đường viền, hãy viết:

border = "1" >

Đây là bảng có đường viền

Có các thuộc tính HTML 4.01 đã lỗi thời trong HTML5. Nếu bạn có kế hoạch viết HTML 4.01 tài liệu, bạn có thể tìm hiểu chúng, nếu không, bạn có thể bỏ qua chúng. Hầu hết các thuộc tính này có các lựa chọn thay thế, được mô tả ở trên.

Chúng tôi mô tả các thuộc tính của phần tử hợp lệ trong HTML5 (và HTML 4.01). Điều này mô tả các thuộc tính TABLE có giá trị trong HTML 4.01, nhưng đã lỗi thời trong HTML5. Nếu bạn vẫn viết các tài liệu HTML 4.01, bạn có thể sử dụng các thuộc tính này, nhưng hầu hết trong số chúng có các lựa chọn thay thế sẽ làm cho các trang của bạn được kiểm chứng trong tương lai hơn khi bạn chuyển sang HTML5.

Thuộc tính HTML 4.01 hợp lệ

Thuộc tính chúng tôi đã mô tả ở trên.

Sự khác biệt duy nhất trong HTML 4.01 từ HTML5 là bạn có thể chỉ định bất kỳ số nguyên nào (0, 1, 2, 15, 20, 200, v.v.) để xác định chiều rộng của đường viền theo pixel.

Để tạo một bảng có đường viền 5px, hãy viết:

border = "5" >

Bảng này có đường viền 5px.

Xem ví dụ về hai bảng có đường viền.

Thuộc tính xác định lượng khoảng trống giữa các đường viền ô và nội dung của ô. Mặc định là hai pixel. Đặt ô xếp thành 0 nếu bạn không muốn có khoảng cách giữa nội dung và đường viền.

Để đặt ô đệm thành 20, hãy viết:

cellpadding = "20" >


Bảng này có ô di động là 20.

Đường viền ô sẽ được phân tách bằng 20 pixel.

Xem ví dụ về bảng có ô di chuột

Thuộc tính xác định khoảng trống giữa các ô bảng và nội dung ô. Giống như cellpadding, mặc định được đặt thành hai pixel, vì vậy bạn phải đặt nó thành 0 nếu bạn không muốn khoảng cách ô.

Để thêm khoảng cách ô vào bảng, hãy viết:

cellspacing = "20" >


Bảng này có khoảng cách 20 ô.

Các ô sẽ được phân tách bằng 20 pixel.

Xem bảng có cellspacing

Thuộc tính xác định phần nào của đường viền xung quanh bên ngoài của bảng sẽ hiển thị. Bạn có thể khung bảng của bạn trên tất cả bốn mặt, bất kỳ một bên, trên và dưới, trái và phải, hoặc không có.

Đây là HTML cho một bảng chỉ có đường viền bên trái:

frame = "lhs" >


Bảng này
sẽ có

chỉ
đã đóng khung bên trái.

Và một ví dụ khác với khung dưới cùng:

frame = "below" >

Bảng này có khung ở dưới cùng.

Xem một số bảng có khung

Thuộc tính này tương tự như thuộc tính frame, chỉ có nó ảnh hưởng đến các đường viền xung quanh các ô của bảng. Bạn có thể đặt quy tắc trên tất cả các ô, giữa các cột, giữa các nhóm như TBODY và ​​TFOOT hoặc không có.

Để xây dựng một bảng với các dòng chỉ giữa các hàng, hãy viết:

rules = "rows" >


Bảng 4x4 này có
các hàng không phải cột

được phác thảo bằng
thuộc tính quy tắc.

Và một với các dòng giữa các cột:

rules = "cols" >


Đây là
một bảng
trong đó

cột

được đánh dấu

Dưới đây là ví dụ về bảng aa với các quy tắc

Thuộc tính cung cấp thông tin về bảng cho trình đọc màn hình và các tác nhân người dùng khác có thể gặp sự cố khi đọc bảng. Để sử dụng thuộc tính summary, bạn viết một mô tả ngắn gọn về bảng và đặt nó làm giá trị của thuộc tính. Bản tóm tắt sẽ không hiển thị trên trang web trong hầu hết các trình duyệt web tiêu chuẩn.

Đây là cách viết một bảng đơn giản với một bản tóm tắt:

summary = "Đây là một bảng mẫu chứa thông tin về trình điền. Mục đích của bảng này là để minh họa một bản tóm tắt." >


hàng 1 cột 1
hàng 2 cột 1

cột 1 hàng 2
cột 2 hàng 2

Xem bảng có bản tóm tắt

Thuộc tính xác định chiều rộng của bảng theo pixel hoặc dưới dạng phần trăm của phần tử vùng chứa. Nếu chiều rộng không được đặt, bảng sẽ chỉ chiếm nhiều không gian vì nó cần hiển thị nội dung, với chiều rộng tối đa giống với chiều rộng của phần tử gốc.

Để xây dựng một bảng có chiều rộng cụ thể bằng pixel, hãy viết:

width = "300" >

Bảng này chiếm 80% chiều rộng của vùng chứa.

Và để xây dựng một bảng có chiều rộng là phần trăm của phần tử cha, hãy viết:

width = "80%" >

Bảng này chiếm 80% chiều rộng của vùng chứa.

Xem ví dụ về bảng có chiều rộng

Thuộc tính TABLE HTML 4.01 không được chấp nhận

Có một thuộc tính của phần tử TABLE không được chấp nhận trong HTML 4.01 và lỗi thời trong HTML5: căn chỉnh . Thuộc tính này cho phép bạn đặt vị trí của bảng trên trang có liên quan đến văn bản bên cạnh nó. Thuộc tính này đã không được chấp nhận trong HTML 4.01 và bạn nên tránh sử dụng nó. Thay vào đó, bạn nên sử dụng thuộc tính CSS hoặc lề trái: tự động; và lề phải: tự động; phong cách. Thuộc tính float cung cấp cho bạn một kết quả gần với thuộc tính align được cung cấp, nhưng nó có thể ảnh hưởng đến cách hiển thị nội dung trang còn lại. Lề bên phải: tự động; và lề trái: tự động; W3C đề xuất như là một giải pháp thay thế.

Dưới đây là ví dụ không được chấp thuận bằng cách sử dụng thuộc tính align:

align = "right" >


Bảng này được căn phải

Dòng văn bản xoay quanh bên trái

Xem ví dụ không dùng nữa bằng cách sử dụng thuộc tính align.

Và để có được hiệu ứng tương tự với HTML hợp lệ (không được dùng nữa), hãy viết:

style = "float: right;" >


Bảng này được căn phải

Dòng văn bản xoay quanh bên trái

Phần sau giải thích các thuộc tính TABLE không phải là một phần của bất kỳ đặc tả HTML nào.

Thông tin trước đây mô tả các thuộc tính của phần tử HTML hợp lệ trong HTML 4.01 nhưng đã lỗi thời trong HTML5.

Phần sau mô tả các thuộc tính TABLE không hợp lệ trong bất kỳ đặc tả hiện tại nào. Nếu bạn không quan tâm đến việc các trang của mình có xác thực hay không và người dùng của bạn sử dụng trình duyệt hỗ trợ các phần tử này thì bạn có thể sử dụng các phần tử này. Nhưng hầu hết trong số đó không được hỗ trợ trong các trình duyệt hiện đại hoặc có các lựa chọn thay thế phù hợp hơn với tiêu chuẩn.

Chúng tôi khuyên bạn không nên sử dụng các thuộc tính này trên các bảng HTML của mình.

Thuộc tính là thuộc tính cũ được bao gồm trước khi CSS được hỗ trợ rộng rãi. Nó cho phép bạn thay đổi màu nền của bảng. Bạn có thể đặt tên màu hoặc mã thập lục phân. Thuộc tính này vẫn hoạt động trong rất nhiều trình duyệt, nhưng đối với HTML được kiểm soát trong tương lai, bạn không nên sử dụng nó và sử dụng CSS thay thế.

Cách thay thế tốt hơn cho thuộc tính này là thuộc tính style.

Để thay đổi màu nền của bảng, hãy viết:

style = "background-color: #ccc;" >

Bảng này có nền màu xám

Tương tự như thuộc tính bgcolor, thuộc tính bordercolor cho phép bạn thay đổi màu của thuộc tính. Thuộc tính này chỉ được Internet Explorer hỗ trợ. Thay vào đó, bạn nên sử dụng thuộc tính kiểu đường viền màu.

Để thay đổi màu đường viền của bảng, hãy viết:

style = "border-color: đỏ;" >

Bảng này có đường viền màu đỏ.

Các thuộc tính bordercolorlight và bordercolordark được bao gồm trong Internet Explorer để cho phép bạn tạo một đường viền 3D xung quanh bảng của bạn. Tuy nhiên, kể từ IE8 trở lên, điều này chỉ được hỗ trợ trong Chế độ Tiêu chuẩn và Chế độ Quirks của IE7 . Microsoft tuyên bố rằng các thuộc tính này không còn được hỗ trợ nữa.

Trong một thời gian ngắn, thuộc tính cols trên phần tử TABLE đã được đề xuất để giúp các trình duyệt biết có bao nhiêu cột mà một bảng đã có. Tiền đề là điều này sẽ giúp tăng tốc độ dựng hình các bảng lớn. Tuy nhiên nó chỉ được thực hiện bởi Internet Explorer, và như của IE8 và lên, điều này chỉ được hỗ trợ trong IE7 Tiêu chuẩn chế độ và chế độ Quirks.

Bởi vì có một thuộc tính width (lỗi thời trong HTML5) nhiều người cho rằng có một thuộc tính chiều cao cho các bảng là tốt. Nhưng vì các bảng phù hợp với chiều rộng của nội dung hoặc chiều rộng được xác định trong thuộc tính CSS hoặc chiều rộng, chiều cao không thể bị hạn chế. Vì vậy, thay vào đó, các trình duyệt cho phép thuộc tính chiều cao xác định chiều cao tối thiểu của bảng. Nếu bảng cao hơn chiều cao đó, nó sẽ hiển thị cao hơn. Nhưng bạn nên sử dụng tài sản

Với thuộc tính chiều cao CSS, bạn có thể hạn chế chiều cao nếu bạn sử dụng thuộc tính CSS để xác định điều gì xảy ra với bất kỳ nội dung dư thừa nào.

Để đặt chiều cao tối thiểu trên một bảng, hãy viết:

style = "height: 30em;" >

Bảng này cao ít nhất 30 độ.

Hai thuộc tính và không gian được thêm vào xung quanh bên trái / phải (hspace) và trên cùng / dưới cùng (vspace) của bảng. Thay vào đó, bạn nên sử dụng thuộc tính kiểu.

Để đặt không gian dọc thành 20 pixel và không gian ngang thành 40 pixel, hãy viết:

style = "margin: 20px 40px;"

Bảng này có vspace 20 pixel và hspace 40 pixel.

Thuộc tính là một thuộc tính boolean xác định xem nội dung của bảng có nên được bao bọc ở cạnh của phần tử cha hoặc cửa sổ hoặc buộc cuộn ngang hay không. Thay vào đó, bạn nên định nghĩa các đặc tính gói của mỗi ô bảng bằng cách sử dụng thuộc tính CSS.

Để tạo một cột có nhiều văn bản không được bọc, hãy viết:



style = "white-space: nowrap;" > Đây là một cột có nhiều nội dung. Nhưng ngay cả khi nó rộng hơn vùng chứa thì văn bản không được quấn vào dòng tiếp theo mà thay vào đó buộc cửa sổ trình duyệt cuộn theo chiều ngang để xem tất cả nội dung.

Cuối cùng, thuộc tính xác định cách nội dung của mỗi ô nên căn chỉnh theo chiều dọc trong ô. Thay vì thuộc tính không hợp lệ này, bạn nên sử dụng thuộc tính CSS trên mỗi ô bạn muốn thay đổi căn chỉnh. Bạn sẽ không nhận thấy hiệu ứng của kiểu này trừ khi nội dung của ô nhỏ hơn khoảng trống có sẵn được tạo bởi các ô lớn hơn.

Để buộc một ô phải căn chỉnh về phía dưới (chứ không phải ở giữa, làm mặc định), hãy viết:



Ô này dài hơn phần còn lại và do đó sẽ buộc chiều cao cao hơn. Vì vậy, bạn sẽ thấy rằng ô được căn chỉnh theo chiều dọc được căn chỉnh ở dưới cùng.
style = "vertical-align: bottom;" > Nội dung ở dưới cùng.
Nội dung ở giữa.