Thẻ <table> trong HTML

1) Giới thiệu "các thành phần cơ bản của một cái bảng"

- Thông thường, bảng là một phần tử gồm có các hàng và các ô.

(một bảng sẽ có nhiều hàng và một hàng thì sẽ có nhiều ô)

- Ví dụ: Bảng bên dưới có bốn hàng, mỗi hàng có bốn ô.

- Để tạo một bảng thì chúng ta phải sử dụng kết hợp các thẻ: <table>, <tr>, <td>, <th>

- Trong đó:

• Thẻ <table> xác định phần tử là một cái bảng.
• Thẻ <tr> xác định phần tử là một hàng trong bảng.
• Thẻ <td> xác định phần tử là một ô trong hàng.
• Thẻ <th> xác định phần tử là một ô tiêu đề trong hàng.
(ô tiêu đề là ô chữ được tô đậm nổi bật giống như: Họ và tên, ngày sinh, giới tính, quê quán)

<table border="1">
    <tr>
        <th>Họ và tên</th>
        <th>Năm sinh</th>
        <th>Giới tính</th>
        <th>Quê quán</th>
    </tr>
    <tr>
        <td>Nguyễn Thành A</td>
        <td>1993</td>
        <td>Nam</td>
        <td>Cần Thơ</td>
    </tr>
    <tr>
        <td>Trần Văn B</td>
        <td>1985</td>
        <td>Nam</td>
        <td>Vĩnh Long</td>
    </tr>
    <tr>
        <td>Lê Thị C</td>
        <td>1990</td>
        <td>Nữ</td>
        <td>Sóc Trăng</td>
    </tr>
</table>

2) Các thuộc tính được sử dụng trong thẻ <table>

- Thẻ <table> có tám thuộc tính thường hay được sử dụng nhất.

- Dưới đây là bảng mô tả sơ lượt về tám thuộc tính của thẻ <table> :

2.1) Thuộc tính align

- Thuộc tính align dùng để xác định vị trí của bảng so với các văn bản xung quanh.

- Thuộc tính align có ba giá trị:

- Ngoài việc sử dụng thuộc tính align thì ta cũng có thể dùng thuộc tính float trong CSS để thay thế.

<table border="1" style="float:right">
    ...
</table>

2.2) Thuộc tính bgcolor

- Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng.

<table border="1" bgcolor="yellow">
    ...
</table>

2.3) Thuộc tính border

- Thuộc tính border dùng để thiết lập đường viền cho bảng cũng như các ô trong bảng.

- Thuộc tính border có hai giá trị:

<table border="1">
    ...
</table>

2.4) Thuộc tính cellpadding

- Thuộc tính cellpadding xác định khoảng cách từ nội dung của ô đến đường viền của ô.

(mặc định thì giá trị của thuộc tính cellpadding được tính theo đơn vị pixel)

<table border="1" cellpadding="30">
    ...
</table>

2.5) Thuộc tính cellspacing

- Thuộc tính cellspacing xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh.

(mặc định thì giá trị của thuộc tính cellspacing được tính theo đơn vị pixel)

<table border="1" cellspacing="30">
    ...
</table>

2.6) Thuộc tính frame

- Thuộc tính frame xác định những phần đường viền nào của bảng sẽ được hiển thị.

- Thuộc tính frame sẽ có các giá trị sau:

2.7) Thuộc tính rules

- Thuộc tính rules xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị.

- Thuộc tính rules sẽ có các giá trị sau: