Bảng biểu 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="awidth: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>               

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="awidth: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="awidth: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="awidth: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 {
  awidth: 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