Table: Hiển thị nội dung bảng trong html

table-html-unitop

Table là một công cụ giúp chúng ta hiển thị dữ liệu dạng bảng trên website một cách dễ dàng. Trong bài viết này chúng ta cùng tìm hiểu cấu trúc và cách sử dụng bảng html.

Trong quá khứ tôi tin rằng bạn đã từng làm việc với Excel đúng không. Đó là một ứng dụng chuyên xử lý dữ liệu trên bảng. Khi sử dụng bảng trên html nó vẫn có cấu trúc hoàn toàn tương tự.

Bên dưới là hình ảnh demo của một bảng chứa danh sách người dùng.

STTHọ Và Tên
1Phan Văn Cương
2Trần Thu Hằng

Cách sử dụng table trong html

  • Header: Tiêu đề của các trường dữ liệu trong bảng (thead)
  • Body: Nội dung dữ liệu của bảng(tbody)
  • Footer: Phần chân của bảng (tfoot)

Bảng được bởi các dòng và cột, giao giữa hàng và cột ta gọi nó là một ô trong bảng.

Bên dưới là ví dụ demo một bảng trong thực tế:

<body>
<table>
    <caption>Danh sách học bổng</caption>
    <thead>
        <tr>
            <th>STT</th>
            <th>Họ Và Tên</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Phan Văn Cương</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Trần Thu Hằng</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Số lượng</td>
            <td>2</td>
        </tr>
    </tfoot>
</table>
</body>

Caption: Chú thích nội dung của bảng

 <caption>Danh sách học bổng</caption>

Bạn cần chú ý một dòng được định nghĩa bằng thẻ tr và các cột bằng thẻ td.

Qua ví dụ trên ta có:

#1. Tiêu đề bảng

<thead>
    <tr>
        <th>STT</th>
        <th>Họ Và Tên</th>
    </tr>
</thead>

#2. Thân của bảng

<tbody>
    <tr>
        <td>1</td>
        <td>Phan Văn Cương</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Trần Thu Hằng</td>
    </tr>
</tbody>

#3. Chân của bảng

<tfoot>
    <tr>
        <td>Số lượng</td>
        <td>2</td>
    </tr>
</tfoot>

Một ưu điểm khi xây dựng table theo cấu trúc thead, tbody, tfoot nó cực kỳ tiện lợi khi muốn Css cho từng phần của bảng.

Tất nhiên thường bảng có tiêu đề và nội dung, phần tfoot có thể có hoặc không.

Tổng kết

Bảng là một phần rất quan trọng trong website, chúng ta sử dụng nó để hiển thị danh sách đơn hàng, danh sách thành viên, … đủ loại nội dung khác nhau.

Ngay bây giờ bạn cần thực hành lại và xây dựng cấu trúc html của một bảng hoàn chỉnh từ đó bạn sẽ nắm sâu được bài học hơn.


Xin chào, sớm hẹn gặp lại!

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Tạo Link Icon Button với Html Css

Làm thế nào để tạo ra một link hiển thị kiểu button có icon bên cạnh để làm rõ hơn nội dung mà link muốn

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng