Thẻ table trong HTML
Trần Thị Vân - 1938
- 20/02/2025
Chức năng của Thẻ table trong HTML
Thẻ table trong HTML dùng để trình bày dữ liệu theo dạng bảng, nó dùng cột và hàng để tổ chức các dữ liệu có cấu trúc thuộc tính giống nhau, nó giúp chúng ta dễ dàng quản lý dữ liệu một cách thuận tiện.
Các thành phần, thuộc tính có trong table
Thành phần:
table: Thẻ khai báo
tr: Hàng
td: Cột
th: Tiêu đề của bảng, cũng là cột mà là cột của tiêu đề.
thead: Chứa phần tiêu đề của table.
tbody: Chứa nội dung của bảng.
tfoot: Tạo nội dung chân trang của bảng.
caption: Tạo chú thích cho bảng.
Thuộc tính:
colspan: Nhóm các cột lại.
rowspan: Nhóm các hàng lại.
Các ví dụ về Thẻ table trong HTML
table có đầy đủ các thành phần chính
<!DOCTYPE html>
<html>
<head>
<title>table có đầy đủ các thành phần chính</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
<caption> Bảng Lương</caption>
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Lương</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bùi Tấn Lực</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị Vân</td>
<td>25.000.000VNĐ</td>
</tr>
<tr>
<td>3</td>
<td>Nguyễn Thùy Dung</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>4</td>
<td>Trần Ngọc Thanh</td>
<td>20.000.000VNĐ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan= "2">Tổng Lương</th>
<td>85.000.000VNĐ</td>
</tr>
</tfoot>
</table>
</body>
</html>
| STT | Họ Tên | Lương |
|---|---|---|
| 1 | Bùi Tấn Lực | 20.000.000VNĐ |
| 2 | Trần Thị Vân | 25.000.000VNĐ |
| 3 | Nguyễn Thùy Dung | 20.000.000VNĐ |
| 4 | Trần Ngọc Thanh | 20.000.000VNĐ |
| Tổng Lương | 85.000.000VNĐ | |
Rowspan (Nhóm hàng) trong table
<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử Rowspan (Nhóm hàng) trong table</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
<caption> Bảng điểm</caption>
<thead>
<tr>
<th>Tên</th>
<th>Môn</th>
<th>Điểm</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Bùi Tấn Lực</td>
<td>Toán</td>
<td>9.5</td>
</tr>
<tr>
<td>Văn</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">Trần Thị Vân</td>
<td>Toán</td>
<td>9</td>
</tr>
<tr>
<td>Văn</td>
<td>9</td>
</tr>
</tbody>
</table>
</body>
</html>
| Tên | Môn | Điểm |
|---|---|---|
| Bùi Tấn Lực | Toán | 9.5 |
| Văn | 10 | |
| Trần Thị Vân | Toán | 9 |
| Văn | 9 |
table cơ bản trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử table cơ bản trong HTML</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Lương</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bùi Tấn Lực</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị Vân</td>
<td>25.000.000VNĐ</td>
</tr>
<tr>
<td>3</td>
<td>Nguyễn Thùy Dung</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>4</td>
<td>Trần Ngọc Thanh</td>
<td>20.000.000VNĐ</td>
</tr>
</tbody>
</table>
</body>
</html>
| STT | Họ Tên | Lương |
|---|---|---|
| 1 | Bùi Tấn Lực | 20.000.000VNĐ |
| 2 | Trần Thị Vân | 25.000.000VNĐ |
| 3 | Nguyễn Thùy Dung | 20.000.000VNĐ |
| 4 | Trần Ngọc Thanh | 20.000.000VNĐ |
Cách sử dụng thẻ table trong HTML hiệu quả
Thẻ table trong HTML không chỉ dùng để tạo bảng đơn giản mà còn giúp trình bày dữ liệu có cấu trúc rõ ràng, dễ theo dõi. Khi sử dụng đúng cách, bảng HTML sẽ hỗ trợ người dùng nhanh chóng so sánh thông tin và cải thiện trải nghiệm khi xem nội dung trên website.
Sử dụng table đúng mục đích khi hiển thị dữ liệu
Thẻ table nên được dùng cho những nội dung có tính chất đối chiếu, thống kê hoặc phân loại dữ liệu như bảng giá, danh sách sản phẩm, lịch trình, thông số kỹ thuật. Không nên sử dụng table để căn chỉnh bố cục trang web vì cách này khiến việc quản lý giao diện trở nên khó khăn và ảnh hưởng đến khả năng tối ưu website.
Một bảng HTML có cấu trúc tốt thường bao gồm hàng tiêu đề với th, các hàng dữ liệu với tr và các ô nội dung bằng td. Việc phân chia rõ ràng giúp trình duyệt hiểu được ý nghĩa của từng phần trong bảng.
<table>
<tr>
<th>Sản phẩm</th>
<th>Giá</th>
</tr>
<tr>
<td>Laptop</td>
<td>15 triệu</td>
</tr>
</table>
Kết hợp CSS để tạo bảng HTML dễ đọc hơn
Bảng HTML mặc định thường có giao diện đơn giản, vì vậy nên kết hợp CSS để cải thiện khả năng hiển thị. Các thuộc tính như đường viền, khoảng cách ô, màu nền hoặc hiệu ứng khi di chuột giúp bảng trở nên trực quan và chuyên nghiệp hơn.
Khi thiết kế bảng, cần chú ý đến sự cân đối giữa kích thước chữ, độ rộng cột và khoảng trắng bên trong ô. Một bảng quá nhiều chi tiết hoặc thiếu khoảng cách sẽ khiến người đọc khó tiếp nhận thông tin.
Tối ưu table HTML trên thiết bị di động
Trên màn hình nhỏ như điện thoại, bảng có nhiều cột dễ bị tràn ra ngoài khung hiển thị. Vì vậy, cần có giải pháp giúp người dùng xem dữ liệu thuận tiện hơn mà không làm mất cấu trúc ban đầu của bảng.
Một số phương pháp thường được áp dụng là giới hạn số lượng cột không cần thiết, rút gọn nội dung trong ô hoặc sử dụng cách hiển thị cuộn ngang bằng CSS. Điều này giúp bảng vẫn giữ được đầy đủ thông tin nhưng phù hợp với nhiều kích thước màn hình.
Ngoài yếu tố giao diện, việc tối ưu table còn giúp website thân thiện hơn với người dùng và hỗ trợ công cụ tìm kiếm hiểu rõ nội dung dữ liệu được trình bày.
Lời Kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ table trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
