Bảng Trong CSS

Có thể bạn quan tâm

CSS cơ bản
Giới thiệu CSS
CSS là gì ?
Cú pháp CSS
Include CSS vào HTML
Đơn vị
Màu (Color)
Background
Định dạng Font
Định dạng Text
Hình ảnh
Trang trí Link
Bảng
Đường viền (Border)
Căn lề (Margin)
List và Marker
Padding
Con trỏ (Cursor)
Outline
Kích thước
Scrollbar

CSS nâng cao
Visibility
Căn chỉnh vị trí
Layer (Thuộc tính z-index)
Giới thiệu Pseudo Class
Phần tử giả (Pseudo Element)
Qui tắc @
Media Type
Qui tắc @page
Định dạng trước khi in
Thiết lập Layout
Validation

Học CSS3 cơ bản
Giới thiệu CSS3
Rounded Corner
Thuộc tính Border Image
Multi Background
Màu trong CSS3
Gradient là gì ?
Tạo Shadow
Tạo hiệu ứng cho Text
Web Font
2D Transform
3D Transform
Hiệu ứng (Animation)
Chia cột (Multi Column)
User Interface
Thuộc tính box-sizing

Khái niệm CSS Responsive
CSS Responsive là gì ?

Tra cứu nhanh CSS
Tổng hợp tất cả Thuộc tính
Danh sách tên màu
Web Safe Font
Tổng hợp các Hiệu ứng

CSS Tool
Chuyển đổi PX sang EM

Bảng trong CSS Trang trước Trang sau

Bảng là một công cụ hiển thị dữ liệu rõ ràng và hiệu quả. Mặc dù với các công nghệ mới (như Kendo UI), thì việc hiển thị dữ liệu bằng các thẻ div thường được sử dụng hơn. Tuy nhiên, với các ứng dụng Webpage nhỏ và với lượng dữ liệu hiển thị là không lớn thì sử dụng bảng là khá tiện lợi. Chương này sẽ trình bày cách sử dụng các thuộc tính khác nhau trong CSS để làm cho bảng của bạn đẹp hơn.

Dưới đây là một số thuộc tính trong CSS:

Thuộc tính border được sử dụng để thiết lập đường viền cho bảng.
Thuộc tính border-collapse xác định rằng các đường viền của bảng nên được vào hợp thành một đường viền.
Thuộc tính caption-side được sử dụng trong phần tử <caption>. Theo mặc định, chúng sẽ được hiển thị ở phần bên trên của bảng. Sử dụng thuộc tính này, bạn có thể xác định vị trí hiển thị của phần tử caption này.
Thuộc tính empty-cells xác định xem có hiển thị đường viền không nếu một ô là trống.
Thuộc tính table-layout cho phép bạn thiết lập layout cho bảng.

Thuộc tính border-collapse trong CSS

Thuộc tính này có hai giá trị collapse và separate tương ứng với các đường viền nên được kết hợp với nhau hoặc phân biệt riêng rẽ. Ví dụ:

<html> <head> <style type="text/css"> table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; } td.b { border-style:solid; border-width:3px; border-color:#333333; padding:10px; } </style> </head> <body> <table class="one"> <caption>Vi du gia tri collapse</caption> <tr><td class="a"> Cell A</td></tr> <tr><td class="b"> Cell B</td></tr> </table> <br /> <table class="two"> <caption>Vi du gia tri separate</caption> <tr><td class="a"> Cell A</td></tr> <tr><td class="b"> Cell B</td></tr> </table> </body> </html>

Kết quả là:

Quảng cáo

Độ rộng và chiều cao bảng trong CSS

Để xác định độ rộng và chiều cao cho bảng, bạn sử dụng hai thuộc tính width và height trong CSS. Hai thuộc tính này có thể nhận các giá trị là % hoặc px.

Ví dụ

table { width: 100%; } th { height: 50px; }

Căn chỉnh bảng trong CSS

Căn chỉnh bảng theo chiều ngang trong CSS

Bạn sử dụng thuộc tính text-align để xác định sự căn chỉnh nội dung theo chiều ngang của bảng. Thuộc tính này có thể nhận các giá trị left, right hoặc center. Ví dụ:

th { text-align: left; }

Căn chỉnh bảng theo chiều dọc trong CSS

Để căn chỉnh bảng theo chiều dọc, bạn sử dụng thuộc tính vertical-align có thể nhận các giá trị top, bottom, middle. Theo mặc định thì nội dung của bảng có căn chỉnh dọc với giá trị middle. Ví dụ:

td { height: 50px; vertical-align: bottom; }

Thuộc tính padding trong CSS

Để điều khiển khoảng cách giữa đường viền và nội dung của bảng, bạn sử dụng thuộc tính padding trong CSS. Giá trị có thể nhận của thuộc tính này là ở dưới dạng đơn vị px.

Ví dụ

th, td { padding: 15px; text-align: left; }

Thuộc tính border-spacing trong CSS

Thuộc tính border-spacing xác định khoảng cách giữa các đường viền của các ô trong bảng. Thuộc tính này có thể nhận một hoặc hai giá trị (có đơn vị là độ dài).

Nếu cung cấp một giá trị, thì giá trị này sẽ được áp dụng cho đường viền ngang và dọc. Nếu cung cấp hai giá trị, thì tương ứng theo thứ tự sẽ áp dụng cho đường viền ngang và đường viền dọc.

Ghi chú Thuộc tính này không làm việc trong Netscape 7 và IE6.

Sửa đổi ví dụ trên và xem kết quả:

<html> <head> <style type="text/css"> table.one { border-collapse:separate; width:400px; border-spacing:10px; } table.two { border-collapse:separate; width:400px; border-spacing:10px 50px; } </style> </head> <body> <table class="one" border="1"> <caption>Vi du gia tri separate va border-spacing</caption> <tr><td> Cell A </td></tr> <tr><td> Cell B </td></tr> </table> <br /> <table class="two" border="1"> <caption>Vi du gia tri separate va border-spacing</caption> <tr><td> Cell A </td></tr> <tr><td> Cell B </td></tr> </table> </body> </html>

Kết quả là:

Quảng cáo

Thuộc tính caption-side trong CSS

Theo mặc định, nội dung của thẻ khi được sử dụng trong bảng sẽ được hiển thị bên trên bảng. Tuy nhiên, để thay đổi vị trí này, bạn có thể sử dụng thuộc tính caption-side trong CSS.

Thuộc tính này có thể nhận một trong các giá trị: top, bottom, left, hoặc right. Dưới đây là ví dụ minh họa.

Ghi chú : Các thuộc tính này có thể không làm việc trong trình duyệt IE.

<html> <head> <style type="text/css"> caption.top {caption-side:top} caption.bottom {caption-side:bottom} caption.left {caption-side:left} caption.right {caption-side:right} </style> </head> <body> <table style="width:400px; border:1px solid black;"> <caption class="top"> Phan Caption nay se xuat hien o phan ben tren bang </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> <br /> <table style="width:400px; border:1px solid black;"> <caption class="bottom"> Phan Caption nay se xuat hien o phan ben duoi bang </caption> <tr><td > Cell A</td></tr> <tr><td > Cell B</td></tr> </table> </body> </html>

Kết quả là:

Thuộc tính empty-cells trong CSS

Để xác định xem có nên hiển thị đường viền cho một ô không có nội dung, bạn có thể sử dụng thuộc tính empty-cells trong CSS.

Thuộc tính này có thể nhận một trong các giá trị: show, hide hoặc inherit.

Dưới đây là ví dụ minh họa để ẩn đường viền với ô mà không có nội dung.

<html> <head> <style type="text/css"> table.empty{ width:350px; border-collapse:separate; empty-cells:hide; } td.empty{ padding:5px; border-style:solid; border-width:1px; border-color:#999999; } </style> </head> <body> <table class="empty"> <tr> <th></th> <th>Dau de cho cot</th> <th>Dau de cho cot</th> </tr> <tr> <th>Dau de cho hang</th> <td class="empty">Gia tri</td> <td class="empty">Gia tri</td> </tr> <tr> <th>Dau de cho hang</th> <td class="empty">Gia tri</td> <td class="empty"></td> </tr> </table> </body> </html>

Kết quả là:

Thuộc tính table-layout trong CSS

Thuộc tính table-layout hỗ trợ bạn điều khiển cách mà trình duyệt nên tạo layout cho một bảng.

Thuộc tính này có thể nhận một trong ba giá trị: fixed, auto hoặc inherit.

Dưới đây là ví dụ minh họa sự khác nhau giữa các giá trị của thuộc tính table-layout này.

Ghi chú: Nhiều trình duyệt không hỗ trợ thuộc tính này.

<html> <head> <style type="text/css"> table.auto { table-layout: auto } table.fixed{ table-layout: fixed } </style> </head> <body> <table class="auto" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br /> <table class="fixed" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> </body> </html>

Kết quả là:

👉 Giải bài nhanh với AI Hay:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: