.
используется для той же цели, что и
.
может содержать
, но не наоборот.
span
- атрибут, задающий число столбцов, к которым применяются свойства контейнера
.
,
и
- контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров
,
и
в HTML-документе.
colspan
нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
rowspan
объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы
Инструменты создания сайтов
НазначениеИнструмент
| Разметка | HTML | XHTML |
| Оформление | CSS |
| Разработка | PHP | Python |
В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
- открыли таблицу, задав ей толщину рамок.
-
Инструменты создания сайтов
- озаглавили её.
- открыли строку.
-
Назначение
- создали ячейку с оформлением заголовка.
-
Инструмент
- создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- закрыли строку. Аналогично создали остальные строки. |
Разметка |
HTML |
XHTML |
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
- закрыли таблицу.
В этой главе мы поговорим об атрибутах тега table
.
summary
- этот атрибут определяет общую информацию о назначении и структуре таблицы для не визуальных(речевых) браузеров, т.е. предостовляет краткую информацию о содержимом таблицы. На первый взгляд кажется что для новичков этот атрибут не обязателен, но это не так, валидатор выдает предупреждение об его отсутствии, так что ставте его хотя бы пустым summary="".
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
Я информацию разбросал на три строки, вам этого делать не обязательно, можно в одну строку, просто показал, что такой синтаксис допустим.
border
- этот атрибут задает толщину бордюра вокруг таблицы как и в картинках в пикселях.
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
| первый ряд, первая ячейка
|
первый ряд, вторая ячейка
|
если значение этого атрибута больше ноля то можно(но не желательно) вставить еще один атрибут bordercolor="#FFAA00"
с цветом бордюра.
align
- это атрибут служит для выравнивания таблицы и может принимать одно из этих значений:left
или center
или right
.
height
задает высоту таблицы в пикселях. Этот атрибут задается только в тех случаях если нам необходимы установить конкретную высоту.
width
- задает ширину таблицы в пикселях или в процентах относительно ширины окна браузера.
cellspacing
- задает расстояние между ячейками в пикселях
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
| первый ряд, первая ячейка
|
первый ряд, вторая ячейка
|
cellpadding
задает расстояние между ячейкой и ее содержимым:
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
bgcolor
как и в теге body задает цвет для таблицы.
background
делает картинку фоном таблицы как и теге body.
Создадим страницу table.html
:
таблицы в хтмл
| первый ряд, первая ячейка |
первый ряд, вторая ячейка |
| второй ряд, первая ячейка |
второй ряд, вторая ячейка |
А теперь просмотрим (откроется в новой вкладке) что у нас получилось.
Этим примером хотел обратить ваше внимание на то что если мы задаем размер таблице то ячейки делят этот размер поровну. А так-же обратите внимание что текст у нас застрял по центру... Не порядок!!!
valign
- этот атрибут служит для вертикального выравнивания содержимого ячейки и может принимать следующие занчения:
valign="middle"
текст расположен по центру, можно не задавать т.к. это значение по умолчанию.
valign="top"
текст расположен вверху ячейки.
valign="bottom"
текст расположен внизу ячейки.
Домашнее задание:
самостоятельно подставить атрибуты valign, cellpadding и cellspacing с разными значениями в файле table.html
.
Исходный код простой таблицы HTML
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
Ячейка 5 |
Ячейка 6 |
Ячейка 7 |
Ячейка 8 |
Ячейка 9 |
Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега .
Пример 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 таблицы с объединением ячеек
Исходный код таблицы HTML с объединенными ячейками
Nissan
|
Модель
Комплектация
Наличие
|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan X-Trail |
ACENTA |
+ |
CONNECTA |
- |
Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
Делается это при помощи обвертки строк выбранной части таблицы тегами. определяет область верхнего колонтитула, - область нижнего колонтитулы, - основную часть таблицы.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
Правильный порядок размещения тегов областей в коде HTML таблицы следующий: вначале верхний колонтитул , за ним нижний колонтитул , после них основная часть . При этом на странице основная часть будет выведена между колонтитулами.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Пример HTML таблицы с колонтитулами и подписью
Исходный код таблицы с колонтитулами и подписью
Комплектации 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 свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Теги и ставятся внутри тега перед тегами , АКП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 лучше использовать внутри страницы для отображения контента табличного формата.
HTML-теги
— основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , , ![]()
, ,
|
|
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.
|
|
|
Индикатор измерения в заданном диапазоне.
|
|
|
Раздел документа, содержащий навигационные ссылки по сайту.
|
|
|
Определяет секцию, не поддерживающую сценарий (скрипт).
|
|
|
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег .
|
|
|
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
|
|
|
Контейнер с заголовком для группы элементов .
|
|
|
Определяет вариант/опцию для выбора в раскрывающемся списке , или .
|
|
|
Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
|
|
|
Параграфы в тексте.
|
|
|
Определяет параметры для плагинов, встраиваемых с помощью элемента .
|
|
|
Элемент-контейнер, содержащий один элемент ![]() и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
|
|
|
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
|
|
|
Индикатор выполнения задачи любого рода.
|
|
|
Определяет краткую цитату.
|
|
|
Контейнер для Восточно-Азиатских символов и их расшифровки.
|
|
|
Определяет вложенный в него текст как базовый компонент аннотации.
|
|
|
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.
|
|
|
Отмечает вложенный в него текст как дополнительную аннотацию.
|
|
|
Выводит альтернативный текст в случае если браузер не поддерживает элемент .
|
|
|
Отображает текст, не являющийся актуальным, перечеркнутым.
|
|
|
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
|
|
|
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
|
|
|
Определяет логическую область (раздел) страницы, обычно с заголовком.
|
|
|
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .
|
|
|
Отображает текст шрифтом меньшего размера.
|
|
|
Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .
|
|
|
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
|
|
|
Расставляет акценты в тексте, выделяя полужирным.
|
|
|
Подключает встраиваемые таблицы стилей.
|
|
|
Задает подстрочное написание символов, например, индекса элемента в химических формулах.
|
|
|
Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
|
|
|
Задает надстрочное написание символов.
|
| Тег для создания таблицы.
|
|
|
Определяет тело таблицы.
|
| |
|
Создает ячейку таблицы.
|
|
|
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
|
|
|
Создает большие поля для ввода текста.
|
|
|
Определяет нижний колонтитул таблицы.
|
|
|
Создает заголовок ячейки таблицы.
|
|
|
Определяет заголовок таблицы.
|
|
|
Определяет дату/время.
|
|
|
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
|
| |
| Создает строку таблицы.
|
|
|
Добавляет субтитры для элементов и .
|
|
|
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
|
| |
Создает маркированный список.
|
|
|
Выделяет переменные из программ, отображая их курсивом.
|
|
|
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
|
|
|
Указывает браузеру возможное место разрыва длинной строки.
|
Таблица-шпаргалка с тегами
Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.
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 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
| |
