thực hành - tạo bảng canh giữa

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách bố cục bảng canh giữa bằng HTML và CSS.

Bảng canh giữa


Name Country Gender
Glfreds Futterkiste Germany Female
Aerglunds snabbkop Sweden Male
Island Trading UK Male
Koniglich Essen Germany Female
Baughing Bacchus Winecellars Canada Female
Zagazzini Alimentari Riuniti Italy Male

 

Xem kết quả

Cách tạo Bảng canh giữa


Bước 1) Thêm HTML:

Ví dụ

<table>
    <tr>
        <th>Name</th>
        <th>Country</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td>Glfreds Futterkiste</td>
        <td>Germany</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Aerglunds snabbkop</td>
        <td>Sweden</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>UK</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Koniglich Essen</td>
        <td>Germany</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Baughing Bacchus Winecellars</td>
        <td>Canada</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Zagazzini Alimentari Riuniti</td>
        <td>Italy</td>
        <td>Male</td>
    </tr>
</table>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho bảng */
table {
    border:1px solid #ccc;    
    border-collapse:collapse;
    margin:auto; /* Bảng tự động canh giữa */
}
/* Thêm hiệu ứng khi hover */
table tr:hover:not(:first-child) {
    background-color:#ddd;    
}
table tr > th {
    background-color:lightblue;    
}
/* Tạo kiểu cho các cột */
table tr > th, td {
    padding:15px 10px;
    text-align:left;
    border:1px solid #aaa;    
}

Xem kết quả