Bảng HTML

Bạn có thể tạo bảng bằng HTML.

Ví dụ

Bảng
Ví dụ này演示 cách tạo bảng trong tài liệu HTML.
Viền bảng
Ví dụ này演示 các loại viền bảng khác nhau.

(Bạn có thể tìm thấy nhiều ví dụ khác ở cuối trang này)

Bảng

Bảng được định nghĩa bằng thẻ <table>. Mỗi bảng đều có nhiều dòng (định nghĩa bằng thẻ <tr>), mỗi dòng được chia thành nhiều cell (định nghĩa bằng thẻ <td>). Ký tự td chỉ dữ liệu bảng (table data), tức là nội dung của cell dữ liệu. Cell dữ liệu có thể chứa văn bản, hình ảnh, danh sách, đoạn văn, biểu mẫu, đường thẳng ngang, bảng, v.v.

<table border="1">
<tr>
<td>dòng 1, cell 1</td>
<td>dòng 1, cell 2</td>
</tr>
<tr>
<td>dòng 2, cell 1</td>
<td>dòng 2, cell 2</td>
</tr>
</table>

Hiển thị trong trình duyệt như sau:

dòng 1, cell 1 dòng 1, cell 2
dòng 2, cell 1 dòng 2, cell 2

Bảng và thuộc tính viền

Nếu không định nghĩa thuộc tính viền, bảng sẽ không hiển thị viền. Điều này có thể rất hữu ích, nhưng hầu hết các trường hợp, chúng ta muốn hiển thị viền.

Sử dụng thuộc tính viền để hiển thị bảng có viền:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Tiêu đề bảng

Tiêu đề bảng của bảng được định nghĩa bằng thẻ <th>.

Hầu hết các trình duyệt sẽ hiển thị tiêu đề bảng là văn bản in đậm và居 giữa:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>dòng 1, cell 1</td>
<td>dòng 1, cell 2</td>
</tr>
<tr>
<td>dòng 2, cell 1</td>
<td>dòng 2, cell 2</td>
</tr>
</table>

Hiển thị trong trình duyệt như sau:

Heading Another Heading
dòng 1, cell 1 dòng 1, cell 2
dòng 2, cell 1 dòng 2, cell 2

单元格 trong bảng trống

Trong một số trình duyệt, cell không có nội dung hiển thị không tốt. Nếu một cell là trống (không có nội dung), trình duyệt có thể không hiển thị viền của cell đó.

<table border="1">
<tr>
<td>dòng 1, cell 1</td>
<td>dòng 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>dòng 2, cell 2</td>
</tr>
</table>

Trình duyệt có thể hiển thị như sau:

单元格 trong bảng trống

Lưu ý:Viền của cell trống này không được hiển thị. Để tránh trường hợp này, bạn có thể thêm một kí tự cách để hiển thị viền trong cell trống.

<table border="1">
<tr>
<td>dòng 1, cell 1</td>
<td>dòng 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>dòng 2, cell 2</td>
</tr>
</table>

Hiển thị trong trình duyệt như sau:

dòng 1, cell 1 dòng 1, cell 2
　 dòng 2, cell 2

Những ví dụ khác

Bảng không có viền
Ví dụ này minh họa một bảng không có viền.
Tiêu đề trong bảng
Ví dụ này minh họa cách hiển thị tiêu đề bảng.
Ô trống
Ví dụ này minh họa cách xử lý ô không có nội dung bằng " ".
Bảng có tiêu đề
Ví dụ này minh họa một bảng có tiêu đề (caption).
Ô bảng chéo hàng hoặc cột
Ví dụ này minh họa cách định nghĩa ô bảng chéo hàng hoặc cột.
Thẻ trong bảng
Ví dụ này minh họa cách hiển thị các yếu tố trong các yếu tố khác nhau.
Khoảng trống Cell padding
Ví dụ này minh họa cách sử dụng Cell padding để tạo khoảng trống giữa nội dung ô và viền.
Khoảng cách Cell spacing
Ví dụ này minh họa cách sử dụng Cell spacing để tăng khoảng cách giữa các ô.
Thêm nền màu hoặc hình ảnh nền cho bảng
Ví dụ này minh họa cách thêm nền cho bảng.
Thêm nền màu hoặc hình ảnh nền cho ô bảng
Ví dụ này minh họa cách thêm nền cho một hoặc nhiều ô bảng.
Sắp xếp nội dung trong ô bảng
Ví dụ này minh họa cách sử dụng thuộc tính "align" để sắp xếp nội dung của ô, tạo nên bảng đẹp.
Thuộc tính khung(frame)
Ví dụ này minh họa cách sử dụng thuộc tính "frame" để kiểm soát viền bao quanh bảng.

Thẻ bảng

Bảng Mô tả
<table> Định nghĩa bảng.
<caption> Định nghĩa tiêu đề bảng.
<th> Định nghĩa tiêu đề bảng của bảng.
<tr> Định nghĩa hàng của bảng.
<td> Định nghĩa ô bảng.
<thead> Định nghĩa tiêu đề bảng của bảng.
<tbody> Định nghĩa thân bảng của bảng.
<tfoot> Định nghĩa chân bảng của bảng.
<col> Định nghĩa thuộc tính cho cột bảng.
<colgroup> Định nghĩa nhóm cột bảng.