17. Table Trong CSS

Table trong CSS: Khi bạn tạo và tùy chỉnh bảng (table) trong CSS, bạn có thể tạo ra giao diện bảng độc đáo và tương thích với thiết kế trang web của mình. Dưới đây là một số cách bạn có thể tùy chỉnh bảng trong CSS:

Loại Bỏ Giao Diện Mặc Định Của Bảng:

css

/* Loại bỏ viền và khoảng cách mặc định của bảng */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Tùy Chỉnh Viền Cho Bảng Và Ô:

css

/* Tạo viền cho bảng và ô */
table, th, td {
    border: 1px solid black;
}

Tùy Chỉnh Khoảng Cách Giữa Ô:

css

/* Tạo khoảng cách giữa các ô */
table {
    border-spacing: 10px;
}

Định Dạng Nền Cho Ô:

css

/* Định dạng nền cho ô tiêu đề */
th {
    background-color: lightgrey;
    text-align: center;
}

/* Định dạng nền xen kẽ cho các ô */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

Thu Nhỏ Kích Thước Của Bảng:

css

/* Thu nhỏ kích thước bảng */
table {
    width: 80%;
    margin: 0 auto;
}

Căn Giữa Văn Bản Trong Ô:

css

/* Căn giữa văn bản trong ô */
td {
    text-align: center;
    vertical-align: middle;
}

Thay Đổi Kích Thước Của Cột:

css

/* Thay đổi kích thước của cột đầu tiên */
td:first-child {
    width: 30%;
}

Các ví dụ trên chỉ là một số cách bạn có thể tùy chỉnh bảng trong CSS. Bằng cách sử dụng các thuộc tính và kỹ thuật tùy chỉnh, bạn có thể tạo ra giao diện bảng đa dạng và phù hợp với thiết kế của trang web.

Dưới đây là một ví dụ cụ thể về cách tạo và tùy chỉnh một bảng trong HTML và CSS:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Custom Table Example</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>28</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>35</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Michael Johnson</td>
                <td>22</td>
                <td>Chicago</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS (styles.css):

css

/* Loại bỏ viền và khoảng cách mặc định của bảng */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 80%;
    margin: 0 auto;
}

/* Tạo viền cho bảng và ô */
table, th, td {
    border: 1px solid black;
}

/* Định dạng nền cho ô tiêu đề */
th {
    background-color: lightgrey;
    text-align: center;
}

/* Định dạng nền xen kẽ cho các ô */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Căn giữa văn bản trong ô */
td {
    text-align: center;
    vertical-align: middle;
}

Trong ví dụ này, chúng ta đã tạo một bảng hiển thị thông tin về người dùng với các cột là “Name,” “Age,” và “City.” Chúng ta đã sử dụng CSS để tùy chỉnh giao diện của bảng, bao gồm viền, nền, căn giữa văn bản, và kích thước của bảng.

Leave a Comment Cancel Reply