Các bảng HTML mặc định trông khá bắt mắt—làm nổi bật chúng bằng một số hiệu ứng CSS đẹp mắt.
Thêm một bảng vào trang web của bạn là một cách hữu ích để trình bày một lượng lớn thông tin một cách rõ ràng. Các bảng cũng cung cấp cách sử dụng không gian hiệu quả và cho phép bạn đọc và so sánh dữ liệu phức tạp dễ dàng hơn.
Bạn có thể thiết kế các bảng để trông hấp dẫn hơn bằng cách sử dụng CSS. Làm như vậy cũng có thể nâng cao trải nghiệm người dùng tổng thể cho trang web của bạn.
Thiết kế hàng và cột đơn hiện đại
Bạn có thể thêm một thiết kế bảng đơn giản với các hàng và cột đơn lẻ và không có ô nào được hợp nhất. Tạo kiểu cho bảng cũng đảm bảo trang web của bạn hấp dẫn người dùng. Ngoài kiểu dáng bảng, còn có các hiệu ứng HTML thú vị khác và bố cục trang web hiển thị CSS mà bạn có thể thêm vào trang web của mình.
Bạn có thể xem mã cho bài tập này trong Kho lưu trữ GitHub.
- Trong tệp HTML mới, hãy thêm cấu trúc mã HTML cơ bản:
<!DOCTYPE html>
<html>
<head>
<title>My Simple Table</title>
</head>
<body>
</body>
</html> - Bên trong nội dung, thêm thẻ bảng:
<table>
</table> - Phần tử bảng HTML nên chứa hàng bàn thẻ cho mỗi hàng bên trong bảng. Hàng trên cùng thường được sử dụng cho các tiêu đề. Sử dụng tiêu đề bảng Các thẻ HTML để đại diện cho mỗi cột trong bảng:
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr> - Thêm nhiều hàng bên dưới hàng tiêu đề. Sử dụng bảng dữ liệu Các thẻ HTML để thêm dữ liệu vào từng ô trong bảng:
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
</tr> - Thêm thẻ kiểu bên trong thẻ đầu. Thêm một số kiểu dáng chung cho bảng, chẳng hạn như bóng đổ, góc bảng tròn, phông chữ và lề:
<style>
table {
border-collapse: collapse;
width: 100%;
color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
text-align: left;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
}
</style> - Tạo kiểu cho tiêu đề bảng để tạo màu nền và văn bản được căn chỉnh:
table th {
background-color: #ff9800;
color: #fff;
font-weight: bold;
padding: 10px;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
} - Tạo kiểu cho các hàng của bảng để xen kẽ giữa các màu xám và trắng và để thêm hiệu ứng khi di chuột qua hàng:
table tr:nth-child(even) td {
background-color: #f2f2f2;
}table tr:hover td {
background-color: #ffedcc;
} - Định kiểu dữ liệu bên trong các ô của bảng:
table td {
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ccc;
font-weight: bold;
} - Mở tệp HTML của bạn để xem bảng trong trình duyệt web:
Thiết kế bảng di động nhiều dòng
Một số bảng bao gồm các cột có hàng được hợp nhất để tạo thành một ô có nhiều dòng.
- Xóa tất cả các hàng của bảng hiện tại, chỉ giữ lại hàng trên cùng có tiêu đề:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</table> - Tạo một ô có nhiều dòng bằng thuộc tính rowspan. Thao tác này sẽ mở rộng ô đó trên số lượng hàng đã chỉ định.
<tr>
<td rowspan="2">Multi-line cell</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr> - Khi thêm một dòng nhiều ô khác với giá trị hàng khác, hãy thêm số tương ứng dãy bàn các thẻ HTML. Điều này là để phù hợp với chiều cao hoặc số hàng mà ô kéo dài. Ví dụ: nếu một ô có khoảng cách hàng là 3, bạn sẽ cần thêm ba hàng vào các cột khác để căn chỉnh bảng cho đúng.
<tr>
<td rowspan="3">Multi-line cell</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
</tr>
<tr>
<td>Row 5, Column 2</td>
<td>Row 5, Column 3</td>
</tr> - Mở tệp HTML của bạn để xem bảng trong trình duyệt web:
Thiết kế bảng hàng được hợp nhất
Tương tự như các ô có nhiều dòng, bảng cũng có thể có các hàng hợp nhất trên nhiều cột.
- Xóa tất cả các hàng của bảng hiện tại, chỉ giữ lại hàng trên cùng có tiêu đề:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</table> - Thêm nhiều hàng của bảng vào bảng. Sử dụng thuộc tính colspan để hợp nhất một trong các hàng trên 3 cột:
<tr>
<td style="background-color: #ffedcc" colspan="3">Q1</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
<td>Row 4, Column 3</td>
</tr> - Thêm một hàng đã hợp nhất khác để phân tách các phần của bảng:
<tr>
<td style="background-color: #ffedcc" colspan="3">Q2</td>
</tr>
<tr>
<td>Row 6, Column 1</td>
<td>Row 6, Column 2</td>
<td>Row 6, Column 3</td>
</tr>
<tr>
<td>Row 7, Column 1</td>
<td>Row 7, Column 2</td>
<td>Row 7, Column 3</td>
</tr>
<tr>
<td>Row 8, Column 1</td>
<td>Row 8, Column 2</td>
<td>Row 8, Column 3</td>
</tr> - Mở tệp HTML của bạn để xem bảng trong trình duyệt web:
Sử dụng các bảng hấp dẫn để tận dụng tối đa dữ liệu của bạn
Bảng HTML là một cách tuyệt vời để hiển thị dữ liệu có cấu trúc trên trang web của bạn. Bạn có thể tạo kiểu cho chúng bằng CSS để cải thiện giao diện mặc định. Tuy nhiên, hãy đảm bảo rằng bạn không bị cuốn theo và sử dụng các bảng để bố trí—vì lý do trợ năng, hãy giữ chúng nghiêm ngặt cho dữ liệu.
Các bảng lớn hơn có thể tốn nhiều công sức để tạo và cập nhật, đặc biệt nếu bạn sử dụng các cột và hàng kéo dài. Bạn có thể viết mã của riêng mình để tạo đánh dấu hoặc tận dụng các cú pháp thân thiện hơn như Markdown.