Как сделать - Таблица сравнения
Узнать, как создать таблицу сравнения с помощью CSS.
Таблица сравнения
| Особенности | Основной | Профессиональный |
|---|---|---|
| Образец текста | ||
| Образец текста | ||
| Образец текста | ||
| Образец текста | ||
| Образец текста |
Создать таблицу сравнения
Шаг 1) Добавить HTML:
Пример
<!-- Библиотека Иконок Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table>
<tr>
<th style="width:50%">Особенности</th>
<th>Основной</th>
<th>Профессиональный</th>
</tr>
<tr>
<td>Образец текста</td>
<td><i class="fa fa-remove"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Образец текста</td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
</table>Шаг 2) Добавить CSS:
Пример
/* Стиль таблицы */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
/* Стиль заголовков таблиц и табличных данных */
th, td {
text-align: center;
padding: 16px;
}
th:first-child, td:first-child {
text-align: left;
}
/* Зебра-полосатые строки таблицы */
tr:nth-child(even) {
background-color: #f2f2f2
}
.fa-check {
color: green;
}
.fa-remove {
color: red;
}Редактор кода »