Bảng trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Bảng trong CSS

Giao diện bảng (table) HTML dưới đây nhìn sẽ thuận mắt hơn khi thêm các thuộc tính CSS:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Đường viền bảng

Xác định đường viền bảng trong CSS, sử dụng thuộc tính border. Ví dụ dưới đây xác định đường viền màu đen cho phần tử <table>, <th> và <td>:

table, th, td {
   border: 1px solid black;
}

Lưu ý rằng bảng trong ví dụ trên có đường viền kép. Điều này là do cả bảng và các phần tử <th> và <td> đều có đường viền riêng biệt.

Thu gọn đường viền bảng

Thuộc tính border-collapse thiết lập xem đường viền bảng có được thu gọn thành một đường kẻ duy nhất không:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Nếu bạn chỉ muốn một đường viền xung quanh bảng, chỉ cần xác định thuộc tính border cho phần từ <table>:

table {
    border: 1px solid black;
}

Chiều rộng và chiều cao bảng

Chiều rộng và chiều cao của bảng xác định bởi thuộc tính width và height. Ví dụ bên dưới thiết lập chiều rộng của bảng là 100%, chiều cao của phần tử <th> là 50px:

table {
    width: 100%;
}

th {
    height: 50px;
}

Căn chỉnh theo chiều ngang

Thuộc tính text-align căn chỉnh theo chiều ngang (như trái, phải, giữa) cho nội dung trong <th> hoặc <td>. Mặc đinh nội dung của phần tử <th> được căn giữa và nội dung trong phần tử <td> được căn trái.

Ví dụ dưới đây căn trái văn bản trong phần tử <th>:

th {
    text-align: left;
}

Căn chỉnh theo chiều dọc

Thuộc tính vertical-align căn chỉnh theo chiều dọc (trên, dưới hoặc giữa) của nội dung trong <td> hoặc <th>. Mặc định, căn dọc cho nội dung của bảng là ở chính giữa (cho cả phần tử <th> và <td>).

Ví dụ dưới đây thiết lập căn chỉnh văn bản từ dưới lên cho phần tử <td>:

td {
    height: 50px;
    vertical-align: bottom;
}

Thuộc tính padding cho bảng

Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng, sử dụng thuộc tính padding trong phần từ <td> và <th>:

th, td {
    padding: 15px;
    text-align: left;
}

Chia theo chiều ngang

Thêm thuộc tính border-bottom vào thẻ <th> và <td> để chia cột trong bảng:

th, td {
    border-bottom: 1px solid #ddd;
}

Hiệu ứng với bảng

Sử dụng :hover trong <tr> để làm nổi bật mỗi dòng trong bảng khi rê chuột vào:

tr:hover {background-color: #f5f5f5}

Tách bảng

Để tạo ra bảng sọc như trên, sử dụng nth-child() và thêm background-color vào tất cả cột, hoặc hàng của bảng.

tr:nth-child(even) {background-color: #f2f2f2}

Màu của bảng

Ví dụ dưới đây thể hiện màu nền và màu văn bản trong phần tử <th>:

th {
    background-color: #4CAF50;
    color: white;
}

Bảng responsive

Bảng responsive sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị toàn bộ nội dung:

Thêm phần tử bao bọc như thẻ <div> với overflow-x:auto quanh phần tử <table> để tạo bảng responsive:

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Thuộc tính CSS cho bảng

Thuộc tính Mô tả
border thiết lập thuộc tính border trong một khai báo
border-collapse xác định đường viền bảng có được thu gọn không
border-spacing xác định khoảng cách giữa các đường biên của các ô liền kề trong bảng
caption-side xác định vị trí của chú thích bảng
empty-cells xác định có hoặc không hiển thị đường viền và nền trên các ô rỗng trong một bảng
table-layout Thiết lập thuật toán bố trí sẽ được sử dụng cho một bảng