CSS Tables - Таблица
Внешний вид таблицы HTML может быть значительно улучшен с помощью CSS:
Компания | Контакт | Страна |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Berglunds snabbköp | Christina Berglund | Sweden |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Königlich Essen | Philip Cramer | Germany |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Границы таблицы
Чтобы задать границы таблицы в CSS, используйте свойство border
.
В приведенном ниже примере указывается черная граница для элементов <TABLE>, <th> и <TD>:
Пример
table, th, td {
border: 1px solid black;
}
Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это связано с тем, что оба элемента таблицы и <th> и <TD> имеют отдельные границы.
Свернуть границы таблицы
Свойство border-collapse
задает, следует ли свернуть границы таблицы в одну границу:
Пример
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
}
Если требуется только граница вокруг таблицы, укажите только свойство border
для <TABLE>:
Пример
table
{
border: 1px solid black;
}
Ширина и высота таблицы
Ширина и высота таблицы определяются свойствами width
и height
.
В приведенном ниже примере устанавливается ширина таблицы 100%, а высота <th> элементов 50px:
Пример
table
{
width: 100%;
}
th
{
height: 50px;
}
Выравнивание по горизонтали
Свойство text-align
задает выравнивание по горизонтали (например, влево, вправо или по центру) содержимого в <th> или <TD>.
По умолчанию содержимое элементов <th> выравнивается по центру, а содержимое элементов <TD> выравнивается по левому краю.
В следующем примере выравнивание текста по левому краю в <th> элементах:
Пример
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;
}
Горизонтальные разделители
First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Добавьте свойство border-bottom
в <th> и <TD> для горизонтальных разделителей:
Пример
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Таблица
Используйте селектор :hover
на <TR>, чтобы выделить строки таблицы при наведении указателя мыши:
First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Пример
tr:hover {background-color: #f5f5f5;}
Striped Таблицы
First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Для таблиц, чередующихся с зебрами, используйте селектор nth-child()
и добавьте background-color
ко всем четным (или нечетным) строкам таблицы:
Пример
tr:nth-child(even) {background-color: #f2f2f2;}
Цвет таблицы
В приведенном ниже примере указывается цвет фона и цвет текста <th> элементов:
First Name | Last Name | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Пример
th {
background-color: #4CAF50;
color: white;
}
Отзывчивый стол
Реагирующая таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого:
First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Eve | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Добавьте элемент контейнера (например, < div >) с overflow-x:auto
вокруг <TABLE> элемента, чтобы сделать его отзывчивым:
Пример
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано "переполнение: прокрутка").
Другие примеры
Сделать причудливый стол
В этом примере демонстрируется создание причудливой таблицы.
Задание положения заголовка таблицы
В этом примере демонстрируется расположение заголовка таблицы.
Свойства таблицы CSS
Свойство | Описание |
---|---|
border | Задает все свойства границы в одном объявлении |
border-collapse | Указывает, следует ли свернуть границы таблицы |
border-spacing | Определяет расстояние между границами соседних ячеек |
caption-side | Задает размещение заголовка таблицы |
empty-cells | Указывает, отображать ли границы и фон на пустых ячейках таблицы |
table-layout | Задает алгоритм компоновки, используемый для таблицы |