Bảng biểu (table) trong HTML để trình bày dữ liệu gồm có các dòng (row), các ô bảng (cell), phần tiêu đề bảng (heading). Một ô bảng được chỉ ra gồm có dòng và cột - tại đó để hiện thị dữ liệu, bạn có thể mở rộng một ô bảng tương ứng với nhiều dòng, nhiều cột (nhóm nhiều ô bảng thành một ô bảng) để hiện thị dữ liệu. Ví dụ đây là bảng:

cell cell cell cell
cell = gộp 2 cột cell = 2 cột + 2 dòng
cell cell

Tạo bảng biểu với thẻ <table>

Bảng là cấu trúc phức tạp, toàn bộ nội dung của bảng được đặt vào thẻ <table>

Trong thẻ <table> có thuộc tính border để thiết lập độ rộng của các dòng kẻ của bảng (hiện giờ nên dùng CSS). Độ rộng tính bằng pixel - nếu bằng không thì bảng không có các đường kẻ. Ví dụ - có các đường kẻ lưới rộng 1px

<table border="1">
    <!-- các phần tử trong bảng -->
</table>

Thẻ <td>

Trong nội dung bảng, phần tử nhỏ nhất để chứa dữ liệu là <td> (table data), ví dụ có ba ô bảng (cell), hiện thị dữ liệu:

<table border="1">
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>Abc1</td>
    <td>Abc2</td>
    <td>Abc3</td>
    <td>Abc4</td>
    <td>Abc5</td>
    <td>Abc6</td>
</table>
C1 C2 C3 Abc1 Abc2 Abc3 Abc4 Abc5 Abc6

Các ô bảng này khi hiện thị sẽ xuất hiện liền kề nhau theo chiều ngang trên cùng một dòng.

Thẻ <td> là nơi chứa dữ liệu của bảng, nó có thể chứa các thẻ HTML khác như văn bản, hình ảnh, danh sách thậm chí chứa một bảng khác.

Thẻ <tr>

Để nhóm các phần tử <td> thuộc về một dòng, thì dùng thẻ <tr>, ví dụ 9 phần tử <td> phía trên sẽ nhóm thành ba dòng thì như sau:

<table border="1">
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>Abc1</td>
        <td>Abc2</td>
        <td>Abc3</td>
    </tr>
    <tr>
        <td>Abc4</td>
        <td>Abc5</td>
        <td>Abc6</td>
    </tr>
</table>

Kết quả là bảng có ba dòng như sau:

C1 C2 C3
Abc1 Abc2 Abc3
Abc4 Abc5 Abc6

Thuộc tính colspan, rowspan của <td>

colspan trong <td> có thể gán một giá trị số nguyên dương (mặc định là 1),

rowspan trong <td> có thể gán một giá trị số nguyên dương (mặc định là 1), cho biết cell (ô bảng) đó tương đương bao nhiêu dòng.

Ví dụ:

<table border="1">
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>Abc1</td>
        <td colspan="2">Abc2</td>
        <td rowspan="2">Abc3</td>
    </tr>
    <tr>
        <td>Abc4</td>
        <td>Abc5</td>
        <td>Abc6</td>
    </tr>
</table>
C1 C2 C3
Abc1 Abc2 Abc3
Abc4 Abc5 Abc6

Ô bảng Abc2 tương đương 2 cột, ô bảng Abc3 chiếm 2 dòng

Thẻ <th>

Thẻ <th> tương tự như thẻ <td> (nằm trong thẻ <tr>) được dùng để đánh dấu tiêu đề của một nhóm ô bảng (cell)

<table border="1">
    <tr>
        <th></th>
        <th>Cột 1</th>
        <th>Cột 2</th>
        <th>Cột 3</th>
    </tr>

    <tr>
        <th>Dòng 1</th>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <th>Dòng 2</th>
        <td>Abc1</td>
        <td>Abc2</td>
        <td>Abc3</td>
    </tr>
    <tr>
        <th>Dòng 3</th>
        <td>Abc4</td>
        <td>Abc5</td>
        <td>Abc6</td>
    </tr>
</table>
Cột 1 Cột 2 Cột 3
Dòng 1 C1 C2 C3
Dòng 2 Abc1 Abc2 Abc3
Dòng 3 Abc4 Abc5 Abc6

Thẻ <caption>

Thẻ <caption> thường tạo ngay sau khi mở thẻ <table> để thiết lập tiêu đề của bảng. Vị trí tiêu đề có thể thiết lập bằng CSS với thuộc tính caption-side bằng top hoặc bottom

 <table border="1">
    <caption style="caption-side: top">BẢNG DỮ LIỆU</caption>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>Abc1</td>
        <td>Abc2</td>
        <td>Abc3</td>
    </tr>
    <tr>
        <td>Abc4</td>
        <td>Abc5</td>
        <td>Abc6</td>
    </tr>
</table>
BẢNG DỮ LIỆU
C1 C2 C3
Abc1 Abc2 Abc3
Abc4 Abc5 Abc6

Thẻ <thead> <tfoot>

Nếu muốn nhóm các dòng đánh dấu là phần đầu của các cột thì dùng thẻ <thead>, ý nghĩa tương tứ nhóm dòng là phần cuối của cột dùng thẻ <tfoot>

 <table border="1">
    <thead style="background: red">
        <tr>
            <th></th>
            <th>Cột 1</th>
            <th>Cột 2</th>
            <th>Cột 3</th>
        </tr>
    </thead>

    <tr>
        <th>Dòng 1</th>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <th>Dòng 2</th>
        <td>Abc1</td>
        <td>Abc2</td>
        <td>Abc3</td>
    </tr>
    <tr>
        <th>Dòng 3</th>
        <td>Abc4</td>
        <td>Abc5</td>
        <td>Abc6</td>
    </tr>
</table>
Cột 1 Cột 2 Cột 3
Dòng 1 C1 C2 C3
Dòng 2 Abc1 Abc2 Abc3
Dòng 3 Abc4 Abc5 Abc6

Ví dụ bảng biểu HTML

ĐƠN HÀNG
STT Mặt hàng Đơn giá Số lượng Thành tiền Ghi chú
1 Mặt hàng A 1000 1 1000
2 Mặt hàng B 2000 2 4000
Thành tiền đơn hàng 4000
<table border="1">
    <caption style="caption-side: top">ĐƠN HÀNG</caption>
    <thead>
        <tr>
            <th>STT</th>
            <th>Mặt hàng</th>
            <th>Đơn giá</th>
            <th>Số lượng</th>
            <th>Thành tiền</th>
            <th>Ghi chú</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>Mặt hàng A</td>
        <td>1000</td>
        <td>1</td>
        <td>1000</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mặt hàng B</td>
        <td>2000</td>
        <td>2</td>
        <td>4000</td>
        <td></td>
    </tr>
    <tfoot>
        <tr>
            <th colspan="4">Thành tiền đơn hàng</th>
            <th colspan="2">4000</th>

        </tr>
    </tfoot>
</table>

Đăng ký nhận bài viết mới