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
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/hoc-HTML-5-size-24x24-znd.png)
Cũ vẫn chất
-
Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua -
Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua -
Stt cho những đêm tâm trạng không ngủ được
Hôm qua -
Phần mở rộng file là gì?
Hôm qua -
Những câu stt hay tâm trạng về lặng nhìn cuộc sống
Hôm qua -
C++ Editor Online
Hôm qua -
Hướng dẫn thiết lập và quản lý FTP Server trên Windows 10
2 ngày -
Quay màn hình máy tính bằng OBS Studio, cách ghi màn hình laptop trên OBS
2 ngày -
Thủ thuật gỡ bỏ Microsoft Edge trên Windows 10
Hôm qua -
Cách quản lý mật khẩu đã lưu trên Microsoft Edge: Xem, xóa, sửa, xuất
Hôm qua