Определение в Википедии:Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег ).
Если коротко, то при табличной верстке создается таблица, занимающая в основном всю ширину окна браузера, в каждой ячейке которой располагается тот или иной элемент (или элементы) страницы.
Создание таблицы: строки и ячейки. Заголовок таблицы
Таблица создается с помощью тега
— он открывает таблицу. Обязательный тег
информирует браузер о завершении таблицы.
Любая таблица состоит из столбцов и строк.
Тег
создает строку, а тег
ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.
Содержимое ячейки, созданной тегом
по умолчанию располагается в ее левой чаcти.
Тег создает заголовок таблицы, он располагается внутри тега
— сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.
Для выравнивания таблицы используется атрибут align тега
.
При помощи атрибут align Вы можете разместить таблицу в левой или правой ( align= «left» и align= «right» ) части окна браузера (родительского элемента) или по его центру ( align= «center» ).
По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.
Высота и ширина таблицы и ячеек
По умолчанию размеры (высота и ширина) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.
Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:
— указывается целое положительное число. В этом случае размер будет задан в пикселях;
— указывается целое положительное число с символом %.
«img/peng_64.gif» >
«img/peng_64.gif» >
«img/peng_64.gif» >
«img/peng_64.gif» >
«img/peng_32.gif» >
«img/peng_32.gif» >
Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.
Границы таблицы и ячеек
Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.
Атрибут border тега
позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.
Толщина границы (или рамки) задается в пикселях. В качестве значения атрибута border указывается целое положительное число. Если атрибут border указан без значения, толщина рамки составит 1 пиксель.
Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует).
По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.
Атрибут bordercolor задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег ), строки (тег ) или ячейки (тег ).
Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS).
Атрибут border не указан.
Поэтому границы отсутствуют.
«img/peng_32.gif» >
«img/peng_32.gif» >
Толщина границы таблицы составляет 3 пикселя.
Ячейки имеют границы толщиной 1 пиксель!
«img/peng_32.gif» >
«img/peng_32.gif» >
Частичное отображение границ
Граница таблицы и рамка вокруг ячеек могут быть отображены частично.
Атрибут frame тега
указывает, где рисовать границу таблицы. Атрибут rules указывает, как отобразить границы ячеек.
Установлены
горизонтальные
границы таблицы
И
отображены границы
между колонками
Отступы внутри и снаружи ячеек
При форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек.
В качестве значений атрибутов указываются целые положительные числа, которые задают расстояние в пикселях.
Расстояние от содержимого ячеек
до их границ составляет 10 пикселей
Расстояние между ячейками и от ячеек
до границы таблицы составляет 25 пикселей
Объединение ячеек
При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега
.
Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали.
Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
Фон таблицы. Фон ячеек таблицы
В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.
Атрибут bgcolor тега
задает цвет фона таблицы. Цвет можно задать двумя способами (подробнее здесь. )
При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег ).
Напомним также о существовании атрибута cols тега
, который указывает браузеру количество столбцов в таблице.
Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.
Редактирование таблицы
В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.
При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.
HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны глобальные атрибуты, а также собственные атрибуты.
Создание таблиц в HTML
1. Как создать таблицу
Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
текст заголовка
текст заголовка
данные
данные
Фигура 1. Внешний вид таблицы без форматирования css-свойствами
По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border :
Промежутки между ячейками таблицы убираются с помощью свойства table .
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width :
Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
3. Как сделать ячейку заголовка столбца таблицы
4. Как сделать ячейку тела таблицы
5. Как добавить подпись (заголовок) к таблице
Элемент создает подпись таблицы. Добавляется непосредственно после тега
, вне строки или ячейки.
6. Группирование строк и столбцов таблицы
Элемент создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки.
Рис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и
7. Группировка разделов таблицы
Элемент
создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементамии для указания каждой части таблицы.
Элемент создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после элемента
, перед элементамии
.
Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают
и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
Но при записи этого кода мы не увидим каких-либо изменений. Нет границ, нет содержимого ячеек.
Пример
Результат
Как задать границу таблицы
Добавим границу. Для этого в нужно внести атрибут BORDERCOLOR и указать значение цвета.
Зададим цвет для границы зеленый.
Смотрим результат:
Замечание. Если при этом не будет указан размер границы отличный от нуля, то границы все равно видно не будет.
Как задать ширину таблицы
Ширина каждого столбца задается по ее содержимому. Для того чтобы изменить размер таблицы, нужно задать значение ее ширины. Увеличим размер таблицы и зададим его значение в 400 точек.
Замечание. Размер таблицы можно указывать в точках
или в процентах (в процентах от размера окна браузера)
Причем, в-первом случае размер таблицы не будет меняться, а во-втором, размер таблицы будет зависеть от размера окна браузера.
Просмотрим результат в браузере:
Как выровнять таблицу
Как закрасить таблицу
Давайте закрасим нашу таблицу желтым цветом. Для этого в тэге пропишем BGCOLOR и укажем цвет.
Наша страница будет иметь код:
Авбраузере
Как закрасить строку
Теперь закрасим верхнюю строку (шапку) в зеленый. Мы хотим закрасить строку, поэтому и атрибут BGCOLOR должны указать в тэге TR.
Результат
Как закрасить ячейку
Дополним нашу таблицу данными еще нескольких человек
Результат
Теперь давайте закрасим столбец с нумерацией. Так как в HTML нет понятия столбец, то на первый взгляд это выглядит затруднительно. Но на самом деле все довольно просто: в каждой строке нужно закрасить первую ячейку. То есть в тэге прописать атрибут BGCOLOR и указать цвет
В браузере вы увидите такую таблицу:
Как задать высоту таблицы (строки)
HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.
Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.
Для примера увеличим высоту первой строки
Результат
Как изменить ширину столбца
Теперь увеличим ширину первого столбца. Так как в HTML нет понятия столбец, то нам придется указать ширину первой ячейки верхней строки.
Результат
Выравнивание содержимого таблицы (по горизонтали и вертикали)
Выравнивать содержимое таблицы, строки или ячейки можно как по горизонтали (по верхнему краю, по середине, по нижнему краю), так и по вертикали (по левому краю, по средине, по правому краю).
И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.
Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).
Для нашей шапки установим выравнивание по центру, по середине.
Также выровняем содержание ячеек с нумерацией и телефонами по центру.
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега
, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.
Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега
, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.
Рис. 1. Выравнивание элементов по горизонтали
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
требуется установить атрибут valign со значением top (пример 2).
Пример 2. Использование valign
В данном примере характеристики ячеек управляются с помощью параметров тега
, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).
Пример 3. Применение стилей для выравнивания
Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
Рис. 2. Добавление формулы в документ
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Рис 3. Расположение полей формы и текста
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).
Рис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
