Bảng - Table - HTML

Thẻ <table>

STT Tên Diện Tích
1 Hà Nội 3,329 km2
2 Đà Nẵng 1,285 km2
3 Tp.Hồ Chí Minh 2,096 km2

Để tạo bảng trong HTML chúng ta sử dụng thẻ <table>.

<table>
...
</table>

Mỗi bảng HTML bao gồm hai phần chính là tiêu đề của bảngnội dung của bảng.

Tiêu Đề Của Bảng

Phần tiêu đề bảng được đánh dấu bởi thẻ <thead>.

<table>
    <thead>
    ...
    </thead>
</table>

Tiêu đề bảng gồm một dòng duy nhất và dòng tiêu đề thường xuất hiện ở dòng đầu tiên trong bảng. Văng bản bên trong dòng tiêu đều sẽ được hiển thị theo kiểu chữ in đậm theo mặc định.

Nội Dung Của Bảng

Phần nội dung của bảng được đánh dấu bởi thẻ <tbody>.

<table>
    <tbody>
    ...
    </tbody>
</table>

Phần nội dung của bảng thường bao gồm một hoặc nhiều dòng khác nhau. Văn bản bên trong các dòng này được hiển thị theo kiểu chữ in thường theo mặc định.

Thêm Dòng Vào Bảng

Mỗi dòng của cả hai phần: phần tiêu đề và phần nội dung đều được đánh dấu sử dụng thẻ <tr>:

<table>
<thead>
    <tr>...</tr>
</thead>
<tbody>
    <tr>...<tr>
    <tr>...<tr>
</tbody>
</table>

Thêm Cột Vào Bảng

Mỗi dòng của bảng sẽ gồm một hoặc nhiều cột. Với phần tiêu đề thì mỗi cột được đánh dấu sử dụng thẻ <th> với phần nội dung thì các cột sẽ được đánh dấu bằng thẻ <td>:

Lưu ý: Số lượng cột của dòng tiêu đề và các dòng trong phần nội dung cần phải như sau.

<table>
<thead>
<tr>
    <th>STT</th>
    <th>Tên</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>Hà Nội</td>
</tr>
<tr>
    <td>1</td>
    <td>Đà Nẵng</td>
</tr>
<tr>
    <td>1</td>
    <td>Tp.Hồ Chí Minh</td>
</tr>
</tbody>
</table>

10 bình luận


Đăng bình luận