Стили таблиц

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


Компания Контакт Страна
Alfreds Futterkiste Maria Anders Германия
Berglunds snabbköp Christina Berglund Швеция
Centro comercial Moctezuma Francisco Chang Мексика
Ernst Handel Roland Mendel Австрия

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

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

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


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

Результат:

Firstname Lastname
Peter Griffin
Lois Griffin

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

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


table {
  width: 100%;
}

Результат:

Firstname Lastname
Peter Griffin
Lois Griffin

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

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

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

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

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

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

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


table {
  border-collapse: collapse;
}

Результат:

Firstname Lastname
Peter Griffin
Lois Griffin

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


table {
  border: 1px solid black;
}

Результат:

Firstname Lastname
Peter Griffin
Lois Griffin

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

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

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


table {
  width: 100%;
}

th {
  height: 70px;
}

Результат:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

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


table {
  width: 50%;
}

Результат:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

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

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

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

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


td {
  text-align: center;
}

Результат:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

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


th {
  text-align: left;
}

Результат:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

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

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

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

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


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

Результат:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

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

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

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Пример:


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

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

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

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Пример:


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

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

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

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Пример:


tr:hover {
  background-color: coral;
}

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

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

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Пример:


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

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

Свойство Описание
border Короткое свойство, определяющее все атрибуты рамки за одну декларацию
border-collapse Определяет, какую модель рамки вокруг ячеек таблицы следует использовать
border-spacing Определяет расстояние между рамками соседних ячеек таблицы
caption-side Определяет, где будет отображаться заголовок таблицы
empty-cells Определяет отображение границ и фона в ячейке таблицы, если она пустая
table-layout Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом