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;    
}