CSS Таблица
Использование CSS может сделать HTML-таблицы более красивыми.
| Компания | Контакты | Страна |
|---|---|---|
| Alfreds Futterkiste | Мария Андерс | Германия |
| Berglunds snabbköp | Кристина Берглунд | Швеция |
| Торговый центр Моктесума | Франсиско Чанг | Мексика |
| Эрнст Хандель | Роланд Мендель | Австрия |
| Айленд Трейдинг | Хелен Беннетт | Великобритания |
| Кёниглих Эссен | Филип Крамер | Германия |
| Винные погреба Смеющегося Вакха | Ёси Таннамури | Канада |
| Объединённые продовольственные склады | Джованни Ровелли | Италия |
| North/South | Саймон Краутер | Великобритания |
| Парижские деликатесы | Мари Бертран | Франция |
| Большой сыр | Лиз Никсон | США |
| Вафельница | Палле Ибсен | Дания |
Границы таблицы
Чтобы задать границы таблицы CSS, используйте свойство border.
В следующем примере задается черная граница для элементов Th и TD таблицы:
Обратите внимание, что таблица в примере выше имеет двойные границы. Это потому, что таблица и элементы th/td имеют отдельные границы.
Чтобы отобразить одну границу для таблицы, используйте свойство border-collapse.
Схлопывание границ
Свойство border-collapse определяет, схлопываются ли границы таблицы в одну границу или разделяются:
Пример
Попробуйте сами »
Ширина и высота таблицы
Свойства width и height определяют ширину и высоту таблицы.
В следующем примере задается таблица с шириной 100% и элементы th с высотой 50 пикселей:
Выравнивание текста в таблице
Свойства выравнивания текста и вертикального выравнивания в таблицах.
Свойство text-align задаёт горизонтальное выравнивание: left, right или center:
Свойство вертикального выравнивания задаёт вертикальное выравнивание, например top, bottom или middle:
Внутренние отступы в таблице
Чтобы управлять расстоянием между границей и содержимым таблицы, используйте свойство padding для элементов td и th:
Цвета таблицы
以下示例指定了边框的颜色，以及 th 元素的文本和背景颜色：
Пример
Попробуйте сами »
Другие примеры
创建个性化表格
本示例演示如何创建个性化表格。
Задайте позицию заголовка таблицы
本示例演示如何定位表格标题。