Организовать кирпичную стену используя тег table
WWW
стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц
. Для этой цели обычно использовался предформатированный текст ( тег
), в котором таблица
обрисовывалась символами АSСII. Но такая форма представления таблиц
была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц
в HTML
у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста. Создание таблиц в HTML
Для описания таблиц
используется тег <ТАВLЕ>
. Тег <ТАВLЕ>
, как и многие другие, автоматически переводит строку до и после таблицы
.
Создание строки таблицы - тег <ТR>
Тег <ТR>
(Таble Row, строка таблицы
) создает строку таблицы
. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR>ТR>
.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы
обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>ТD>
. Число тегов <ТD>ТD>
в строке определяет число ячеек (открыть)
Таблица
Если в таблице два
тега TR, то в ней две строки. |
Если в строке три тега TD, |
то в ней |
три столбца. |
Рис.
4.1.
Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы
задаются с помощью тега заголовка <ТН>ТН>
(Таblе Неаder, заголовок таблицы
). Эти теги подобны <ТD>ТD>
. Отличие состоит в том, что текст, заключенный между тегами <ТН>ТН>
, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD>ТD>
с тегом <В>
и атрибутом <АLIGN=center>
, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах
жирный шрифт, поэтому лучше задавать заголовки таблиц
с помощью <ТН>
.
Заголовок центрирован по умолчанию
|
Заголовок может объединять
столбцы |
Заголовок может быть расположен
перед столбцами |
Текст или данные |
Текст или данные |
Заголовок может объединять
строки |
Текст или данные |
Текст или данные |
Текст или данные |
Текст или данные |
Текст или данные |
Текст или данные |
Использование заголовков таблицы - тег <САРТIОN>
Тег
позволяет создавать заголовки таблицы
. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>
), либо под таблицей
(<САРТION ALIGN=bottom>
). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы
. Иногда тег <САРТION>
используется для подписи под рисунком. Для этого достаточно описать таблицу
без границ.
Заголовок над таблицей
Текст или данные |
Текст или данные |
Текст или данные |
Текст или данные |
Заголовок под таблицей
Текст или данные |
Текст или данные |
Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы
, переходит на следующую строку. Однако при использовании атрибута NOWRAP
с тегами <ТН>
или <ТD>
длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD>
и <ТН>
модифицируются с помощью атрибута СОLSPAN
(Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN
, чтобы растянуть ее над любым количеством обычных ячеек.
Если вы хотите сделать какую-нибудь
ячейку шире, чем верхняя или нижняя,
|
можно воспользоваться атрибутом
СОLSPAN=2, |
чтобы
растянуть ее над любым количеством
обычных ячеек. |
Атрибут ROWSPAN
Атрибут ROWSPAN
, используемый в тегах <ТD>
и <ТН>
, подобен атрибуту СОLSPAN=
, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s
число, большее единицы, то соответствующее количество строк должно находиться в растягиваемой ячейке. Внизу таблицы
ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН
применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>
, чтобы задать ширину всей таблицы
, а можно использовать в тегах <ТD>
или <ТН>
, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ WIDTH=250>
, вы получите таблицу
шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDТН=50%
в теге <ТАВLЕ>
таблица
будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы
в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица
оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы
может оказаться полезным.
Текст или данные -
ширина 100% |
или
Текст или данные -
ширина 50% |
или
Текст или данные -
ширина 200 пикселов |
или
Текст или данные -
ширина 100 пикселов |
служит для создания таблицы.Атрибуты:
width
- ширина таблицы в пикселях или в % относительно ширины окна браузера.
height
- высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендуют).
align
- выравнивание таблицы.
left
- выравнивание таблицы по левому краю.
right
- выравнивание таблицы по правому краю.
center
- выравнивание таблицы по центру.
border
- толщина рамки таблицы в пикселях.
cellspacing
- расстояние между смежными ячейками в пикселях (по умолчанию = 2).
cellpadding
- расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).
bgcolor
- фоновый цвет таблицы.
background
- фоновое изображение для таблицы.
bordercolor
- цвет всех линий рамки таблицы.
Контейнер
служит для создания строки таблицы. Контейнер
| служит для создания заголовок для столбца таблицы. Контейнер
| служит для создания ячейки таблицы.Атрибуты
| width
- ширина ячейки в пикселях или в % относительно ширины окна браузера (для |
не применяется).height
- высота ячейки в пикселях или в % относительно ширины окна браузера (для
не применяется).align
- выравнивание в ячейке.
left
- выравнивание в ячейке по левому краю.
right
- выравнивание в ячейке по правому краю.
center
- выравнивание в ячейке по центру.
valign
- вертикальное выравнивание содержимого ячейки.
top
- выравнивание по верхнему краю ячейки.
bottom
- выравнивание по нижнему краю ячейки.
middle
- выравнивание по середине ячейки.
bgcolor
- фоновый цвет ячейки.
background
- фоновое изображение для ячейки.
bordercolor
- цвет всех линий рамки ячейки.
colspan
- количество объединяемых ячеек по столбцам (для
не применяется).rowspan
- количество объединяемых ячеек по строкам (для
не применяется).Такой код:
Заголовок
Заг 1 |
Заг 2 |
Заг 3 |
---|
1 |
2 |
3 |
4 |
5 |
6 |
Даст такой результат.
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицы
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и
. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега |
использовать тег |
. Текст в ячейке, оформленной с помощью тега |
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги |
и |
нет.
Пример 12.1. Создание таблицы
Тег TABLE
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
Порядок расположения ячеек и их вид показан на рис. 12.1.
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
Каждый тег |
создает новую строку. Далее во вложенных
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
Приведем пример, html код:
Пример таблицы
|
Столбец 1
|
Столбец 2
|
Обратите внимание на ячейку |
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег |
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
К открывающему тегу
можно прописывать различные атрибуты.
1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения:
В разобранном выше примере мы выравнивали таблицу по центру align="center"
.
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы
или строкам |
. Таким образом, в разных ячейках выравнивание будет разное.
Например
... |
| ... |
...
2. Свойство background="URL"
- задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Пример
Пример таблицы
|
Столбец 1
|
Столбец 2
|
Преобразуется на странице в следующее:
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
. Обратите внимание на то, что в теге мы добавили style="color:white;"
. Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.
3. Свойство bgcolor="цвет"
- задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border="число"
- задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1"
, что означает толщина рамки - 1 пиксель.
5. Свойство bordercolor="цвет"
- задает цвет рамки. Если border="0"
, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding="число"
- отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing="число"
- расстояние между ячейками в пикселях.
8. Свойство cols="число"
- число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения:
- void
- не отрисовывать границы
- border
- граница вокруг таблицы
- above
- граница по верхнему краю таблицы
- below
- граница снизу таблицы
- hsides
- добавить только горизонтальные границы (сверху и снизу таблицы)
- vsides
- рисовать только вертикальные границы (слева и справа от таблицы)
- rhs
- граница только на правой стороне таблицы
- lhs
- граница только на левой стороне таблицы
10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения:
- all
- линия рисуется вокруг каждой ячейки таблицы
- groups
- линия отображается между группами, которые образуются тегами , , ,
или
- cols
- линия отображается между колонками
- none
- все границы скрываются
- rows
- граница рисуется между строками таблицы, созданными через тег
12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица.
14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге
.
Атрибуты и свойства и
1. Свойство align="параметр"
- задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
- left
- выравнивание по левому краю
- center
- выравнивание по центру
- right
- выравнивание по правому краю
2. Свойство background="URL"
- задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.
3. Свойство bgcolor="цвет"
- задает цвет фона ячейки.
4. Свойство bordercolor="цвет"
- задает цвет рамки ячейки.
5. Свойство char="буква"
- задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.
6. Свойство colspan="число"
- задает число объединяемых горизонтальных ячеек.
7. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах %.
8. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах %.
9. Свойство rowspan="число"
- задает число объединяемых вертикальных ячеек.
10. Свойство valign="параметр"
- выравнивание содержимого ячейки по вертикали.
- top
- выравнивание содержимого ячейки по верхнему краю строки
- middle
- выравнивание по середине
- bottom
- выравнивание по нижнему краю
- baseline
- выравнивание по базовой линии
Примечание 1
Для тега | доступны такие же параметры, что и для . Параметры для одного тега | будут иерархично применены ко всем внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
:
...
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
HTML-таблицы
упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц
могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны , а также собственные атрибуты.
Создание таблиц в HTML
- Содержание:
1. Как создать таблицу
Таблица создаётся при помощи парного тега Рис.1. Внешний вид таблицы без форматирования css-свойствами
По умолчанию таблица и ячейки не имеют видимых границ. Границы
задаются с помощью свойства border:
/* внешние границы таблицы серого цвета толщиной 1px */
table {border: 1px solid grey;}
/* границы ячеек первого ряда таблицы */
th {border: 1px solid grey;}
/* границы ячеек тела таблицы */
td {border: 1px solid grey;}
Промежутки между ячейками таблицы
убираются с помощью свойства table {border-collapse: collapse;} .
Ширина
таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:
/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */
table {width: 100%;}
/* задаст фиксированную ширину для таблицы */
table {width: 600px;}
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега . Количество горизонтальных строк таблицы определяется количеством парных тегов
.
3. Как сделать ячейку заголовка столбца таблицы
создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов
|
| 4. Как сделать ячейку тела таблицы
создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги
|
| , расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек должно быть равно количеству пар ячеек
| . Для элемента доступны атрибуты colspan , rowspan , headers .
5. Как добавить подпись (заголовок) к таблице
Создает подпись таблицы. Добавляется непосредственно после тега 6. Группирование строк и столбцов таблицы
Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
7. Группировка разделов таблицы
Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами
| и
для указания каждой части таблицы.
Элемент должен быть использован в следующем порядке: как дочерний элемент , после и, и перед
,
и элементами. В пределах одной таблицы можно использовать один раз.
группирует основное содержимое таблицы. Используется в сочетании с элементами и
.
Создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега, перед тегами
и .
Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают и
как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
9. Атрибуты элементов таблицы
Таблица 1. Атрибуты элементов таблицы
Атрибут
|
Описание, принимаемое значение
|
---|
colspan
|
Количество ячеек в строке для объединения по горизонтали.
|
|
headers
|
Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
| ... |
... |
Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .
---|
rowspan
|
Количество ячеек в столбце для объединения по вертикали.
|
Возможные значения: число от 1 до 999.
|
span
|
Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.
Принимаемые значения: любое целое положительное число.
|
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Разметка HTML
Меню ресторана "Ромашка"
Кухня |
Холодные блюда |
Горячие блюда |
Десерты |
Салаты |
Закуски |
Первые блюда |
Вторые блюда |
Русская |
Винегрет |
Язык с хреном |
Щи с квашеной капустой |
Вареники с картошкой |
Печеные яблоки с медом |
Оливье |
Студень говяжий |
Рассольник домашний |
Караси запеченые в сметане |
Блинчатый пирог |
Сельдь под "шубой" |
Судак заливной |
Мясная солянка |
Котлеты "Пожарские" |
Пирожное "Картошка" |
Испанская |
Севиче из гребешков |
Эмпанадас |
Хлебный суп с чесноком |
Паэлья с морепродуктами |
Чуррос |
Тимбал из авокадо и тунца |
Ахотомате |
Астурийская фабада |
Свиное раксо |
Альмойшавена |
Фасоль с ветчиной |
Чанфайна |
Рыбный суп с манными клецками |
Тортилья картофельная |
Бунуэлос |
Французская |
Вогезский салат |
Рийет из курицы |
Баклажанный крем-суп "Ренуар" |
Картофель огратен |
Бриоши |
Салат "Панзанелла" |
Делисьез из сыра |
Французский тыквенный суп |
Гратин из птицы |
Лигурийский лимонный пирог |
Тар-тар |
Маринованный лосось |
Суп "Конти" |
Тартифлетт |
Саварен "Триумф" |
Похожие публикации
| |
|
|