Table 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. Cùng eLib.VN tìm hiểu về table trong bài viết dưới đây nhé!
Mục lục nội dung
1. Table trong CSS
Trong lập trình web, bạn có thể sẽ cần tạo rất nhiều bảng để lưu trữ, hiển thị thông tin một cách khoa học.
Các bảng (table) thường được sử dụng để hiển thị dữ liệu, chẳng hạn như báo cáo tài chính, thống kê, kế toán…
Nhưng khi bạn tạo một bảng HTML mà không có được CSS hoặc thêm thuộc tính nào, trình duyệt sẽ hiển thị chúng mà không có bất kỳ đường viền nào.
Thế nên bạn cần phải thực hiện CSS cho bảng để mang lại trả nghiệm tốt hơn.
-
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.
2. 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à:
3. Độ 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;
}
4. 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;
}
5. 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;
}
6. 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.
<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à:
7. 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à:
8. 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.
<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à:
9. 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.
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à:
Trên đây là bài viết của eLib.VN về Table trong CSS. Hi vọng bài viết có ích cho quá trình học CSS, cũng như học lập trình web của bạn.
Như vậy là chúng ta đã hoàn thành nội dung "CSS Design". Để củng cố và nắm vững nội dung đã học, mời bạn cùng thử sức với "Bộ Câu hỏi Trắc Nghiệm CSS có đáp án chi tiết"
Tham khảo thêm
- doc Layout trong CSS
