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

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)
  • tr: Định nghĩa hàng
  • td định nghĩa cột

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 quá trình học html css xây dựng giao diện 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 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!

Đề xuất cho bạn

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments

Tặng Ebook chia sẻ kinh nghiệm học lập trình web đi làm cho người mới bắt đầu!

Đây là tấm bản đồ chia sẻ lại cách học lập trình web đi làm đã giúp nhiều học trò của unitop kiếm được thu nhập từ 8-30tr mỗi tháng.

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x