[Bài 9] Bảng biểu trong HTML5 2025

This is post 10 of 14 in the series “Lập trình HTML”

Trong bài này, mình sẽ giới thiệu với các bạn về bảng biểu trong HTML5.

Trong Word, bảng biểu đôi khi là một thứ giúp bạn biểu đạt suy nghĩ của mình một cách tốt nhất, ví dụ về so sánh giữa hai nhân vật A và B trong một tác phẩm hay so sánh giữa Facebook và Twitter chẳng hạn,… HTML5 cũng không phải ngoại lệ khi cho chúng ta một khả năng để tạo bảng biểu tự do tuỳ chỉnh theo ý mình.

Tóm tắt ẩn

Bảng biểu trong HTML5

Cách ghi nhớ thẻ <tr>, <th> và <td>

Các thuộc tính liên quan đến bảng biểu trong HTML5

Tóm lại

Bảng biểu trong HTML5

Cấu trúc của bảng biểu trong HTML5 được thể hiện theo trình tự sau (bạn phải sắp đúng trình tự mới được):

<table>
    <caption>Ví dụ về một bảng đơn giản trong HTML5</caption>
    <tr>
        <th>STT</th>
        <th>Họ tên</th>
        <th>Số điện thoại</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Nguyễn Văn A</td>
        <td>+84987654321</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Trần Thị B</td>
        <td>+84123456789</td>
    </tr>
</table>

Bảng biểu trong HTML5

Ở đây, có 5 thẻ bạn cần chú ý:

<table> – đây được xem là thẻ chính của một bảng, thẻ này là thẻ bắt buộc phải có nếu bạn muốn tạo lập bảng, thẻ này phải nằm ngoài và bao bọc thẻ bên dưới.
<tr> – thẻ này được dùng để phân chia bảng thành từng dòng, mỗi thẻ này trong thẻ <table> đều được xem là 1 hàng, thẻ này bao bọc các thẻ <th>, <td> và một số thẻ khác (trừ thẻ <table>, <caption>,…)
<th> – thẻ này được dùng để tô đậm nội dung bên trong nó khi đặt vào thẻ <tr> (thường được dùng làm tên cột của một bảng), tuỳ thuộc vào bạn có bao nhiêu thẻ này mà trình duyệt sẽ hiển thị bấy nhiêu ô trên 1 hàng (ví dụ bạn thêm 5 thẻ này đồng nghĩa với việc bạn có 5 ô trên 1 hàng)
<td> – thẻ này được dùng để chứa nội dung của bảng, được đặt trong thẻ <tr>, về cách thức thì giống như thẻ <th>
<caption> – thẻ này được dùng để thêm mô tả cho bảng, phải được đặt ngay phía sau thẻ <table>, sẽ không hoạt động khi đặt ở vị trí khác (không bắt buộc).

Cách để ghi nhớ 5 thẻ này rất đơn giản, riêng thẻ 5 <caption> thì trùng với từ caption (mô tả) và thẻ 1 <table> trùng với từ table (bảng) luôn rồi nên dễ nhớ, vậy còn 3 thẻ còn lại thì ghi nhớ thế nào? Chúng ta cùng tìm hiểu thôi.

Cách ghi nhớ thẻ <tr>, <th> và <td>

<tr> – bạn lấy chữ “t” của table ghép với chữ đầu của chữ “row” (hàng/dòng) ta được tr => table row (hàng của bảng)
<th> – chữ đầu của table ghép với chữ h của “heading” (tiêu đề) ta được th => table heading (tiêu đề của bảng, cụ thể hơn là tiêu đề của cột trong bảng)
<td> – cũng giống 2 thẻ trên, bạn lấy chữ “t” ghép với chữ “d” của data (dữ liệu) ta được td => table data (dữ liệu của bảng, hay còn gọi là dữ liệu của ô trong 1 hàng)

Các thuộc tính liên quan đến bảng biểu trong HTML5

Có 2 thuộc tính chính liên quan đến bảng biểu trong HTML5 có thể kể đến đó chính là rowspan và colspan:

rowspan: thuộc tính này dùng để tăng kích cỡ của một ô thành số lượng dòng/hàng xác định, mặc định có giá trị là 1.

Ví dụ, mình có 1 bảng như sau:

<table>
    <caption>Ví dụ về rowspan</caption>
    <tr>
        <th>Họ tên</th>
        <td>Tiền Minh Vy</td>
    </tr>
    <tr>
        <th>Các website đang sở hữu</th>
        <td>www.tienminhvy.com</td>
    </tr>
    <tr>
        <td>www.freesharing.cyou</td>
    </tr>
</table>

Bảng biểu trong HTML5 – VD 1

Như bạn thấy ở trên, mục “Các website đang sở hữu” chỉ nằm ở dòng số 1, nếu mình thêm thuộc tính rowspan (cho giá trị là 2) vào thì nó sẽ được kết quả như bên dưới:

<table>
    <caption>Ví dụ về một bảng đơn giản trong HTML5</caption>
    <tr>
        <th>Họ tên</th>
        <td>Tiền Minh Vy</td>
    </tr>
    <tr>
        <th rowspan='2'>Các website đang sở hữu</th>
        <td>www.tienminhvy.com</td>
    </tr>
    <tr>
        <td>www.freesharing.cyou</td>
    </tr>
</table>

Bảng biểu trong HTML5 – VD 2

colspan: thuộc tính này thì ngược lại với rowspan, nó sẽ tăng kích cỡ của một ô thành số lượng cột xác định. Mặc định cũng là 1.

Cũng lấy ví dụ trên, nếu mình gộp mục “Họ tên” và “Các website đang sở hữu” thành một mục “Họ tên và các website đang sở hữu” rồi thêm thuộc tính colspan (cho giá trị là 2) vào thì sẽ được như sau:

<table>
    <caption>Ví dụ về một bảng đơn giản trong HTML5</caption>
    <tr>
        <th colspan='2'>Họ tên và các website đang sở hữu</th>
    </tr>
    <tr>
        <!-- Mình thêm thuộc tính rowspan ở dưới cho dễ nhìn nha -->
        <td rowspan='2'>Tiền Minh Vy</td>
        <td>www.tienminhvy.com</td>
    </tr>
    <tr>
        <td>www.freesharing.cyou</td>
    </tr>
</table>

Bảng biểu trong HTML5 – VD 3

Cách ghi nhớ:

rowspan: nghĩa là tăng kích thước ô theo dòng (“span” nghĩa là dãn kích thước)
colspan: nghĩa là tăng kích thước ô theo cột

Tóm lại

Qua bài viết này, mình đã giới thiệu với các bạn về bảng biểu trong HTML5, cú pháp cũng như là các thuộc tính đi kèm, cùng một số thẻ và thuộc tính chúng ta đã học như sau: