Table trong HTML
Bảng là một phần nội dung khá phổ biến trên các trang web. Sử dụng bảng giúp cho bố cục trang web đẹp hơn, nội dung hiển thị trực quan và dễ theo dõi hơn cho người dùng.
Vậy để tạo bảng trong HTML thì cần những gì? Nó có phức tạp không? Muốn thêm màu cho đường viền bảng, thêm màu nền cho chữ trong bảng thì làm như thế nào? Trong bài viết này Quantrimang.com sẽ trả lời những câu hỏi đó và hướng dẫn bạn những thao tác cơ bản với bảng trên HTML, ngoài ra còn "khuyến mại" thêm cách tô màu xen kẽ cho các hàng trong bảng HTML. Mời các bạn cùng theo dõi.
Định nghĩa bảng trong HTML
Bảng HTML được định nghĩa bằng thẻ <table>
. Mỗi hàng được định nghĩa bằng thẻ <tr>
, tiêu đề định nghĩa bằng <th>
. Mặc định tiêu đề sẽ in đậm và nằm ở chính giữa. Ô trong bảng định nghĩa bằng thẻ <td>
.
<table style="width:100%">
<tr>
<th>Tên</th>
<th>Họ</th>
<th>Tuổi</th>
</tr>
<tr>
<td>Lan</td>
<td>Nguyễn</td>
<td>20</td>
</tr>
<tr>
<td>Hoa</td>
<td>Phan</td>
<td>24</td>
</tr>
</table>
Tên | Họ | Tuổi |
---|---|---|
Lan | Nguyễn | 20 |
Hoa | Phan | 24 |
Lưu ý: Phần tử <td> là nơi chứa dữ liệu của bảng. Chúng có thể gồm tất cả các phần tử của HTML như văn bản, hình ảnh, danh sách, bảng khác…
Thêm viền cho bảng HTML
Nếu không chỉ định trước, bảng sẽ không có đường viền. Viền của bảng được xác định bằng đặc tính border
của CSS.
table, th, td {
border: 1px solid black;
}
Hãy nhớ định nghĩa viền cho cả bảng và các ô trong bảng.
Border Collapse
Nếu muốn khoảng trống giữa các đường viền bị loại bỏ, dùng đặc tính CSS:
border-collapse.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Cell Padding
Cell Padding dùng để xác định khoảng cách giữa nội dung trong ô tới đường viền. Nếu không chỉ định, ô tới đường viền sẽ không có khoảng trống nào. Để đặt khoảng cách này, dùng đặc tính CSS padding.
th, td {
padding: 15px;
}
Tiêu đề căn trái
Mặc định tiêu đề bảng sẽ được in đậm và nằm chính giữa. Để căn trái, dùng đặc tính CSS:
text-align.
th {
text-align: left;
}
Border Spacing
Border Spacing xác định khoảng cách giữa các ô trong bảng, dùng đặc tính CSS border-spacing
để xác định.
table {
border-spacing: 5px;
}
Lưu ý: Nếu bảng dùng border-collapse
thì border-spacing
sẽ không có tác dụng.
Ô trải dài trên nhiều cột
Để làm một ô kéo dài trên nhiều cột, dùng thuộc tính colspan.
<table style="width:100%">
<tr>
<th>Tên</th>
<th colspan="2">Điện thoại</th>
</tr>
<tr>
<td>Vũ An</td>
<td>123456789</td>
<td>123456788</td>
</tr>
</table>
Ô trải dài trên nhiều hàng
Để làm một ô kéo dài trên nhiều cột, dùng thuộc tính rowspan.
<table style="width:100%">
<tr>
<th>Tên:</th>
<td>La La</td>
</tr>
<tr>
<th rowspan="2">Điện thoại:</th>
<td>987654321</td>
</tr>
<tr>
<td>987654322</td>
</tr>
</table>
Thêm mô tả cho bảng
Để thêm mô tả cho bảng, sử dụng thẻ <caption>
<table style="width:100%">
<caption>Tiền tiết kiệm hàng tháng</caption>
<tr>
<th>Tháng</th>
<th>Số tiền</th>
</tr>
<tr>
<td>Sáu</td>
<td>$120</td>
</tr>
<tr>
<td>Bảy</td>
<td>$150</td>
</tr>
</table>
Lưu ý: Thẻ <caption>
phải được đặt ngay sau thẻ <table>.
Thêm kiểu cách đặc biệt cho bảng
Để thêm kiểu cách cho bảng, dùng thuộc tính id.
<table id="t01">
<tr>
<th>Tên</th>
<th>Họ</th>
<th>Tuổi</th>
</tr>
<tr>
<td>Lan</td>
<td>Phan</td>
<td>24</td>
</tr>
<tr>
<td>Hoa</td>
<td>Phạm</td>
<td>25</td>
</tr>
</table>
Bây giờ định nghĩa kiểu cách này.
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Bổ sung thêm các kiểu cách khác:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Với code trên, những hàng chẵn sẽ có màu nền #eee, hàng số lẻ sẽ có màu nền #fff, màu nền tiêu đề là black.
Bài trước: Hình ảnh trong HTML
Bài sau: Danh sách trong HTML
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
TeraBox
-
Cách tắt kiểm tra chính tả trong Word
Hôm qua 1 -
Code Tiểu Yêu Tầm Đạo mới nhất
Hôm qua -
PING là gì? Test PING như thế nào?
Hôm qua -
Cách ẩn, hiện ghi chú trong bảng trên Excel
Hôm qua -
Cách thiết lập các ảnh nền khác nhau trên mỗi màn hình Windows 10/11
Hôm qua -
Điểm ưu tiên, điểm khuyến khích, khu vực ưu tiên khi xét tuyển năm 2022
Hôm qua -
Gét gô là gì? Thử thách 6 ngày 6 đêm là gì?
Hôm qua 6 -
Cách gỡ huy hiệu Threads khỏi trang cá nhân Instagram
Hôm qua -
DRAM và DRAM-less SSD có gì khác nhau?
Hôm qua