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><td> Bố cục các phần tử:

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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>

Thử nghiệm ngay

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

Thử nghiệm ngay

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ợ