Ячейки html таблицы могут содержать

HTML Таблицы

Если вы не укажете границу для таблицы, она будет отображаться без границ. Граница устанавливается с помощью CSS свойства border :

Пример

HTML Таблица — Свернутые границы — border-collapse

Пример

HTML Таблица — Добавление отступа в ячейках — padding

Отступ (padding) в ячейке определяет пространство между содержимым ячейки и ее границами. Если вы не укажете отступ (padding), ячейки таблицы будут отображаться без отступа. Чтобы установить отступ, используйте CSS свойство padding :

Пример

HTML Таблица — Заголовки по левому краю — text-align

По умолчанию заголовки таблицы выделены жирным шрифтом и выравнены по центру. Чтобы выровнять заголовки таблицы по левому краю, используйте CSS свойство text-align :

Пример

HTML Таблица — Добавление интервала границы — border-spacing

Интервал границы (border spacing) определяет пространство между ячейками. Чтобы установить интервал границ для таблицы, используйте CSS свойство border-spacing :

Пример

Примечание: Если таблица имеет свернутые границы (т.е. значение border-collapse ), то border-spacing не действует.

HTML Таблица — Ячейки, которые охватывают много столбцов — colspan

Пример

HTML Таблица — Ячейки, которые охватывают много строк — rowspan

Пример

HTML Таблица — Добавление подписи — caption

Пример

Специальный стиль для одной таблицы — атрибут Id

Пример

Теперь вы можете определить специальный стиль для этой таблицы:

И добавить больше стилей:

table#t01 tr:nth-child(even) <
background-color: #eee;
>
table#t01 tr:nth-child(odd) <
background-color: #fff;
>
table#t01 th <
color: white;
background-color: black;
>

Резюме раздела

HTML Упражнения

HTML Теги таблицы

Тег	Описание
	Определяет таблицу
	Определяет ячейку заголовка в таблице
	Определяет строку в таблице
	Определяет ячейку в таблице
	Определяет подпись таблицы
	Определяет группу из одного или нескольких столбцов в таблице для форматирования
	Определяет свойства столбца для каждого столбца в элементе
	Группирует содержимое заголовка в таблице
	Группирует содержимое body в таблице
	Группирует содержимое footer в таблице

Для получения полного списка всех доступных тегов HTML, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

• Для чего нужны HTML-таблицы?
• Какой тег определяет HTML-таблицу?
• Каким тегом определяется каждая строка HTML-таблицы?
• Каким тегом определяется каждый заголовок HTML-таблицы?
• Каким тегом определяется каждая ячейка с данными HTML-таблицы?
• Какие элементы могут содержать ячейки с данными HTML-таблицы?
• С помощью какого CSS-свойства можно добавить границу к HTML-таблице?
• С помощью какого CSS-свойства можно свернуть границы HTML-таблицы в одну линию?
• Как добавить внутренний отступ в ячейках HTML-таблицы?
• Как выровнять заголовки HTML-таблицы по левому краю?
• Как добавить интервал между границами HTML-таблицы?
• Как сделать ячейку, которая охватывает более одного столбца HTML-таблицы?
• Как сделать ячейку, которая охватывает более одной строки HTML-таблицы?
• Как добавить подпись к HTML-таблице?
• Где нужно вставить тег HTML-таблицы?
• Как определить специальный стиль для одной конкретной HTML-таблицы?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Источник