Bảng HTML
Bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành các hàng và cột.
Thí dụ
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Xác định một bảng HTML
Một bảng trong HTML bao gồm các ô bảng bên trong các hàng và cột
Thí dụ
Một bảng HTML đơn giản:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Ô bảng
Mỗi ô trong bảng được xác định bởi một
<td>và một </td>thẻ.
td
là viết tắt của dữ liệu bảng.
Mọi thứ giữa <td>và </td>là nội dung của ô trong bảng.
Thí dụ
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Lưu ý: các phần tử dữ liệu bảng là vùng 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 khác, v.v.
Hàng bảng
Mỗi hàng trong bảng bắt đầu bằng một
<tr>và kết thúc bằng một </tr>thẻ.
tr
là viết tắt của hàng trong bảng.
Thí dụ
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Bạn có thể có bao nhiêu hàng tùy thích trong bảng, chỉ cần đảm bảo rằng số ô trong mỗi hàng là như nhau.
Lưu ý: Đôi khi một hàng có thể có ít hơn hoặc nhiều ô hơn một hàng khác. Bạn sẽ tìm hiểu về điều đó trong chương sau.
Tiêu đề bảng
Đôi khi bạn muốn các ô của mình là tiêu đề, trong những trường hợp đó, hãy sử dụng
<th>thẻ thay vì
<td>thẻ:
Thí dụ
Đặt hàng đầu tiên là tiêu đề bảng:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Theo mặc định, văn bản trong <th>các phần tử được in đậm và căn giữa, nhưng bạn có thể thay đổi điều đó bằng CSS.
Bài tập HTML
Thẻ bảng HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .