ViệtBảng (table) là một công cụ mạnh mẽ để trình bày dữ liệu có cấu trúc trên trang web. Tuy nhiên, các bảng HTML mặc định thường có giao diện đơn giản và không đẹp mắt. CSS cung cấp nhiều công cụ mạnh mẽ để giúp bạn định dạng bảng một cách chuyên nghiệp và thân thiện với người dùng. Trong bài viết này, chúng ta sẽ học cách sử dụng CSS Tables để định dạng bảng trên trang web Codetuthub.com với đầy đủ ví dụ minh họa.
1. Cấu trúc cơ bản của table trong HTML
Trước khi đi vào chi tiết CSS, hãy cùng xem cấu trúc HTML cơ bản của một bảng:
Ví dụ:
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
</tbody>
</table>Trong ví dụ trên:
- Thẻ
<table>chứa bảng. <thead>chứa tiêu đề của bảng.<tbody>chứa các hàng dữ liệu của bảng.<tr>là một hàng trong bảng.<th>đại diện cho ô tiêu đề.<td>đại diện cho ô dữ liệu.
2. Các thuộc tính CSS cơ bản để định dạng table
2.1. border
Thuộc tính border dùng để tạo đường viền cho bảng. Bạn có thể áp dụng đường viền cho toàn bộ bảng, từng ô hoặc cả hai.
Ví dụ:
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
</tbody>
</table>Kết quả: Bảng sẽ có đường viền bao quanh từng ô và toàn bộ bảng.
2.2. border-collapse
Thuộc tính border-collapse xác định cách hiển thị đường viền của bảng:
collapse: Các đường viền sẽ được gộp lại thành một đường duy nhất (phổ biến nhất).separate: Các đường viền của bảng và các ô sẽ tách biệt.
Ví dụ:
<style>
table {
border-collapse: collapse;
}
</style>
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
</tbody>
</table>Kết quả: Đường viền của bảng sẽ gộp lại thành một đường duy nhất, giúp giao diện trở nên gọn gàng hơn.
2.3. padding
Thuộc tính padding điều chỉnh khoảng cách giữa nội dung của ô và đường viền của ô. Điều này giúp nội dung của ô không bị dính vào các cạnh.
Ví dụ:
<style>
th, td {
padding: 10px;
}
</style>
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
</tbody>
</table>Kết quả: Nội dung trong các ô sẽ có khoảng cách với đường viền, giúp bảng trông thoáng hơn.
2.4. text-align
Thuộc tính text-align giúp căn chỉnh văn bản trong các ô bảng. Bạn có thể căn trái (left), phải (right), hoặc giữa (center).
Ví dụ:
<style>
th {
text-align: center;
}
td {
text-align: left;
}
</style>
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
</tbody>
</table>Kết quả: Tiêu đề bảng sẽ được căn giữa, trong khi dữ liệu được căn trái.
2.5. width
Bạn có thể đặt chiều rộng cho bảng hoặc từng cột. Giá trị có thể là px, %, hoặc auto.
Ví dụ:
<style>
table {
width: 100%;
}
th, td {
width: 33%;
}
</style>
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
</tbody>
</table>Kết quả: Bảng sẽ chiếm toàn bộ chiều rộng trang, và mỗi cột sẽ có độ rộng bằng nhau.
3. Định dạng table nâng cao
3.1. Tô màu xen kẽ cho các hàng
Việc tô màu xen kẽ giữa các hàng giúp bảng dễ đọc hơn, đặc biệt khi bảng chứa nhiều dữ liệu.
Ví dụ:
<style>
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
</style>
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
<tr>
<td>Nguyễn Văn C</td>
<td>28</td>
<td>Đà Nẵng</td>
</tr>
</tbody>
</table>Kết quả: Các hàng lẻ sẽ có màu nền nhạt hơn, giúp bảng dễ đọc hơn.
3.2. Tô màu khi hover qua hàng
Bạn có thể thêm hiệu ứng khi người dùng di chuột qua từng hàng để giúp bảng trở nên tương tác và nổi bật hơn.
Ví dụ:
<style>
tbody tr:hover {
background-color: #ddd;
}
</style>
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
<tr>
<td>Nguyễn Văn C</td>
<td>28</td>
<td>Đà Nẵng</td>
</tr>
</tbody>
</table>Kết quả: Khi người dùng di chuột qua từng hàng, màu nền sẽ thay đổi để làm nổi bật hàng đó.
4. Tạo table có tiêu đề cố định
Nếu bảng có quá nhiều dữ liệu và bạn muốn tiêu đề của bảng cố định khi cuộn, bạn có thể sử dụng CSS để đạt được điều này.
Ví dụ:
<style>
table {
width: 100%;
border-collapse: collapse;
}
thead {
position: sticky;
top: 0;
background-color: #fff;
z-index: 1;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
tbody {
height: 150px;
overflow-y: auto;
display: block;
}
</style>
<div class="table-container">
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>30</td>
<td>TP HCM</td>
</tr>
<!-- Thêm nhiều hàng khác -->
</tbody>
</table>
</div>Kết quả: Khi cuộn qua bảng với nhiều hàng, tiêu đề bảng sẽ cố định ở trên cùng.
5. Table Responsive
Vui lòng xem thêm ở bài viết này: Cách tạo table responsive trong CSS
6. Kết luận
CSS Tables giúp bạn biến những bảng dữ liệu đơn giản thành các bảng đẹp mắt, dễ đọc và dễ sử dụng hơn. Bằng cách sử dụng các thuộc tính như border, padding, text-align, và các hiệu ứng nâng cao như màu nền xen kẽ hay hover, bạn có thể tùy chỉnh bảng của mình để phù hợp với thiết kế tổng thể của trang web. Hãy áp dụng các ví dụ và kỹ thuật này vào trang web Codetuthub.com để tạo ra các bảng dữ liệu chuyên nghiệp và trực quan hơn.
