STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    HTML - Phần 7: Thẻ Table Trong HTML

    Trình bày dữ liệu thống kê theo dòng và cột với thẻ <table>.
    04/11/2015
    30/08/2020
    3 phút đọc
    HTML - Phần 7: Thẻ Table Trong HTML

    Đặt vấn đề

    Giả sử 1 trang web cần trình bày dữ liệu hiển thị giỏ hàng như bên dưới, HTML hỗ trợ thẻ <table>:

        SẢN PHẨM SỐ LƯỢNG THÀNH TIỀN
    Trash icon Móc khóa InterNOT Móc khóa InterNOT
    79.000₫
    2 158.000₫
    Trash icon Móc khóa Visual Studio Móc khóa Visual Studio
    79.000₫
    1 79.000₫
    Trash icon Móc khóa Photoshop Móc khóa Photoshop
    79.000₫
    3 237.000₫
    Trash icon Móc khóa Excel Móc khóa Excel
    79.000₫
    2 158.000₫
    Trash icon ... ... ... ...

    Ví dụ thẻ <table> cơ bản

    <table> có rất nhiều thẻ con và thuộc tính định dạng, bên dưới là mã cơ bản khi sử dụng <table>.

    Mã HTML

    <!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <table>
    <tbody> <tr>
    <td>Kênh</td> <td>Liên kết</td> </tr>
    <tr> <td>Youtube</td> <td>https://www.youtube.com</td> </tr> <tr> <td>Facebook</td> <td>https://www.facebook.com</td>
    </tr>
    <tr>
    <td>TikTok</td>
    <td>https://www.tiktok.com</td> </tr>
    </tbody> </table> </body> </html>

    Kết quả

    Kênh Liên kết
    Youtube https://www.youtube.com
    Facebook https://www.facebook.com
    TikTok https://www.tiktok.com

    Các thành phần của <table>

    Bảng trong HTML được định nghĩa bởi cặp thẻ đóng mở <table></table>.

    Mã HTML tương ứng của hình trên như sau:

    <table>
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tfoot>
    </table>

    Giải thích các thành phần của <table>

    Như hình và mã HTML mẫu trên, 1 <table> có thể chia ra làm 3 phần:

    • <thead>: dành cho tiêu đề, tên bảng, các miêu tả bắt đầu cho bảng.
    • <tbody>: dành cho bảng dữ liệu chính.
    • <tfoot>: dành cho tổng hợp, thống kê, bản quyền, lời kết.

    <thead>, <tbody>, <tfoot> đều có thể định nghĩa:

    • <tr>: table-row - dòng dữ liệu. Trong khi đó ở mỗi dòng có thể định nghĩa từng ô.
      • <th>: dành cho các ô tiêu đề.
      • <td>: dành cho các ô dữ liệu.
      • * <th><td> về mặc cú pháp sử dụng giống nhau, nhưng được khuyến khích sử dụng đúng ngữ nghĩa của nó. <th> nên dành cho tiêu đề và <td> dành cho dữ liệu.
    <table>
     <tbody>
       <tr>
         <th>Trình duyệt web</th>
         <th>Nhà phát triển</th>
       </tr>
       <tr>
         <td>Chrome</td>
         <td>Google</td>
       </tr>
       <tr>
         <td>Firefox</td>
         <td>Mozilla</td>
       </tr>
       <tr>
         <td>Edge</td>
         <td>Microsoft</td>
       </tr>
     </tbody>
    </table>

    Có thể sử dụng 1 phần trong đó như <tbody> thay vì dùng đầy đủ <thead>, <tfoot>.

    Thuộc tính rowspan và colspan

    rowspan là thuộc tính giúp xác định số dòng được gộp trong một dòng.

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <table border="1">
         <tbody>
           <tr>
             <td>Họ tên</td>
             <td>Nguyễn Nghĩa</td>
           </tr>
           <tr>
             <td rowspan="2">Địa chỉ</td>
             <td>Quảng Bình</td>
           </tr>
           <tr>
             <td>Hồ Chí Minh</td>
           </tr>
         </tbody>
       </table>
     </body>
    </html>

    Kết quả:

    Họ tên Nguyễn Nghĩa
    Địa chỉ Quảng Bình
    Hồ Chí Minh

    colspan là thuộc tính giúp xác định số ô được gộp trong một ô.

    <!DOCTYPE html>
    <html>
     <head></head>
     <body>
       <table border="1">
         <tbody>
           <tr>
             <th>Họ tên</th>
             <th colspan="2">Số điện thoại</th>
           </tr>
           <tr>
             <td>Nguyễn Văn An</td>
             <td>098xxxxxxx</td>
             <td>0167xxxxxxx</td>
           </tr>
         </tbody>
       </table>
     </body>
    </html>

    Kết quả:

    Họ tên Số điện thoại
    Nguyễn Văn An 098xxxxxxx 0167xxxxxxx

    Bài chung series

    0 Bình luận
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Đề xuất

    HTML - Phần 8: Thẻ Form trong HTML
    Thẻ <form> - "khung nhập liệu" trong HTML điền thông tin ứng dụng trong ...
    HTML - Phần 6: Các Thẻ Input trong HTML
    Các loại thẻ <input> hỗ trợ nhập liệu chuỗi, số, mật khẩu, ... trong ...

    Khám phá

    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
    Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh ...
    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...
    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
    Giới thiệu và hướng dẫn sử dụng 1 số thẻ định dạng văn bản HTML.
    Các Thẻ - Tag Thông Dụng trong HTML
    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...
    HTML - Phần 0: Trang Web Đầu Tiên
    Hướng dẫn từng bước đầu tiên tạo trang web với HTML.
    Mã Hóa Base64
    Base64 không phải là một thuật toán mã hóa và trong mọi trường hợp, nó ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020