Стили таблиц

Внешний вид HTML таблиц можно при помощи CSS значительно улучшить.

Рамка таблицы

Чтобы при помощи CSS определить у таблицы рамку, используется свойство border.

В следующем примере определяется сплошная рамка для элементов <table>, <th> и <td>:

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

Результат:

Таблица на всю ширину

Таблица из предыдущего примера в некоторых случаях смотрится слишком маленькой. Если же вам нужна таблица, которая должна занимать всю ширину экрана, то добавьте свойства width: 100%; к элементу <table>:

table {
  width: 100%;
}

Результат:

Обратите внимание, что у таблиц из предыдущих примеров двойная рамка. Это происходит из-за того, что у самой таблицы и у элементов <th> и <td> свои собственные отдельные рамки.

Чтобы убрать двойные рамки, смотрите пример далее.

Объединение рамок таблиц

Свойство border-collapse определяет, должны ли рамки таблицы объединиться в одну общую рамку.

Свойство border-collapse может принимать следующие значения:

• separate - Значение по умолчанию. Каждая ячейка таблицы будет иметь собственную рамку.
• collapse - Ячейки таблицы будут иметь общую рамку.
• initial - Устанавливает значение по умолчанию.
• inherit - Значение наследуется от родительского элемента.

В следующем примере рамки таблицы объединяются в одну единую рамку:

table {
  border-collapse: collapse;
}

Результат:

Если вы хотите, чтобы рамка была только у самой таблицы, а не у ее ячеек, определите свойство border только для элемента <table>:

table {
  border: 1px solid black;
}

Результат:

Ширина и высота таблицы

Ширина и высота таблицы определяется при помощи свойств width и height.

В следующем примере устанавливается ширина таблицы 100% и высота элемента <th> 70px:

table {
  width: 100%;
}

th {
  height: 70px;
}

Результат:

Чтобы таблица занимала только половину страницы, используйте значение width: 50%:

table {
  width: 50%;
}

Результат:

Выравнивание по горизонтали

При помощи свойства text-align можно определить выравнивание по горизонтали содержимого ячеек <th> или <td>.

По умолчанию содержимое элемента <th> горизонтально выравнивается по центру, а элемента <td> по левому краю.

Чтобы содержимое элемента <td> также выравнивалось по центру, используйте свойство text-align: center:

td {
  text-align: center;
}

Результат:

Чтобы выровнять содержимое элемента <th> по левому краю, используйте свойство text-align: left:

th {
  text-align: left;
}

Результат:

Выравнивание по вертикали

При помощи свойства vertical-align можно определить выравнивание по вертикали содержимого ячеек <th> или <td>.

По умолчанию содержимое обоих элементов <th> и <td> выравнивается по середине.

В следующем примере содержимое элемента <td> по вертикали выравнивалось по нижнему краю:

td {
  height: 50px;
  vertical-align: bottom;
}

Результат:

Отступы в ячейках таблицы

Чтобы контролировать размер отступов между границей ячейки таблицы и ее содержимым, используется свойство padding для элементов <td> и <th>:

Пример:

th, td {
  padding: 15px;
  text-align: left;
}

Горизонтальные разделители

Чтобы создать горизонтальные разделители между строками таблицы, добавьте свойство border-bottom к элементам <th> и <td>:

Пример:

th, td {
  border-bottom: 1px solid #ddd;
}

Таблица с эффектом при наведении курсора мыши

Если определить селектор :hover для элемента <tr>, то можно создать эффект подсвечивания при наведении курсора мыши на строку таблицы:

Пример:

tr:hover {
  background-color: coral;
}

Полосатые таблицы

Чтобы создать полосатую таблицу, используется селектор nth-child(even) для четных строк таблицы или nth-child(odd) для нечетных строк таблицы со свойством background-color:

Пример:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Все CSS свойства определения стилей таблиц