Chi tiết cú pháp bảng trong HTML5

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é!