thực hành - bảng sọc ngựa vằn

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

Bảng sọc ngựa vằn

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 sọc ngựa vằn

Bước 1) Thêm HTML:

Ví dụ

<table>
    <tr>
        <th style="width:33%">Name</th>
        <th style="width:33%">Country</th>
        <th style="width:33%">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;
    width:100%;
}
/* Tạo hiệu ứng sọc ngựa vằn cho các hàng lẻ */
table tr:nth-child(odd) {
    background-color:#FF9;    
}
/* 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;    
}