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
Trang 1Bảng trong CSS
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>
Trang 2Kế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)
Trang 3Nế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ẻ 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 ; >
Trang 4<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"
Trang 5width = "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à: