Стили таблиц

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


КомпанияКонтактСтрана
Alfreds FutterkisteMaria AndersГермания
Berglunds snabbköpChristina BerglundШвеция
Centro comercial MoctezumaFrancisco ChangМексика
Ernst HandelRoland MendelАвстрия

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

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

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


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

Результат:

FirstnameLastname
PeterGriffin
LoisGriffin

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

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


table {
  width: 100%;
}

Результат:

FirstnameLastname
PeterGriffin
LoisGriffin

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

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

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

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

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

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

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


table {
  border-collapse: collapse;
}

Результат:

FirstnameLastname
PeterGriffin
LoisGriffin

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


table {
  border: 1px solid black;
}

Результат:

FirstnameLastname
PeterGriffin
LoisGriffin

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

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

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


table {
  width: 100%;
}

th {
  height: 70px;
}

Результат:

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

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


table {
  width: 50%;
}

Результат:

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

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

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

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

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


td {
  text-align: center;
}

Результат:

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

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


th {
  text-align: left;
}

Результат:

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

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

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

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

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


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

Результат:

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

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

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

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример:


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

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

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

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример:


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

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

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

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример:


tr:hover {
  background-color: coral;
}

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

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

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример:


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

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

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