HTML <table> nhãn
Định nghĩa và cách sử dụng
<table>
Thẻ được định nghĩa để biểu diễn bảng HTML.
Một bảng HTML được tạo bởi một <table>
phần tử và một hoặc nhiều <tr>、<th> và <td> Bố cục các phần tử:
- <tr> phần tử Định nghĩa hàng bảng
- <th> phần tử Định nghĩa tiêu đề bảng
- <td> phần tử Định nghĩa ô bảng
Bảng HTML có thể chứa các yếu tố sau:
Xin xem thêm:
Giáo trình HTML:Bảng HTML
Tài liệu tham khảo HTML DOM:Đối tượng Table
Giáo trình CSS:Đặt樣式 cho bảng
Mô hình
Ví dụ 1
Một bảng HTML đơn giản, chứa hai cột và hai hàng:
<table> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> </table>
Ví dụ 2
Làm thế nào để thêm cạnh gập cho bảng (sử dụng CSS):
<html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> <tr> <td>Tháng Hai</td> <td>¥4500</td> </tr> </table> </body> </html>
Ví dụ 3
Làm thế nào để canh phải bảng (sử dụng CSS):
<table style="float:right"> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> <tr> <td>Tháng Hai</td> <td>¥4500</td> </tr> </table>
Ví dụ 4
Làm thế nào để canh giữa bảng (sử dụng CSS):
<html> <head> <style> table, th, td { border: 1px solid black; } table.center { margin-left: auto; margin-right: auto; } </style> </head> <body> <table class="center"> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> <tr> <td>Tháng Hai</td> <td>¥4500</td> </tr> </table>
Ví dụ 5
Làm thế nào để thêm màu nền cho bảng (sử dụng CSS):
<table style="background-color:#00FF00"> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> <tr> <td>Tháng Hai</td> <td>¥4500</td> </tr> </table>
Ví dụ 6
Làm thế nào để thêm lề trong bảng (sử dụng CSS):
<html> <head> <style> table, th, td { border: 1px solid black; } th, td { padding: 10px; } </style> </head> <body> <table> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> <tr> <td>Tháng Hai</td> <td>¥4500</td> </tr> </table> </body> </html>
Ví dụ 7
Làm thế nào để thiết lập độ rộng bảng (sử dụng CSS):
<table style="width:400px"> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> <tr> <td>Tháng Hai</td> <td>¥4500</td> </tr> </table>
Ví dụ 8
Làm thế nào để tạo tiêu đề bảng:
<table> <tr> <th>Tên</th> <th>Điện thoại email</th> <th>Điện thoại</th> </tr> <tr> <td>Bill Gates</td> <td>bill.gates@example.com</td> <td>138-1234-5678</td> </tr> </table>
Ví dụ 9
Làm thế nào để tạo bảng có tiêu đề:
<table> <caption>Lưu trữ hàng tháng</caption> <tr> <th>Tháng</th> <th>Lưu trữ</th> </tr> <tr> <td>Tháng Một</td> <td>¥3400</td> </tr> <tr> <td>Tháng Hai</td> <td>¥4500</td> </tr> </table>
Ví dụ 10
Làm thế nào để định nghĩa các ô bảng đa hàng hoặc đa cột:
<table> <tr> <th>Tên</th> <th>Điện thoại email</th> <th colspan="2">Điện thoại</th> </tr> <tr> <td>Bill Gates</td> <td>bill.gates@example.com</td> <td>138-1234-5678</td> <td>186-2345-6789</td> </tr> </table>
Thuộc tính toàn cục
<table>
Nhãn còn hỗ trợ Thuộc tính toàn cục trong HTML.
Thuộc tính sự kiện
<table>
Nhãn còn hỗ trợ Thuộc tính sự kiện trong HTML.
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị các giá trị mặc định sau <table>
Thành phần:
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
Hỗ trợ trình duyệt
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ |