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 cho bảng:
- 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à:
Độ 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.
<style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px; 15px;} </style>
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à:
Thuộc tính caption-side trong CSS
Theo mặc định, nội dung của thẻ
<caption> 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à:
