Стилизация HTML-таблиц с помощью CSS

Краткое руководство по работе с таблицами в CSS

Таблицы в прошлом очень часто использовались в CSS, поскольку они были одним из единственных способов создания красивого макета страницы.

Сегодня с помощью Grid и Flexbox мы можем вернуть таблицы к той работе, для которой они были предназначены: стилизации таблиц.

Начнем с HTML. Это основная таблица:

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Flavio</th>
      <td>36</td>
    </tr>
    <tr>
      <th scope="row">Roger</th>
      <td>7</td>
    </tr>
  </tbody>
</table>

По умолчанию это не очень привлекательно. Браузер предоставляет несколько стандартных стилей, и все:

Конечно, мы можем использовать CSS для стилизации всех элементов таблицы.

Начнем с границы. Хорошая граница может иметь большое значение.

Мы можем применить его наtableэлемент, а также внутренние элементы, напримерthиtd:

table, th, td {
  border: 1px solid #333;
}

Если мы соединим его с некоторым запасом, мы получим хороший результат:

Одна общая вещь с таблицами - это возможность добавить цвет к одной строке и другой цвет к другой строке. Это возможно с помощью:nth-child(odd)или же:nth-child(even)селектор:

tbody tr:nth-child(odd) {
  background-color: #af47ff;
}

Это дает нам:

Если вы добавитеborder-collapse: collapse;к элементу таблицы все границы сворачиваются в одну:

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: