Внешний вид 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 | Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом |