CSS tables được dùng để tạo kiểu cho bảng HTML giúp trình bày dữ liệu rõ ràng và có tổ chức.
- Thêm viền, khoảng cách và màu sắc để cải thiện thiết kế bảng.
- Tạo bảng responsive có thể điều chỉnh theo mọi kích thước màn hình.
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<lt;td>Data 4</td>
</tr>
</table>
</body>
</html>
- Đoạn code này định nghĩa một bảng có hai cột, ba hàng và một hàng tiêu đề.
- Các kiểu CSS áp dụng viền, padding và màu nền để cải thiện giao diện của bảng.
CSS Table Properties
. Border
Thuộc tính border xác định hình thức của viền xung quanh các phần tử bảng.
Ví dụ: table, tr, td, th. Nó chỉ định chiều rộng, kiểu và màu sắc của viền.
Syntax:
border: table_width table_color;HTML
<html>
<head>
<style>
table,
th,
td {
border: 1.5px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Roll No.</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>
</html>
- Đoạn code HTML này tạo một bảng với hai cột "Roll No." và "Name".
- Bảng này còn có hai hàng dữ liệu. Các kiểu CSS áp dụng viền màu xanh lam liền nét 1.5px cho bảng.
- Viền này áp dụng cho table headers (<th>) và ô dữ liệu (<td>).
. Border Collapse
Thuộc tính border-collapse kiểm soát việc các viền của các ô liền kề được hợp nhất hay tách rời.
Syntax:
border-collapse: collapse/separate;HTML
<html>
<head>
<style>
table.one {
border-collapse: collapse;
}
table.two {
border-collapse: separate;
}
table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>
<body>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<h2>borders separated:</h2>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>
</html>
- Bảng đầu tiên sử dụng border-collapse: collapse;, để viền hợp nhất thành một đường duy nhất.
- Bảng thứ hai sử dụng border-collapse: separate;, giữ cho các viền riêng biệt và cách nhau.
. Border Spacing
Border Spacing chỉ định khoảng cách giữa các viền của các ô liền kề.
Thuộc tính này chỉ có tác dụng khi thuộc tính border-collapse được đặt thành separate.
Syntax:
border-spacing: value;HTML
<html>
<head>
<style>
table.one {
border-collapse: separate;
border-spacing: 10px;
}
table.two {
border-collapse: separate;
border-spacing: 10px 30px;
}
table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>
<body>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>
</html>
- Bảng đầu tiên dùng border-spacing: 10px;, thêm khoảng cách 10px giữa tất cả các ô.
- Bảng thứ hai dùng border-spacing: 10px 30px;, thêm 10px chiều ngang, 30px chiều dọc giữa các ô.
. Caption Side
Caption Side xác định vị trí của chú thích bảng so với bảng.
Syntax:
caption-side: top/bottom;
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: green;
}
table.one {
border-collapse: separate;
border-spacing: 10px;
caption-side: top;
}
table.two {
border-collapse: separate;
border-spacing: 10px;
caption-side: bottom;
}
table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>
<body>
<table class="one">
<caption>Caption at the top of the table.</caption>
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<table class="two">
<caption> Caption at the bottom of the table </caption>
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>
</html>
- Bảng đầu tiên sử dụng caption-side: top;, đặt chú thích phía trên bảng.
- Bảng thứ hai sử dụng caption-side: bottom;, đặt chú thích phía dưới bảng.
. Empty cells
Empty cells xác định có hiển thị viền và nền trên các ô trống trong bảng hay không.
Syntax:
empty-cells:show/hide;
<html>
<head>
<style>
table.one {
border-collapse: separate;
border-spacing: 10px;
empty-cells: hide;
}
table.two {
border-collapse: separate;
border-spacing: 10px;
empty-cells: show;
}
table,
td,
th {
border: 1.5px solid blue;
}
</style>
</head>
<body>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>
</html>
- Bảng đầu tiên dùng empty-cells: hide;, ẩn viền và nền của ô trống, làm cho chúng không hiển thị.
- Bảng thứ hai dùng empty-cells: show;, đảm bảo ô trống hiển thị với viền và nền.
. Table layout
Thuộc tính Table layout dùng để thiết lập thuật toán layout cho bảng.
Syntax:
table-layout:auto/fixed;
<html>
<head>
<style>
table.one {
width: 80px border-collapse: separate;
border-spacing: 10px;
table-layout: auto;
}
table.two {
width: 80px border-collapse: separate;
border-spacing: 10px;
table-layout: fixed;
}
table,
td,
th {
border: 1.5px solid blue;
width: 80px;
}
</style>
</head>
<body>
<table class="one">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
<br>
<br>
<table class="two">
<tr>
<th>Roll Number</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</td>
</tr>
<tr>
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>
</html>
- Bảng đầu tiên sử dụng table-layout: auto;, điều chỉnh độ rộng cột động dựa trên kích thước nội dung.
- Bảng thứ hai sử dụng table-layout: fixed;, cố định độ rộng cột và bỏ qua kích thước nội dung.
Best Practices for Using CSS with Tables
- Use border-collapse Property: Áp dụng border-collapse: collapse; để hợp nhất viền bảng tạo giao diện gọn gàng hơn.
- Ensure Responsive Design: Triển khai kỹ thuật responsive design để làm cho bảng thích ứng nhiều kích cỡ màn hình.
- Việc này giúp nâng cao trải nghiệm người dùng trên các thiết bị.
- Utilize Semantic HTML Elements: Sử dụng các phần tử HTML như <thead>, <tbody> và <tfoot> để cấu trúc nội dung bảng.
- Cách làm này giúp cải thiện khả năng truy cập và bảo trì.