Định nghĩa bảng HTML

Bảng HTML được định nghĩa với thẻ <table>. Mỗi hàng của bảng được định nghĩa bằng thẻ <tr>. Tiêu đề bảng được định nghĩa bằng thẻ <th>. Mặc định các tiêu đề bảng được in đậm và căn giữa. Một bảng dữ liệu / ô được định nghĩa bằng thẻ <td>.

Ví dụ:

<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Lưu ý: Các phần tử <td> là các bộ chứa dữ liệu của bảng. Chúng có thể chứa tất cả các loại phần tử HTML; văn bản, hình ảnh, danh sách, các bảng biểu khác …

Bảng trong HTML – thêm Border

Nếu bạn không khai báo đường viền cho bảng, nó sẽ được hiển thị mà không có đường viền.

Thuộc tính border được thiết lập bằng cách sử dụng CSS:

table, th, td {
border: 1px solid black;
}

Bạn nên khai báo thuộc tính border cho cả bảng và các ô của bảng.

Bảng trong HTML – Collapsed Borders

Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không.

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Bảng trong HTML – thêm Padding cho ô

Thuộc tính padding cho ô xác định khoảng cách giữa nội dung trong ô và đường viền bao quanh. Nếu bạn không khai báo padding, các ô trong bảng sẽ hiển thị mà không có padding.

th, td {
padding: 15px;
}

Bảng trong HTML – căn trái tiêu đề

Mặc định các tiêu đề bảng được in đậm và căn giữa. Để căn trái tiêu đề của bảng, sử dụng thuộc tính text-align như sau:

th {
text-align: left;
}

Bảng trong HTML – thêm Border Spacing

Border Spacing xác định khoảng cách giữa các ô. Để đặt khoảng cách đường viền cho bảng, sử dụng thuộc tính border-spacing:

table {
border-spacing: 5px;
}

Lưu ý: nếu bảng sử dụng collapsed borders, thuộc tính border-spacing sẽ không có hiệu lực.

Bảng trong HTML – các ô mở rộng nhiều cột

Sử dụng thuộc tính colspan để tạo một ô dài hơn một cột:

<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

Bảng trong HTML – các ô được kéo dài nhiều hàng

Sử dụng thuộc tính rowspan để tạo một ô dài hơn một hàng:

<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

Bảng trong HTML – thêm chú thích

Sử dụng thẻ <caption> để thêm chú thích vào một bảng:

<table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

Lưu ý: Thẻ <caption> phải được chèn ngay sau thẻ <table>.

Định dạng đặc biệt cho bảng

Thêm một thuộc tính id để định nghĩa định dạng đặc biệt cho bảng:

<table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Và bạn có thể định nghĩa một định dạng đặc biệt cho bảng này:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}

Một số style khác có thể thêm vào:

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;
}

Tổng kết

• Sử dụng thẻ <table> để xác định một bảng
• Sử dụng thẻ <tr> để xác định một hàng của bảng
• Sử dụng thẻ <td> để xác định dữ liệu bảng
• Sử dụng thẻ <th> để xác định một tiêu đề bảng
• Sử dụng thẻ <caption> để xác định một chú thích bảng
• Sử dụng thuộc tính border để xác định đường viền
• Sử dụng thuộc tính border-collapse để thu gọn các đường viền của ô
• Sử dụng thuộc tính padding để thêm khoảng cách vào các ô
• Sử dụng thuộc tính text-align để căn chỉnh văn bản trong ô
• Sử dụng thuộc tính border-spacing để thiết lập khoảng cách giữa các ô
• Sử dụng thuộc tính colspan để tạo một ô dài nhiều cột
• Sử dụng thuộc tính rowspan để tạo một ô dài nhiều hàng
• Sử dụng thuộc tính id để xác định một bảng đặc biệt

Thẻ Table trong HTML