Trong cú pháp HTML, bảng chủ yếu được tạo bằng 3 thẻ chính: `<table>`, `<tr>` và `<td>`. Bài viết này sẽ hướng dẫn chi tiết cú pháp bảng HTML5 thông qua các ví dụ minh họa cụ thể. Nếu bạn quan tâm đến HTML, hãy cùng khám phá nhé!
Mục lục
I. Bảng cơ bản
1. Cú pháp bảng
2. Thuộc tính bảng
3. Ví dụ minh họa
II. Bảng không đều
4. Gộp hàng
5. Gộp cột
6. Ví dụ minh họa
—
I. Bảng cơ bản
Trong HTML, cấu trúc bảng gồm ba thành phần chính:
Thẻ `<table>` dùng để tạo bảng.
Thẻ `<tr>` để định nghĩa hàng.
*Thẻ `<td>` để tạo ô dữ liệu.
1. Cú pháp bảng HTML5
html
<table border=”1″ width=”600″ height=”600″ bordercolor=”blue” align=”center” bgcolor=”#cccccc”>
<caption align=”center”>Bảng điểm</caption>
<tr align=”center”>
<td></td>
<th scope=”col”>Số GV</th>
<th scope=”col”>Số SV</th>
<th scope=”col”>Tổng</th>
</tr>
<tr align=”center”>
<th scope=”row”>Năm 2021</th>
<td>40</td>
<td>400</td>
<td>440</td>
</tr>
<tr align=”center”>
<th scope=”row”>Năm 2022</th>
<td>100</td>
<td>1500</td>
<td>1600</td>
</tr>
<tr align=”center”>
<th scope=”row”>Năm 2023</th>
<td>100</td>
<td>1500</td>
<td>1600</td>
</tr>
<tr align=”center”>
<th scope=”row”>Năm 2024</th>
<td>200</td>
<td>4000</td>
<td>4200</td>
</tr>
</table>
“`
Giải thích thẻ và thuộc tính:
* `<caption>`: tiêu đề bảng, đặt ngay sau thẻ `<table>`.
* `border`: độ dày viền.
* `width`, `height`: kích thước bảng.
* `align`: căn chỉnh bảng.
* `bordercolor`: màu viền.
* `bgcolor`: màu nền bảng.
* `scope`: xác định vai trò ô tiêu đề (`row` hoặc `col`).
#### 2. Các thuộc tính bảng phổ biến
| Thuộc tính | Mô tả |
| ————- | ———————————- |
| `border` | Độ dày đường viền bảng |
| `width` | Chiều rộng bảng |
| `height` | Chiều cao bảng |
| `align` | Căn chỉnh bảng trên trang |
| `bordercolor` | Màu sắc đường viền |
| `bgcolor` | Màu nền bảng |
| `scope` | Xác định ô là tiêu đề của hàng/cột |
II. Bảng không đều
Bảng không đều là bảng có ô được gộp hàng hoặc gộp cột bằng các thuộc tính `rowspan` và `colspan`.
1. Gộp hàng với `rowspan`
“`html
<table>
<tr>
<td rowspan=”2″>Nội dung</td>
<td>Dòng 1</td>
</tr>
<tr>
<td>Dòng 2</td>
</tr>
</table>
“`
Thuộc tính `rowspan` chỉ định ô đó sẽ kéo dài qua bao nhiêu hàng.
2. Gộp cột với `colspan`
“`html
<table>
<tr>
<td colspan=”2″>Nội dung</td>
</tr>
</table>
“`
Thuộc tính `colspan` chỉ định ô đó kéo dài bao nhiêu cột.
**Lưu ý**: Khi gộp ô, cần xóa các ô bị thay thế để không làm sai cấu trúc bảng.
3. Ví dụ bảng không đều
“`html
<table border=”1″ width=”400″ height=”200″>
<tr>
<td></td>
<th>Số GV</th>
<th>Số SV</th>
<th>Tổng</th>
</tr>
<tr>
<th>Năm 2021</th>
<td colspan=”2″></td>
<td rowspan=”2″></td>
</tr>
<tr>
<th>Năm 2022</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Năm 2023</th>
<td colspan=”2″ rowspan=”2″></td>
<td></td>
</tr>
<tr>
<th>Năm 2024</th>
<td></td>
</tr>
</table>
“`
Bài viết trên đã giới thiệu chi tiết cú pháp và các ví dụ về bảng trong HTML5. Hy vọng nội dung này sẽ hữu ích cho bạn trong việc xây dựng giao diện web chuyên nghiệp và chuẩn SEO. Đừng quên xem thêm các bài viết khác về HTML tại trang của chúng tôi nhé!
Tài nguyên này được người dùng tải lên và nội dung được lấy từ Internet. Trang web này chỉ giới thiệu miễn phí để học tập và chia sẻ. Nếu có bất kỳ vấn đề bản quyền hoặc vấn đề nào khác, vui lòng liên hệ với biên tập viên của trang web này để xử lý!
Lưu ý quan trọng: : Nếu phần mềm liên quan đến thanh toán, thành viên, nạp tiền, v.v., thì đây là những hành động của nhà phát triển phần mềm hoặc công ty sở hữu phần mềm đó và không liên quan gì đến trang web này. Cư dân mạng cần phải tự đưa ra phán đoán của mình.
