• Trang chủ
• Hướng dẫn HTML
• Bảng trong HTML

Bảng trong HTML

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 HTML.

Tạo bảng trong HTML

Bảng 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à để tạo cột bên trong một hàng, bạn có thể sử dụng các phần tử <td>. Bạn cũng có thể xác định một ô làm tiêu đề cho một nhóm ô 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 CSS border để 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 CSS padding.

Các quy tắc kiểu sau đây thêm đường viền 1 pixel vào bảng và 10 pixel đệm 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 CSS text-align.

Các quy tắc kiểu 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 kiểu bảng HTML.

Kéo dài nhiều hàng và cột

Kéo dài 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 để mở rộng nhiều hàng hoặc cột trong bảng.

Hãy thử ví dụ sau để hiểu colspan cơ bản 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ể chỉ định 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 CSS caption-side.

Ví dụ sau đây cho thấy cách sử dụng phần tử này 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>

Xác định Đầu trang, Nội dung và Chân trang 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 tiêu đề, body và chân trang, 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>