Bài 16: Bảng trong HTML
Ví dụ về bảng trong HTML
| Thứ tự | Tên | Họ | Điểm |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Định nghĩa về bảng trong HTML
Ví dụ 1:
<table style=“width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Giải thích ví dụ:
Bảng được định nghĩa bởi thẻ <table> .
Bảng được chia thành nhiều hàng, mỗi hàng được xác định bởi thẻ <tr>.
Các dữ liệu trong mỗi hàng của bảng được xác định bởi thẻ<td>.
Mỗi hàng của bảng cũng có thể được chia thành các tiêu đề của bảng bằng cách dùng thẻ <th>.
 |
Thẻ <td> là nơi 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ử của HTML như văn bản, hình ảnh, danh sách, các bảng khác,… |
|---|
Thuộc tính Border với bảng trong HTML
Nếu bạn không xác định một đường viền cho bảng, nó sẽ được hiển thị mặc định không có đường viền.
Một đường viền có thể được thêm bằng cách sử dụng thuộc tính border:
Ví dụ 2:
<table border=“1” style=“width:100%”>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
|
Thuộc tính border sử dụng kiểu đường chuẩn của HTML! Sẽ tốt hơn nếu sử dụng với CSS. |
|---|
Thêm borders, sử dụng thuộc tính border của CSS:
Luôn ghi nhớ việc đặt đường viền cho các bảng và các ô trong bảng.
Bảng trong HTML với Collapsed Borders
Nếu bạn muốn thu nhỏ các đường viền vào thành một, Hãy thêm border-collapse trong CSS:
Bảng trong HTML với Cell Padding
Cell padding xác định khoảng trống ở giữa nội dung các ô trong bảng và đường viền xung quanh nó.
Nếu bạn không xác định padding, các ô của bảng sẽ hiển thị không có khoảng trống.
Để tạo khoảng trống, sử dụng thuộc tính padding trong CSS:
Ví dụ 5:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
Tiêu đề của bảng trong HTML
Tiêu đề của bảng được xác định bởi thẻ<th>
Mặc định, tất cả các trình duyệt đều hiển thị tiêu đề của bảng là chữ in đậm và ở giữa ô.
Ví dụ 6:
<table style=“width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Để tiêu đề của bảng nằm về phía bên trái, sử dụng thuộc tính text-align trong CSS:
Bảng trong HTML với Border Spacing
Border spacing xác định khoảng trống giữa các ô trong bảng.
Để thiết lập khoảng trống xung quanh cho một bảng, sử dụng thuộc tính border-spacing trong CSS:
|
Nếu bảng không có đường viền, thì border-spacing không có tác dụng |
|---|
Các ô trong bảng đươc chia thành nhiều cột
Để một ô trong bảng có thể chia nhiều hơn một cột, sử dụng thuộc tính colspan:
Ví dụ 9:
<table style=“width:100%”>
<tr>
<th>Name</th>
<th colspan=“2”>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Các ô trong bảng được chia thành nhiều hàng
Để các ô trong bảng có thể chia nhiều hơn 1 hàng, sử dụng thuộc tính rowspan:
Ví dụ 10:
<table style=“width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=“2”>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Lời chú thích với bảng trong HTML
Để thêm chú thích cho bảng, sử dụng thẻ <caption>:
Ví dụ 11:
<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>
|
Thẻ <caption> phải được chèn vào ngay sau thẻ <table>. |
|---|
Định kiểu đặc biệt cho một bảng
Để định một kiểu đặc biệt cho một bảng, ta thêm thuộc tính id cho bảng:
Ví dụ 12:
<table id=“t01”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Bây giờ bạn có thể tạo kiểu đặc biệt cho bảng này:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Và thêm nhiều kiểu đặc biệt hơn cho các hàng dữ liệu và hàng tiêu đề:
Ví dụ 13:
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óm tắt bài học
- Trong HTML sử dụng thẻ <table> để tạo một bảng
- Trong HTML sử dụng thẻ <tr> để tạo một hàng của một bảng
- Trong HTML sử dụng thẻ <td> để tạo dữ liệu cho một bảng
- Trong HTML sử dụng thẻ <th> để tạo tiêu đề cho bảng
- Trong HTML sử dụng thẻ <caption> để tạo chú thích cho bảng
- Trong CSS sử dụng thuộc tính border để tạo đường viền
- Trong CSS sử dụng thuộc tính border-collapse để thu nhỏ đường viền của các ô
- Trong CSS sử dụng thuộc tính padding để thêm khoảng trống trong các ô
- Trong CSS sử dụng thuộc tính text-align để căn lề văn bản
- Trong CSS sử dụng thuộc tính border-spacing để thiết lập khoảng trắng giữa các ô
- Sử dụng thuộc tính colspan để chia một ô thành nhiều cột
- Sử dụng thuộc tính rowspan để chia một ô thành nhiều hàng
- Sử dụng thuộc tính id để xác định duy nhất một bảng
Các thẻ cho bảng trong HTML
| Thẻ | Mô tả |
|---|---|
| <table> | Xác định một bảng |
| <th> | Xác định tiêu đề cho các ô trong bảng |
| <tr> | Xác định hàng trong bảng |
| <td> | Xác định cột trong bảng |
| <caption> | Xác định chú thích cho bảng |
| <colgroup> | Xác định nhóm của một hoặc nhiều cột trong một bảng để định dạng |
| <col> | Xác định thuộc tính column cho mỗi cột bằng phần tử <colgroup> |
| <thead> | Nhóm nội dung các header trong một bảng |
| <tbody> | Nhóm nội dung các body trong một bảng |
| <tfoot> | Nhóm nội dung các footer trong một bảng |
