Bài 7: Các thẻ HTML định dạng Table

1. Định dạng HTML table đơn giản

Cách đơn giản nhất để tạo table là tuân theo cú pháp sau:

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <td>Hàng 1 cột 1</td>
        <td>Hàng 1 cột 2</td>
        <td>Hàng 1 cột 3</td>
    </tr>
    <tr>
        <td>Hàng 2 cột 1</td>
        <td>Hàng 2 cột 2</td>
        <td>Hàng 2 cột 3</td>
    </tr>
</table>

Trong đó:

  • Thuộc tính border="1" là khai báo đường viền của table
  • Thuộc tính cellspacing="0" là khai báo khoảng cách giữa viền trên và viền dưới của đường viền
  • Thuộc tính cellpadding="5" là khai báo khoảng cách giữa nội dung trong ô so với đường viền
  • Nếu muốn thêm một cột thì chỉ việc bổ sung một td
  • Nếu muốn thêm một hàng thì chỉ việc bổ sung một tr
  • Bạn hãy thử thay đổi các thông số để kiểm thử nhé.

2. Thuộc tính colspan và rowspan trong Table

Colspan: Thuộc tính colspan dùng để nối hai hoặc nhiều ô với nhau tính từ ô đặt thẻ này đi tới phía trước.

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <td colspan="2">Hàng 1 cột 1 và Hàng 1 cột 2</td>
        <td>Hàng 1 cột 3</td>
    </tr>
    <tr>
        <td>Hàng 2 cột 1</td>
        <td>Hàng 2 cột 2</td>
        <td>Hàng 2 cột 3</td>
    </tr>
</table>

Rowspan: Thuộc tính rowspan dùng để nối hai hoặc nhiêu ô với nhau tính từ ô đặt thẻ đi xuống phía dưới.

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <td rowspan="2">Hàng 1 cột 1</td>
        <td>Hàng 1 cột 3</td>
        <td>Hàng 1 cột 3</td>
    </tr>
    <tr>
        <td>Hàng 2 cột 2</td>
        <td>Hàng 2 cột 3</td>
    </tr>
</table>

3. Nhóm thẻ thead – tbody – tfoot

<table border="1" cellspacing="0" cellpadding="5">
    <thead>
        <tr>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                TheHalfheart
            </td>
            <td>
                TheHalfHeart@gmail.com
            </td>
        </tr>
        <tr>
            <td>
                Cùng Học Web
            </td>
            <td>
                info@cunghocweb.com
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
        </tr>
    </tfoot>
</table>

Như vậy chạy lên giao diễn vẫn giống như cách làm thông thường. Tuy nhiên nếu bây giờ ta đổi vị trí của nhóm tbodythead xem chuyện gì xảy ra.

<table border="1" cellspacing="0" cellpadding="5">
    <tbody>
        <tr>
            <td>
                TheHalfheart
            </td>
            <td>
                TheHalfHeart@gmail.com
            </td>
        </tr>
        <tr>
            <td>
                Cùng Học Web
            </td>
            <td>
                info@cunghocweb.com
            </td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>
                Username
            </td>
            <td>
                Email
            </td>
        </tr>
    </tfoot>
</table>

Chạy lên giao diện vẫn bình thường. Điều đặc biệt ở đây đó là đáng lẽ ra theo luật thì phần tbody sẽ phải nằm trên cùng bởi vì nó đặt trên cùng, nhưng nó lại nằm đúng vị trí của nó. Điều này có nghĩa là nếu ta sử dụng các nhóm này thì dù đặt ở đâu thì lúc hiển thị vẫn theo luật thead – tbody – tfoot.

Chia sẻ bài viết

Bài 7: Các thẻ HTML định dạng Table

Hoặc copy địa chỉ

Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon