Định dạng bảng với CSS & Thuộc tính bảng

Bảng không chỉ giúp tổ chức dữ liệu mà còn cần có giao diện đẹp, rõ ràng để người dùng dễ đọc. Trong bài học này, bạn sẽ học cách định dạng bảng bằng:

• Các thuộc tính HTML như border, cellspacing, cellpadding
• CSS để cải thiện giao diện bảng (màu sắc, căn chỉnh, đường viền, v.v.)

1. Định dạng bảng với CSS & Thuộc tính bảng

Thuộc tính bảng trong HTML

1. border - Tạo đường viền cho bảng

Mặc định, bảng HTML không có đường viền. Bạn có thể thêm viền bằng cách sử dụng:

<table border="1">
    <tr>
        <th>Họ và Tên</th>
        <th>Tuổi</th>
    </tr>
    <tr>
        <td>Nguyễn Văn A</td>
        <td>18</td>
    </tr>
</table>

Lưu ý: Thuộc tính border="1" giúp hiển thị viền nhưng không nên dùng trong HTML5. Thay vào đó, ta dùng CSS.

2. cellspacing - Khoảng cách giữa các ô

cellspacing giúp tạo khoảng trống giữa các ô bảng.

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

Lưu ý: Giá trị cellspacing="10" tạo khoảng cách 10px giữa các ô.

3. cellpadding - Khoảng cách giữa nội dung và viền ô

cellpadding tạo khoảng trống bên trong ô để nội dung không bị sát mép.

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

Lưu ý: Giá trị cellpadding="10" tạo khoảng cách 10px giữa nội dung và viền ô.

Định dạng bảng bằng CSS

Sử dụng CSS giúp tùy chỉnh bảng một cách linh hoạt hơn.

1. border-collapse - Gộp hoặc tách viền ô

Mặc định, các ô bảng có viền tách rời. Sử dụng border-collapse: collapse; để gộp viền lại:

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
    }
</style>

Lưu ý:

• border-collapse: collapse; giúp viền các ô dính lại với nhau.
• width: 100%; giúp bảng trải rộng theo chiều ngang.

2. Căn chỉnh nội dung trong bảng

• text-align: left | center | right; giúp căn lề nội dung.
• vertical-align: top | middle | bottom; giúp căn dọc nội dung.

th, td {
    text-align: center;
    vertical-align: middle;
}

3. Thêm màu nền cho bảng (background-color)

Bạn có thể thêm màu nền cho bảng, hàng hoặc từng ô riêng lẻ:

th {
    background-color: #007bff;
    color: white;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}

Lưu ý:

• nth-child(even) giúp đổi màu xen kẽ giữa các hàng.
• background-color: #007bff; giúp đổi màu nền tiêu đề bảng.

2. Thực hành

Bài tập 1: Tạo bảng có đường viền bằng border-collapse.
Bài tập 2: Thêm cellspacing và cellpadding vào bảng.
Bài tập 3: Tạo bảng có màu nền xen kẽ cho từng hàng.
Bài tập 4: Tạo bảng có tiêu đề màu xanh và chữ trắng.

3. Kết luận

Sau bài học này, bạn đã:

• Hiểu cách sử dụng border, cellspacing, cellpadding.
• Biết cách dùng CSS để định dạng bảng đẹp hơn.
• Có thể tạo bảng chuyên nghiệp hơn với HTML & CSS.