Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
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.
Features | Basic | Pro |
---|---|---|
Sample text | ||
Sample text | ||
Sample text | ||
Sample text | ||
Sample text | ||
Sample text |
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"> </i></td> <td><i class="fa fa-check"> </i></td> </tr> <tr> <td>Sample text</td> <td><i class="fa fa-check"> </i></td> <td><i class="fa fa-check"> </i></td> </tr> <tr> <td>Sample text</td> <td><i class="fa fa-check"> </i></td> <td><i class="fa fa-check"> </i></td> </tr> <tr> <td>Sample text</td> <td><i class="fa fa-remove"> </i></td> <td><i class="fa fa-check"> </i></td> </tr> <tr> <td>Sample text</td> <td><i class="fa fa-check"> </i></td> <td><i class="fa fa-check"> </i></td> </tr> <tr> <td>Sample text</td> <td><i class="fa fa-remove"> </i></td> <td><i class="fa fa-check"> </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; }