CSS Таблицы
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
Внешний вид HTML таблицы может быть значительно улучшен с помощью CSS:
| Company | Contact | Country |
|---|---|---|
| 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 |
Попробуйте сами »
Border - Границы таблицы
Чтобы указать границы таблицы в CSS, используйте свойство border.
В приведенном ниже примере указывается черная граница для элементов <table>, <th> и <td>:
Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это связано с тем, что элементы <table>, <th> и <td> имеют разные границы.
Border-Collapse - Свёртывание границ таблицы
Свойство border-collapse устанавливает, должны ли границы таблицы быть объединены в одну границу (т.е. свёрнуты):
Пример
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
}
Попробуйте сами »
Если вам нужна только рамка вокруг таблицы, укажите только свойство border для <table>:
Width/Height - Ширина и высота таблицы
Ширина и высота таблицы определяются с помощью свойств width и height.
В приведенном ниже примере ширина таблицы устанавливается на 100%, а высота элементов <th> 50px:
Text-align - Горизонтальное выравнивание
Свойство text-align устанавливает горизонтальное выравнивание (например слева, справа или по центру) содержимого в элементах <th> или <td>.
По умолчанию содержимое элементов <th> выравнивается по центру, а содержимое элементов <td> выравнивается по левому краю.
В следующем примере текст выравнивается по левому краю элементов <th>:
Vertical-align - Вертикальное выравнивание
Свойство vertical-align устанавливает вертикальное выравнивание (например, верх, низ или середина) содержимого в <th> или <td>.
По умолчанию вертикальное выравнивание содержимого в таблице является посередине (для обоих элементов <th> и <td>).
В следующем примере устанавливается вертикальное выравнивание текста по низу для элементов <td>
Padding - Отступы в таблице
Чтобы контролировать пространство между границей и содержимым таблицы, используйте свойство
padding в элементах <td> и <th>:
Горизонтальные делители
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Добавьте свойство border-bottom в <th> и <td> для установки горизонтальных делителей в таблице:
Выделение строк таблицы с помощью мыши
Используйте селектор :hover на <tr> чтобы выделить строки таблицы при наведении на них мыши:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Полосатые таблицы
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Для таблиц с полосками зебры используйте селектор nth-child() и добавьте background-color для всех чётных (или нечётных) строк таблицы:
Цвета таблицы
Пример ниже определяет цвет фона и цвет текста элементов <th>:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Responsive Table - Отзывчивая (адаптивная) таблица
Адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения всего содержимого:
| 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>, чтобы сделать его адаптивным:
Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено "overflow: scroll").
Больше примеров
Сделать красивую таблицу
Этот пример демонстрирует, как создать красивую таблицу.
Установить положение заголовка таблицы
Этот пример демонстрирует, как расположить заголовок таблицы.
Проверьте себя с помощью упражнений!
Свойства CSS таблицы
| Свойство | Описание |
|---|---|
| border | Устанавливает все свойства границы в одном объявлении |
| border-collapse | Указывает, должны ли быть свёрнуты границы таблицы |
| border-spacing | Определяет расстояние между границами соседних ячеек |
| caption-side | Определяет размещение заголовка таблицы |
| empty-cells | Указывает, следует ли отображать границы и фон для пустых ячеек в таблице |
| table-layout | Устанавливает алгоритм макета для таблицы |