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>
                [email protected]
            </td>
        </tr>
        <tr>
            <td>
                Cùng Học Web
            </td>
            <td>
                [email protected]
            </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 tbody và thead xem chuyện gì xảy ra. 
<table border="1" cellspacing="0" cellpadding="5">
    <tbody>
        <tr>
            <td>
                TheHalfheart
            </td>
            <td>
                [email protected]
            </td>
        </tr>
        <tr>
            <td>
                Cùng Học Web
            </td>
            <td>
                [email protected]
            </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.