Tables таблица CSS уроки для начинающих академия

❮ Назад Дальше ❯

Внешний вид таблицы HTML может быть значительно улучшен с помощью CSS:

КомпанияКонтактСтрана
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Границы таблицы

Чтобы задать границы таблицы в 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 NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Добавьте свойство border-bottom в <th> и <TD> для горизонтальных разделителей:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}

Hoverable Таблица

Используйте селектор :hover на <TR>, чтобы выделить строки таблицы при наведении указателя мыши:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример

tr:hover {background-color: #f5f5f5;}

Striped Таблицы

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Для таблиц, чередующихся с зебрами, используйте селектор nth-child() и добавьте background-color ко всем четным (или нечетным) строкам таблицы:

Пример

tr:nth-child(even) {background-color: #f2f2f2;}

Цвет таблицы

В приведенном ниже примере указывается цвет фона и цвет текста <th> элементов:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример

th {
    background-color: #4CAF50;
    color: white;
}

Отзывчивый стол

Реагирующая таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого:

Добавьте элемент контейнера (например, < div >) с overflow-x:auto вокруг <TABLE> элемента, чтобы сделать его отзывчивым:

Пример

<div>

<table>
.

.. table content …
</table>

</div>

Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка»).

Другие примеры

Сделать причудливый стол
В этом примере демонстрируется создание причудливой таблицы.

Задание положения заголовка таблицы
В этом примере демонстрируется расположение заголовка таблицы.

Свойства таблицы CSS

СвойствоОписание
borderЗадает все свойства границы в одном объявлении
border-collapseУказывает, следует ли свернуть границы таблицы
border-spacingОпределяет расстояние между границами соседних ячеек
caption-sideЗадает размещение заголовка таблицы
empty-cellsУказывает, отображать ли границы и фон на пустых ячейках таблицы
table-layoutЗадает алгоритм компоновки, используемый для таблицы

❮ Назад Дальше ❯

Таблица в CSS — шпаргалка для начинающих

Внешний вид HTML-таблиц можно существенно усовершенствовать с помощью CSS:

  • Границы таблицы CSS
  • Объединение границ в таблице CSS
  • Ширина и высота таблицы CSS
  • Выравнивание по горизонтали
  • Выравнивание по вертикали
  • Поля таблицы CSS
  • Горизонтальные разделители
  • Таблица с hover-эффектом
  • Полосатая таблица
  • Цвет таблицы
  • Адаптивная таблица
  • Больше примеров
    • Создаем причудливую таблицу
    • Выставляем расположение подписи таблицы
  • CSS-свойства таблицы

Чтобы задать границы таблицы CSS , воспользуйтесь свойством border.

В примере ниже элементам <table>, <th> и <td> задается черная граница:

Пример

table, th, td {
   border: 1px solid black;
}

Обратите внимание, что у таблицы в приведенном выше примере двойная граница. Это из-за того, что и у <table>, и у <th> и <td> выставлены отдельные свойства границы.

Свойство border-collapse определяет, нужно ли объединять двойную границу в одну:

Пример

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

Если вам нужна простая контурная рамка вокруг всей красивой таблицы CSS, то свойство border нужно применять к элементу <table>:

Пример

table {
    border: 1px solid black;
}

Ширина и высота таблицы определяется свойствами width и height.

В приведенном ниже примере ширина таблицы выставлена на 100%, а высота элементов <th> на 50px:

Пример

table {
    width: 100%;
}
th {
    height: 50px;
}

Свойство text-align предназначено для горизонтального выравнивания (по левому и правому краю, по центру) содержимого элементов <th> и <td>.

По умолчанию, содержимое элементов <th> выравнивается по центру, а элементов <td> — по левому краю.

В приведенном ниже примере оформления таблицы CSS к содержимому элементов <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;
}

Можно использовать свойство border-bottom в элементах <th> и <td>, чтобы отделить строки CSS таблицы друг от друга горизонтальным разделителем:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}

Воспользуйтесь селектором :hover в элементе <tr>, чтобы подсветить ячейки при наведении на них курсора мыши.

Пример

tr:hover {background-color: #f5f5f5}

Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child(), и задайте всем четным и нечетным строкам разный цвет.

Пример

tr:nth-child(even) {background-color: #f2f2f2}

В приведенном ниже примере показано, как задавать цвет фона и текста для элементов <th>:

Пример

th {
    background-color: #4CAF50;
    color: white;
}

Адаптивная таблица CSS будет показывать горизонтальный скроллинг, если окажется слишком большой для страницы или экрана.

Добавьте <div> с заданным свойством overflow-x: auto для элемента <table>, чтобы сделать таблицу адаптивной.

Пример

<div>
<table>
... содержимое таблицы ...
</table>
</div>

В этом примере показано, как можно создать забавную таблицу с помощью каскадных таблиц стилей CSS.

В данном примере показано, как можно расположить подпись к таблице при помощи CSS.

СвойстваОписание
borderПозволяет одним выражением установить сразу все границы
border-collapseПозволяет объединять двойные границы в одну
border-spacingПозволяет указать расстояние между смежными ячейками
caption-sideОтвечает за положение подписи к таблице
empty-cellsПозволяет показать или скрыть границы для пустых ячеек в таблице
table-layoutПозволяет использовать в таблице шаблонный алгоритм

Пожалуйста, опубликуйте ваши отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, отклики, подписки, лайки!

Валентин Сейидовавтор-переводчик статьи «CSS Tables»

Таблицы стилей CSS

❮ Назад Далее ❯

Внешний вид HTML-таблицы можно значительно улучшить с помощью CSS:

Компания Контакт Страна
Альфред Футтеркисте Мария Андерс Германия
Берглундс снабжение Кристина Берглунд Швеция
Торговый центр Моктесума Франсиско Чанг Мексика
Эрнст Гендель Роланд Мендель Австрия
Островная торговля Хелен Беннет Великобритания
Кениглич Эссен Филип Крамер Германия
Винные погреба Смеющегося Вакха Йоши Таннамури Канада
Магазин Алиментари Риунити Джованни Ровелли Италия

Попробуйте сами »

Границы таблицы

Чтобы указать границы таблицы в CSS, используйте свойство border .

В приведенном ниже примере указывается сплошная рамка для элементов

, для выделения строк таблицы мышью сверху:

и:

Имя Фамилия
Питер Гриффин
Лоис Гриффин

Пример

table, th, td {
  граница: 1px сплошная;
}

Попробуйте сами »

Таблица полной ширины

В некоторых случаях приведенная выше таблица может показаться маленькой. Если вам нужна таблица, которая должна занимать весь экран (во всю ширину), добавьте width: 100% к Элемент

:

Имя Фамилия
Питер Гриффин
Лоис Гриффин

Пример

таблица {
  ширина: 100 %;
}

Попробуйте сами »

Двойные границы

Обратите внимание, что таблица в приведенных выше примерах имеет двойные границы. Это потому что и таблица, и элементы

 и имеют отдельные границы.

Чтобы удалить двойные границы, взгляните на пример ниже.

Свернуть границы таблицы

Свойство border-collapse устанавливает границы таблицы должны быть свернуты в одну границу:

Имя Фамилия
Питер Гриффин
Лоис Гриффин

Пример

стол {
  граница-коллапс: коллапс;
}

Попробуйте сами »

Если вам нужна только рамка вокруг таблицы, укажите свойство border только для <таблица>:

Имя Фамилия
Питер Гриффин
Лоис Гриффин

Пример

стол {
  граница: сплошная 1 пиксель;
}

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

3 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Стиль таблицы CSS

❮ Предыдущий Далее ❯

Заполнение таблицы

Для управления пространством между границей и содержимым таблицы используйте padding свойство on Элементы

 и:

Имя Фамилия Сбережения
Петр Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Пример

т, тд {
отступ: 15 пикселей;
 выравнивание текста: по левому краю;
}

Попробуйте сами »

Горизонтальные разделители

Имя Фамилия Экономия
Питер Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Добавьте свойство border-bottom в

 и для горизонтальных разделителей:

Пример

th, td {
  border-bottom: 1px solid #ddd;
}

Попробуйте сами »

Hoverable Table

Используйте селектор :hover на

Имя Фамилия Сбережения
Питер Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Пример

tr:hover {background-color: coral;}

Попробуйте сами »

Полосатые таблицы

Имя Фамилия Сбережения
Питер Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Для столов с полосками зебры используйте номер nth-child() селектор и добавьте background-color ко всем четным (или нечетным) строкам таблицы:

Пример

tr:nth-child(even) {background-color: #f2f2f2;}

Попробуйте сами »

Цвет таблицы

В приведенном ниже примере указан цвет фона и цвет текста элементы:

Имя Фамилия Сбережения
Питер Гриффин 100 долларов
Лоис Гриффин 150 долларов
Джо Суонсон 300 долларов

Пример

th {
  background-color: #04AA6D;
  цвет: белый;
}

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

2 Top3 References Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.