thực hành - tạo bảng so sánh

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

Bảng so sánh chức năng


Features Basic Pro
Sample text    
Sample text    
Sample text    
Sample text    
Sample text    
Sample text    

 

Xem kết quả

Cách tạo bảng so sánh chức năng


Bước 1) Thêm HTML:

Ví dụ

<table>
    <tr>
        <th>Features</th>
        <th>Basic</th>
        <th>Pro</th>
    </tr>
    <tr>
        <td>Sample text</td>
        <td><i class="fa fa-remove">&nbsp;</i></td>
        <td><i class="fa fa-check">&nbsp;</i></td>
    </tr>
    <tr>
        <td>Sample text</td>
        <td><i class="fa fa-check">&nbsp;</i></td>
        <td><i class="fa fa-check">&nbsp;</i></td>
    </tr>
    <tr>
        <td>Sample text</td>
        <td><i class="fa fa-check">&nbsp;</i></td>
        <td><i class="fa fa-check">&nbsp;</i></td>
    </tr>
    <tr>
        <td>Sample text</td>
        <td><i class="fa fa-remove">&nbsp;</i></td>
        <td><i class="fa fa-check">&nbsp;</i></td>
    </tr>
    <tr>
        <td>Sample text</td>
        <td><i class="fa fa-check">&nbsp;</i></td>
        <td><i class="fa fa-check">&nbsp;</i></td>
    </tr>
    <tr>
        <td>Sample text</td>
        <td><i class="fa fa-remove">&nbsp;</i></td>
        <td><i class="fa fa-check">&nbsp;</i></td>
    </tr>
</table>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho bảng */
table {
    width:100%;
    border-collapse:collapse;
    border:1px solid #ddd;
    border-bottom:none;    
}
table tr {
    border-bottom:1px solid #ddd;    
}
/* Thêm màu nền cho các phần tử tr số lẻ */
table tr:nth-child(odd) {
    background-color:#f1f1f1;
}
/* Tạo kiểu cho phần tử th, td */
table tr th, table tr td {
    padding:10px;
    user-select:none;
    width:33.33%;
    text-align:center;    
}
table tr th {
    background-color:lightblue;    
}
/* Phần tử th, td đầu tiên sẽ căn trái */
table tr th:first-child, table tr td:first-child {
    text-align:left;    
}
.fa-check {
    color:green;    
}
.fa-remove {
    color:red;    
}

Xem kết quả