|
|
Документ Microsoft Word. Теги группы table
В HTML для создания таблиц используются теги группы table. К ним относятся:
- тег обвертка таблицы;
- тег строки (ряда) таблицы;
- тег обычной ячейки таблицы;
| - тег ячейки-заголовка таблицы;
- тег колонки таблицы;
- тег группы колонок таблицы;
- тег верхнего колонтитула таблицы;
- тег основной части таблицы;
- тег нижнего колонтитула таблицы;
- тег подписи таблицы.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: , и .
Тег является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.
Далее необходимо определить строки и ячейки - структуру таблицы.
В HTML таблицах строка (ряд) является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка внутри строки будет в первой колонке, второй элемент - во второй колонке и так далее.
Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк основной части таблицы используют тег . Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег .
Пример простой таблицы HTML
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
Исходный код простой таблицы HTML
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
Ячейка 5 |
Ячейка 6 |
Ячейка 7 |
Ячейка 8 |
Ячейка 9 |
Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега | .
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.
Пример HTML таблицы с заголовком th
Volkswagen AG
|
Daimler AG
|
BMW Group
|
Audi
|
Mercedes-Benz
|
BMW
|
Skoda
|
Mercedes-AMG
|
Mini
|
Lamborghini
|
Smart
|
Rolls-Royce
|
Исходный код таблицы HTML с заголовками th
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Audi |
Mercedes-Benz |
BMW |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Smart |
Rolls-Royce |
Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут colspan="х", у ячейки | или | , где x - количество ячеек для объединения.
Чтобы объединить ячейки по вертикали используйте атрибут rowspan="х", у ячейки | или | , где x - количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
| Текст ячейки |
Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега , определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan="2".
Пример HTML таблицы с объединением ячеек
Nissan
|
Модель
|
Комплектация
|
Наличие
|
Nissan Qashqai
|
VISIA
|
+
|
TEKNA
|
+
|
Nissan X-Trail
|
ACENTA
|
+
|
CONNECTA
|
-
|
Исходный код таблицы HTML с объединенными ячейками
Nissan |
|---|
Модель |
Комплектация |
Наличие |
|---|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan X-Trail |
ACENTA |
+ |
CONNECTA |
- |
Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
Делается это при помощи обвертки строк выбранной части таблицы тегами. определяет область верхнего колонтитула, - область нижнего колонтитулы, - основную часть таблицы.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
Правильный порядок размещения тегов областей в коде HTML таблицы следующий: вначале верхний колонтитул , за ним нижний колонтитул , после них основная часть . При этом на странице основная часть будет выведена между колонтитулами.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Подпись , при использовании, ставится сразу после открывающего тега .
Пример HTML таблицы с колонтитулами и подписью
Характеристика
|
SUTA 09H 6R
|
SUTA 09HR6R
|
SUTA 15H 5R
|
Наличие
|
+
|
+
|
+
|
Мощность двигателя
|
0,9 (90 л.с.)
|
0,9 (90 л.с.)
|
1,5 (90 л.с.)
|
Топливо
|
бензин
|
бензин
|
дизель
|
Норма токсичности
|
Евро-6
|
Евро-6
|
Евро-5
|
Комплектации Renault Sandero Stepway
|
Исходный код таблицы с колонтитулами и подписью
Комплектации Renault Sandero Stepway
Характеристика |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Наличие |
+ |
+ |
+ |
|---|
Мощность двигателя |
0,9 (90 л.с.) |
0,9 (90 л.с.) |
1,5 (90 л.с.) |
|---|
Топливо |
бензин |
бензин |
дизель |
|---|
Норма токсичности |
Евро-6 |
Евро-6 |
Евро-5 |
|---|
Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Теги и ставятся внутри тега перед тегами , , , и после тега .
Оба тега могут определять стили для одной или нескольких колонок. Атрибут span="число", указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.
Теги и похожи друг на друга, однако тег позволяет использование вложенных тегов , таким образом можно задать стили группе колонок через и конкретной колонке внутри группы через элемент (см. пример ниже).
Если внутри есть вложенные теги , то атрибут span у тега не ставится, а количество колонок на которые влияет тег определяется вложенными элементами.
Пример HTML таблицы с разделением на колонки
ZEN 2E2C AL A
|
ZEN 2E2C J5 A
|
INTENSE 2E3C AL A
|
Характеристика
|
1.5 (90 л.с.)
|
1.2 (115 л.с.)
|
1.5 (90 л.с.)
|
Мощность двигателя
|
дизель
|
бензин
|
дизель
|
Топливо
|
АКП6 (EDC)
|
АКП6 (EDC)
|
АКП6 (EDC)
|
Трансмиссия
|
Исходный код таблицы HTML c и
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSE 2E3C AL A |
Характеристика |
|---|
1.5 (90 л.с.) |
1.2 (115 л.с.) |
1.5 (90 л.с.) |
Мощность двигателя |
|---|
дизель |
бензин |
дизель |
Топливо |
|---|
АКП6 (EDC) |
АКП6 (EDC) |
АКП6 (EDC) |
Трансмиссия |
|---|
Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата. | | | | | | |
|
|
Скачать 50.28 Kb.