Внешний вид HTML-таблицы может быть значительно улучшена с помощью CSS:
| Компания | контакт | Страна |
|---|---|---|
| Alfreds Futterkiste | Мария Андерс | Германия |
| Berglunds snabbkop | Кристина Берглунд | Швеция |
| Centro Comercial Moctezuma | Франциско Чанг | Мексика |
| Ernst Handel | Roland Мендель | Австрия |
| Остров Торговый | Хелен Беннетт | Великобритания |
| Koniglich Эссен | Филипп Крамер | Германия |
| Laughing Вакх винными погребами | Йоши Tannamuri | Канада |
| Magazzini Alimentari Риунити | Джованни Ровелли | Италия |
Таблица Границы
Чтобы определить границы таблицы в CSS, используйте border собственности.
В приведенном ниже примере определяет черную рамку для <table> , <th> и <td> элементы:
Обратите внимание на то, что таблица в приведенном выше примере имеет двойные границы. Это потому , что как таблица и <th> и <td> элементы имеют отдельные границы.
Collapse границы таблицы
border-collapse свойство устанавливает ли границы таблицы должны быть свернуты в одну границу:
пример
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
} Попробуй сам " Если вы хотите только рамку вокруг таблицы, только указать border свойство для <table> :
Таблица Ширина и высота
Ширина и высота таблицы определяются width и height свойства.
В приведенном ниже примере задает ширину таблицы до 100%, а высота <th> элементы для 50px:
Горизонтальное выравнивание
text-align свойство задает горизонтальное выравнивание (например , влево, вправо, или центра) контента в <th> или <td> .
По умолчанию, содержание <th> элементы выравниваются по центру и содержание <td> элементы выравниваются по левому краю.
Следующий пример выравнивает влево текст в <th> элементы:
Вертикальное выравнивание
vertical-align свойство устанавливает вертикальное выравнивание (например , сверху, снизу или посередине) контента в <th> или <td> .
По умолчанию вертикальное выравнивание содержимого в таблице средний (для обоих <th> и <td> элементы).
Следующий пример устанавливает вертикальное выравнивание текста в нижней части для <td> элементы:
Таблица Перетяжка
Для того, чтобы контролировать пространство между границей и содержимым в таблице, используйте padding свойство на <td> и <th> элементы:
Горизонтальные разделители
| Имя | Фамилия | экономия |
|---|---|---|
| Питер | Грифон | $ 100 |
| Лоис | Грифон | $ 150 |
| Джо | Swanson | $ 300 |
Добавьте border-bottom свойство <th> и <td> для горизонтальных разделителей:
Hoverable Таблица
Используйте :hover селектор на <tr> , чтобы выделить строки таблицы при наведении мыши:
| Имя | Фамилия | экономия |
|---|---|---|
| Питер | Грифон | $ 100 |
| Лоис | Грифон | $ 150 |
| Джо | Swanson | $ 300 |
Полосатые Столы
| Имя | Фамилия | экономия |
|---|---|---|
| Питер | Грифон | $ 100 |
| Лоис | Грифон | $ 150 |
| Джо | Swanson | $ 300 |
Для зебры полосатые таблиц, используйте nth-child() селектор и добавить background-color для всех четных (или нечетных) строк таблицы:
Таблица цветов
В приведенном ниже примере задает цвет фона и цвет текста <th> элементов:
| Имя | Фамилия | экономия |
|---|---|---|
| Питер | Грифон | $ 100 |
| Лоис | Грифон | $ 150 |
| Джо | Swanson | $ 300 |
Отзывчивый Таблица
Чуткий таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал, чтобы отобразить полное содержание:
| Имя | Фамилия | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Джил | кузнец | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| Ева | Джексон | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| Адам | Джонсон | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Добавьте элемент контейнера (например , <div> ) с overflow-x:auto вокруг <table> элемент , чтобы сделать его отзывчивым:
Еще примеры
Сделать фантазии таблицу
Этот пример демонстрирует, как создать причудливую таблицу.
Установите положение заголовка таблицы
Этот пример демонстрирует, как позиционировать заголовок таблицы.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
Свойства CSS Таблица
| Имущество | Описание |
|---|---|
| border | Устанавливает все свойства рамки в одной декларации |
| border-collapse | Указывает, должен ли быть свернуты границы таблицы |
| border-spacing | Задает расстояние между границами соседних ячеек |
| caption-side | Определяет размещение в заголовок таблицы |
| empty-cells | Указывает, следует ли отображать или нет границ и фона на пустых ячеек в таблице |
| table-layout | Задает алгоритм компоновки для использования таблицы |