| Тег для создания таблицы.
|
|
|
Определяет тело таблицы.
|
| |
|
Создает ячейку таблицы.
|
|
|
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
|
|
|
Создает большие поля для ввода текста.
|
|
|
Определяет нижний колонтитул таблицы.
|
|
|
Создает заголовок ячейки таблицы.
|
|
|
Определяет заголовок таблицы.
|
|
|
Определяет дату/время.
|
|
|
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
|
| |
| Создает строку таблицы.
|
|
|
Добавляет субтитры для элементов и .
|
|
|
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
|
| |
Создает маркированный список.
|
|
|
Выделяет переменные из программ, отображая их курсивом.
|
|
|
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
|
|
|
Указывает браузеру возможное место разрыва длинной строки.
|
Таблица-шпаргалка с тегами
Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.
В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег ), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
Создание таблиц в HTML
Для описания таблиц используется тег . Тег , как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег
Тег (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы - тег
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами . Число тегов в строке определяет число ячеек
Таблица
| Если в таблице два
тега TR, то в ней две строки. |
| Если в строке три тега TD, |
то в ней |
три столбца. |
Заголовки столбцов таблицы - тег
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка (Таblе Неаder, заголовок таблицы). Эти теги подобны . Отличие состоит в том, что текст, заключенный между тегами , автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться с тегом и атрибутом , текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью .
Заголовок центрирован по умолчанию
Заголовок может объединять
столбцы
Заголовок может быть расположен
перед столбцами
| Текст или данные |
Текст или данные |
Заголовок может объединять
строки
| Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Использование заголовков таблицы - тег
Тег позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (), либо под таблицей (). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
Заголовок над таблицей
| Текст или данные |
Текст или данные |
Текст или данные |
Текст или данные |
Заголовок под таблицей
| Текст или данные |
Текст или данные |
Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами или длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги и модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
| Если вы хотите сделать какую-нибудь
ячейку шире, чем верхняя или нижняя,
|
можно воспользоваться атрибутом
СОLSPAN=2, |
| чтобы
растянуть ее над любым количеством
обычных ячеек. |
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах и , подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег , чтобы дать ширину всей таблицы, а можно использовать в тегах или , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
| Текст или данные -
ширина 100% |
или
| Текст или данные -
ширина 50% |
или
| Текст или данные -
ширина 200 пикселов |
или
| Текст или данные -
ширина 100 пикселов |
Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой . Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
Атрибуты АLIGN и VALIGN
Теги , и можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft
прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left
выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter
располагает содержимое ячейки по центру.
АLIGN=right
выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top
выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle
центрирует содержимое ячейки по вертикали.
VALIGN=bottom
выравнивает содержимое ячейки по ее нижней границе.
| Атрибут VALIGN осуществляет
выравнивание текста и графики внутри
ячейки по вертикали. |
верх, |
середина, |
низ. |
| VALIGN=top Выравнивает содержимое
ячейки по ее верхней границе. |
верх, |
верх, |
верх. |
| VALIGN=middle Центрирует содержимое
ячейки по вертикали. |
середина, |
середина, |
середина. |
| VALIGN=bottom Выравнивает содержимое
ячейки по ее нижней границе. |
низ, |
низ, |
низ. |
Атрибут BORDER
В теге часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав . Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные |
| Текст или данные |
|
Текст или данные |
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
| Текст или данные |
Текст или данные
|
Текст или данные |
| Текст или данные |
Текст или данные |
Текст или данные
|
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега красиво размещать на странице текст и графику. Пока тег остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью
Уральский государственный
педагогический университет
Добро пожаловать!
| Учебный курс
"Основы WEB-мастеринга" |
|
 Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег будет выглядеть примерно так:
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и |
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега |
использовать тег
. Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги |
и
нет.
Пример 12.1. Создание таблицы
Тег TABLE
Ячейка 1
Ячейка 2
| Ячейка 3 |
Ячейка 4 |
Порядок расположения ячеек и их вид показан на рис. 12.1.
1. Что такое HTML таблицы и зачем они нужны?
html таблицы
- это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице).
2. Какие теги у html таблиц?
Теги
, задающие таблицу html пишутся так:
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
| |
- строчка html таблицы
| - столбец (ячейка) html таблицы.
А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:
Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки):
Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:
|
- ячейка 1.1
|
- ячейка 1.2
|
- ячейка 1.3
|
- ячейка 2.1
|
- ячейка 2.2
|
- ячейка 2.3
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
3. Как задать фоновый цвет html таблиц?
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
Итак, для задания фона используется атрибут bgcolor="цвет_фона"
.
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
|
- ячейка 1.1
|
- ячейка 1.2
|
- ячейка 1.3
|
- ячейка 2.1
|
- ячейка 2.2
|
- ячейка 2.3
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
Если нужно задать фоновый цвет ряду
html таблицы, то тогда атрибут bgcolor="цвет_фона"
применяем к тегу :В этом случае, атрибут номер ячейки
задает белый цвет тексту, расположенному внутри тега.
Точно так же задается и цвет каждой ячейки отдельно
. Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега атрибут bgcolor="цвет_фона"
:
4. Как установить размер ширины и высоты ячеек html таблицы?
Итак, для того, что бы вручную установить ширину и высоту ячеек, используют атрибуты height и width. Их можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
height
- атрибут, устанавливающий высоту ячейки
width
- атрибут, задающий ширину ячейки
А теперь на примере:
Теперь объясню, почему мы задали высоту ячеек только один раз в каждой строке.
Если в ряду Вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. А ширину каждого ряда лучше всего задавать отдельно!
Вы можете задать высоту и ширину для всей таблицы. В этом случае все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им данные параметры персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Так же, очень часто приходится задавать высоту height и ширину width в процентах
:
| содержимое ячейки |
Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.
5. Как выровнять текст внутри html таблицы?
А теперь давайте разберемся, как выровнять текст в нашей html таблице по левому краю, по правому краю и по центру.
Делается это с помощью атрибута:
align=”left”
- выравнивает текст внутри html таблицы по левому краю
align=”center”
- выравнивает текст html таблицы по центру
align=”right”
- выравнивает текст внутри html таблицы по правому краю
Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом атрибут align принимать не может.
Например, код html таблицы, текст которой выровнен по центру, выглядит так:
Прописав атрибут align="center"
в открытии , мы выровняли html таблицу по центру странички браузера.
Вот такой результат Вы получите в браузере:
А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
Вертикальное выравнивание задается атрибутом:
valign="top"
- содержание будет располагаться вверху ячейки
valign="middle"
- содержание будет располагаться по центру ячейки
valign="bottom"
- содержание будет располагаться внизу ячейки
Давайте рассмотрим данные атрибуты на нашем примере:
Вот что мы получим, если посмотрим в браузере результат работы атрибутов align
и valign
:
6. Как объединить ячейки и столбцы html таблицы?
В этой части нашей статьи мы поговорим об атрибутах colspan
и rowspan
.
colspan
- определяет количество столбцов, на которые распространяется данная ячейка
rowspan
- определяет количество рядов на которые распространяется данная ячейка
Значения colspan
и rowspan
могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).
Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:
Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».
А теперь, когда мы разобрались с параметром colspan
, давайте разберемся с параметром rowspan. Принцип действия тут тот же:
Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
border="ширина рамки в пикселях"
- устанавливает ширину рамки
bordercolor="цвет рамки"
- устанавливает цвет рамки
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
Для этого тегу добавляем атрибуты:
Теперь мы четко видим отступы между ячейками html таблицы и отступы от внутренних краев ячеек до текста. Следовательно, без проблем можем управлять этими отступами. Для этого предназначены атрибуты:
cellspacing="ширина отступа в пикселях"
- отступ между ячейками
cellpadding="ширина отступа в пикселях"
- отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)
Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:
Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing
) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0"
и cellspacing="0"
.
8. Как одну html таблицу вставить внутрь другой?
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Элемент
служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента
парный блочный тег
(сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов
вы добавите, столько строк в таблице и будет. Открывающий тег
обозначает начало новой строки таблицы. После него помещаются элементы |
(сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента |
вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом |
.
Элемент
(сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент
, однако его назначение — создание заголовка строки или столбца. Как правило, элемент
размещают в первой строке таблицы. Браузеры отображают текст в элементе
жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента
помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.
Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
Заголовок 1Заголовок 2Заголовок 3
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе
несколько простых правил таблиц стилей. Свойство border
управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border
для всех элементов таблицы, например, вот так:
table, th, td {
border: 1px solid black;
}
Пример: Применение свойства border
Рамка вокруг таблицы
table, th, td {
border: 1px solid black;
}
Заголовок 1Заголовок 2Заголовок 3
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Одинарная рамка для таблицы
По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse
к своей таблице стилей:
table {
border-collapse: collapse;
}
Пример: Применение свойства border-collapse
Рамка вокруг таблицы
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
Заголовок 1Заголовок 2Заголовок 3
| Ячейка 2x1 | Ячейка 2x2 | Ячейка 2x3 |
| Ячейка 3x1 | Ячейка 3x2 | Ячейка 3x3 |
Поля и интервалы таблицы
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS.
Поле ячейки (padding
) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding
к элементу |
или
.
Интервал ячеек (border-spacing
) — это расстояние между ними ( |
или
). Сначала присвойте значение separate
свойству border-collapse
элемента
, а затем установите расстояние между ячейками, изменив значение параметра border-spacing
. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding
и cellspacing
элемента
, но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding
и border-spacing
:
Пример: Применение свойств padding
и border-spacing
padding и border-spacing
table, td {
border: 1px solid black;
}
table {
border-spacing: 15px;
background-color:green;
}
td {
background-color:yellow;
padding: 15px;
}
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width
CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет "растягиваться" или "сжиматься" в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width
: Table {width: 100%;}
Пример: Применение свойства width
| Ячейка 1
| Ячейка 2
|
| Ячейка 3
| Ячейка 4
|
width: 100%
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 15px;
}
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки
или ячейки
объединяются посредством добавления атрибутов colspan
или rowspan
. Атрибут colspan
определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan
— по вертикали.
Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan
в элементах |
или
— ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan
равно 2, а это значит, что ячейка должна занимать два столбца.
Пример: Применение атрибута colspan
Атрибут colspan
Ячейка на два столбца
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение строк
Строки, объединенные при помощи атрибута rowspan
, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:
Пример: Применение атрибута rowspan
Ячейка на две строки
| Ячейка 1
| Ячейка 2
|
| Ячейка 3
| Ячейка 4
|
Атрибут rowspan
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
Ячейка на две строки
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег
(от англ. caption – подпись). Элемент
предназначен для организации заголовка таблицы. Располагается сразу после тега
, но вне описания строки или ячейки.
Пример: Применение тега
Элемент caption
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
Это заголовок таблицы
Ячейка на две строки
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги
,
и
.
Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз
дания верхней шапки таблицы) используется тег
. Заголовки таблицы
должны быть помещены в элемент
, например:
Заголовок 1Заголовок 2< /th>
Основное содержимое (тело) таблицы должно находиться внутри элемента
(таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег
(в одной таблице допускается не более одного тега
). В исходном коде тег
ставится до тега
.
Кроме логического группирования одной из причин использования элементов
и
является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок (
) и последнюю строку (
), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги
,
и
Теги thead, tbody и tfoot
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
Это шапка таблицы
| Это подвал таблицы |
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Несмотря на то, что мы перед
добавили
, он, тем не менее, появляется в конце таблицы.
Это исходит из того, что
может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему
в коде прописывается перед элементом
.
Задачи
| | | |
