Bảng trong HTML5

Trong hướng dẫn này, bạn sẽ học cách hiển thị dữ liệu dạng bảng bằng cách sử dụng bảng trong HTML5.

Tạo bảng trong HTML

Bảng trong HTML cho phép bạn sắp xếp dữ liệu thành các hàng và cột. Chúng thường được sử dụng để hiển thị dữ liệu dạng bảng như danh sách sản phẩm, thông tin chi tiết của khách hàng, báo cáo tài chính, v.v.

Bạn có thể tạo một bảng bằng cách sử dụng phần tử <table>. Bên trong phần tử <table>, bạn có thể sử dụng các phần tử <tr> để tạo hàng và sử dụng các phần tử <td> để tạo cột bên trong một hàng. Bạn cũng có thể định nghĩa một ô làm tiêu đề cho bảng bằng cách sử dụng phần tử <th>.

Ví dụ sau đây minh họa cấu trúc cơ bản nhất của một bảng.

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

Các bảng không có bất kỳ đường viền nào theo mặc định. Bạn có thể sử dụng thuộc tính border trong CSS để thêm đường viền cho các bảng. Ngoài ra, các ô trong bảng có kích thước vừa đủ lớn để phù hợp với nội dung theo mặc định. Để thêm không gian xung quanh nội dung trong các ô của bảng, bạn có thể sử dụng thuộc tính padding trong CSS.

Các style CSS sau đây thêm đường viền 1 pixel vào bảng và thêm không gian 10 pixel xung quanh nội dung vào các ô của bảng.

table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}

Theo mặc định, các đường viền xung quanh bảng và các ô của chúng được ngăn cách với nhau. Nhưng bạn có thể thu gọn chúng thành một bằng cách sử dụng thuộc tính border-collapse trên phần tử <table>.

Ngoài ra, văn bản bên trong các phần tử <th> được hiển thị bằng phông chữ đậm, căn chỉnh theo chiều ngang ở giữa ô theo mặc định. Để thay đổi căn chỉnh mặc định, bạn có thể sử dụng thuộc tính text-align trong CSS.

Các style CSS sau đây thu gọn đường viền bảng và căn chỉnh văn bản tiêu đề bảng sang trái.

table {
    border-collapse: collapse;
}
th {
    text-align: left;
}

Vui lòng xem hướng dẫn về bảng CSS để tìm hiểu chi tiết về cách tạo style CSS cho bảng HTML.

Lưu ý: Hầu hết các thuộc tính của phần tử <table> như border, cellpadding, cellspacing, width, align, v.v. để style cho bảng trong các phiên bản trước đó đã được loại bỏ trong HTML5. Thay vào đó, hãy sử dụng style CSS để tạo style CSS cho bảng HTML.

Gộp nhiều hàng và cột

Gộp cho phép bạn mở rộng các hàng và cột của bảng trên nhiều hàng và cột khác.

Thông thường, một ô trong bảng không thể chuyển vào khoảng trống bên dưới hoặc bên trên một ô trong bảng khác. Tuy nhiên, bạn có thể sử dụng thuộc tính rowspan hoặc colspan để gộp nhiều hàng hoặc cột trong bảng.

Hãy thử ví dụ sau để hiểu cơ bản colspan hoạt động như thế nào :

<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
    <tr>
        <td>John Carter</td>
        <td>5550192</td>
        <td>5550152</td>
    </tr>
</table>

Tương tự, bạn có thể sử dụng thuộc tính rowspan này để tạo một ô kéo dài nhiều hơn một hàng. Hãy thử một ví dụ để hiểu cách hoạt động của việc kéo dài hàng về cơ bản:

<table>
    <tr>
        <th>Name:</th>
        <td>John Carter</td>
    </tr>
    <tr>
        <th rowspan="2">Phone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>

Thêm chú thích vào bảng

Bạn có thể định nghĩa chú thích (hoặc tiêu đề) cho các bảng của mình bằng cách sử dụng phần tử <caption>.

Phần tử <caption> phải được đặt ngay sau thẻ mở <table>. Theo mặc định, chú thích xuất hiện ở đầu bảng, nhưng bạn có thể thay đổi vị trí của chú thích bằng cách sử dụng thuộc tính caption-side trong CSS.

Ví dụ sau đây cho thấy cách sử dụng phần tử chú thích trong một bảng.

<table>
    <caption>Users Info</caption>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

Định nghĩa header, body và footer của bảng

HTML cung cấp một loạt các thẻ <thead>, <tbody> và <tfoot> giúp bạn tạo bảng có cấu trúc hơn, bằng cách định nghĩa các khu vực header, body và footer tương ứng.

Ví dụ sau minh họa việc sử dụng các phần tử này.

<table>
    <thead>
        <tr>
            <th>Items</th>
            <th>Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stationary</td>
            <td>2,000</td>
        </tr>
        <tr>
            <td>Furniture</td>
            <td>10,000</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>12,000</td>
        </tr>
    </tfoot>
</table>

Lưu ý: Trong HTML5, phần tử <tfoot> có thể được đặt trước hoặc sau các phần tử <tbody> và <tr>, nhưng phải xuất hiện sau các phần tử <caption>, <colgroup> và <thead>.

Mẹo: Không sử dụng bảng để tạo bố cục trang web. Bố cục bảng hiển thị chậm hơn và rất khó duy trì. Nó chỉ nên được sử dụng để hiển thị dữ liệu dạng bảng.