Bài 28: Thuộc tính cellspacing và cellpadding trong thẻ table | Học HTML

Ở bài này chúng tôi sẽ giới thiệu đến các bạn hai thuộc tính cellspacing và Cellpadding cho thẻ tạo bảng table.

Cellspacing: Thuộc tính cellspacing dùng để tạo khoảng cách giữa viền trên và viền dưới của đường viền.

Ví dụ: khi chưa có thuộc tính cellspacing
<table border="1">
    <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>
Kết quả hiển thi ở ví dụ trên

Ví dụ: khi có thuộc tính cellapacing
<table border="1" cellspacing= "10">
    <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>

Kết quả hiển thi ở ví dụ trên

Cellpadding: Thuộc tính cellpadding dùng để tạo khoảng cách giữa nội dung trong ô so với đường viền

Ví dụ: khi chưa có thuộc tính Cellpadding
<table border="1">
    <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>
Kết quả hiển thi ở ví dụ trên

Ví dụ: khi có thuộc tính Cellpadding
<table border="1" Cellpadding= "10">
    <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>

Kết quả hiển thi ở ví dụ trên

▪ Bạn có thể tùy chỉnh giá trị của 2 thuộc tính trên bằng giá trị đơn vị tính kich thước tùy ý.

✴ Kết luận: Như vậy trong bài này mình đã giới thiệu đến các bạn hai thuộc tính cellspacing và cellpadding trong thẻ table, ở bài học tiếp theo bạn sẽ học các chỉnh sửa chiều cao chiều rộng cho bảng table.

Chúc bạn thành công.