Таблицы

Изначально в качестве таблиц использовался преформатированный текст с обрисовкой символами ASCII. Однако такой способ не позволяет формировать таблицы высокого качества, а результат зачастую выбивается из общего стиля оформления веб-страницы.

С появлением в HTML таблиц появился инструмент для компоновки текста и чисел, а также средство дизайна.

Таблица — блочный элемент состоящий из строк и столбцов ячеек, содержащих текст или графические элементы.

Размещение таблицы

Для размещения таблицы применяется контейнер TABLE.

Границы таблицы

Толщина границ таблицы и ячеек устанавливается атрибутом BORDER. По умолчанию толщина границы равна 0 и, если атрибут BORDER не  указан, границ не будет, однако место под границу будет выделено в любом случае. Для вложенных таблиц границы рекомендуется устанавливать с толщиной отличной от толщины основной таблицы.

Если толщина границ больше 0, по умолчанию браузер отображает все границы таблицы. Отобразить только часть границ позволяет атрибут RULES.

Набивка

Величина набивки в ячейках таблицы управляется атрибутом CELLPADDING. В случае отсутствия набивки в ячейках таблицы текст размещается вплотную к границам, что ухудшает его восприятие. Присутствие набивки в ячейках таблицы увеличивает их размеры.

Расстояние между ячейками

Расстояние между ячейками изменяется атрибутом CELLSPACING и включает в себя толщину границ. По умолчанию оно равно 2 пикселам.

Ширина таблицы

Ширина таблицы регулируется атрибутом WIDTH принимающим значения типа размер. Если суммарная ширина содержимого таблицы превысит ширину таблицы, текстовая часть содержимого будет сужена, но в случаях когда вписать содержимое в таблицу таким образом невозможно, будет увеличина ширина самой таблицы. Если ширина таблицы не указана явно, браузер автоматически установит её значение в соответствии с суммарной шириной содержимого. Выход таблицы за пределы рабочей области браузера приводит к появлению горизонтальной полосы прокрутки.

Таблицы не имеют значения ширины по умолчанию. Поэтому, если ширина таблицы не указана явно, она автоматически высчитывается на основании содержимого, набивки ячеек и расстояния между ячеек.

Выравнивание таблицы

При выравнивании таблицы по левому или правому краю, она становится плавающим элементом и текст обтекает её с противоположной стороны и снизу.

Если ширина таблицы занимает 100% ширины родительского элемента веб-страницы или рабочей области браузера, выравнивание таблицы не оказывает никакого визуального эффекта.

Количество столбцов

Таблица отображается только после загрузки содержимого и его анализа для формирования структуры. Ускорить этот процесс можно указав заранее количество столбцов с помощью необязательного атрибута COLS.

Строки таблицы

Таблица состоит из строк представляющих из себя контейнеры TR. Контейнер строки должен размещаться внутри контейнера таблицы. Каждая таблица должна содержать минимум одну строку.

Ячейки таблицы

В строке таблицы должна быть минимум одна ячейка, которая представляет из себя контейнер TD размещаемый внутри контейнера строки.

Выравнивание содержимого ячейки

Атрибуты выравнивания содержимого ячеек имеются как у отдельных ячеек, так и у строк, но их различия лишь в области влияния. Так изменение значения атрибутов выравнивания содержимого ячейки выравнивает только её содержимое, а строки — содержимое всех ячеек в строке.

Объединение ячеек

По умолчанию таблица представляет собой сетку, в которой количество ячеек в каждой строке одинаково, но нестандартную структуру таблицы получить можно путём объединения нескольких ячеек.

Объединить несколько ячеек строки в одну можно присвоив целое число атрибуту COLSPAN первой из объединяемых ячеек. COLSPAN в данном случае расшифровывается как Column span. Число столбцов правее столбца содержащего ячейку с атрибутом COLSPAN должно быть не меньше COLSPAN−1.

За объединение ячеек столбца отвечает атрибут ROWSPAN, применяемый аналогично атрибуту COLSPAN. Число строк следующих за строкой с ячейкой содержащей атрибут ROWSPAN не должно быть меньше значения атрибута ROWSPAN−1.

Ошибки при объединении ячеек могут привести к появлению фантомных ячеек.

Размеры ячейки

Оба атрибута могут принимать значения типа размер.

Если высота содержимого превысит высоту ячейки, то её высота автоматически увеличится игнорируя значение атрибута HEIGHT.

Размеры ячейки не имеют значений по умолчанию. Поэтому, если размер ячейки не указан явно, он автоматически высчитывается на основании содержимого.

Явное указание ширины ячеек позволяет отображать части таблицы по мере загрузки содержимого ячеек браузером. В противном случае браузер отобразит таблицы только после полной загрузки их содержимого.

Однострочная ячейка

В обычном режиме текст не помещающийся одной строкой в ячейку таблицы разбивается на строки. Однако, если ячейке присвоить атрибут NOWRAP, ширина ячейки увеличиться до достаточной для размещения содержимого в одну строку.

Пустые ячейки

Пустые ячейки не имеют границ. Чтобы этого избежать, в ячейких необходимо поместить неотображаемое содержимое, в качестве которого может выступать элемент BR либо неразрывный пробел. Также пустые столбцы можно сформировать путём указания ширины в любых единицах измерения.

Заголовки столбцов и строк

Для обозначения заголовков столбцов и строк вместо контейнера TD используется контейнер TH. Содержимое контейнера TH приобретает жирное начертание и выравнивается посередине ячейки. Центрирование отменяется путём установки других значений атрибута ALIGN. Контейнер TH является аналогом контейнера TD с атрибутом ALIGN="center" и вложенным контейнером B.

Заголовки таблиц

Создать заголовки таблиц позволяет контейнер CAPTION, который должен быть вложен в контейнер таблицы. В заголовках может содержаться текст и изображения.

Безопаснее размещать заголовок сверху или снизу относительно таблицы. При этом текст в заголовке выравнивается по центру и разбивается на строки с длиной не превышающей ширину таблицы. Остальные положения заголовков могут быть неодинаково интерпретированы различными браузерами.

За положение относительно таблицы и выравнивание заголовка отвечает атрибут ALIGN, который принимает следующие значения:
bottom
Заголовок размещается под таблицей, а его содержимое выравнивается по центру.
center
Заголовок располагается над таблицей, а его содержимое выравнивается по центру.
left
Firefox располагает заголовок слева от таблицы, а остальные современные браузеры — сверху.
right
Firefox располагает заголовок справа от таблицы, а остальные современные браузеры — сверху.
top
Действует аналогично значению center, но входит в спецификацию HTML 4 и интерпретируется всеми браузерами одинаково.

Заголовки можно применять для размещения подписей к изображениям. В этом случае рекомендуется формировать таблицу без границ.

Фон

В качестве фона может быть заливка или картинка.

Заливка осуществляется путём присвоения атрибуту BGCOLOR значения типа цвет.

Картинка в качестве фона может быть установлена путём присвоения атрибуту BACKGROUND значения типа URL указывающего на графический файл содержащий необходимую картинку.

Фон может быть установлен как для всей таблицы так и для определённой ячейки.

Применение таблиц в дизайне

Благодаря возможности сделать границы таблиц невидимыми, на их основе появляется эффективный инструмент создания модульной сетки, которая позволяет произвольно размещать текст и графику на веб-странице. Применение таблиц в дизайне позволяет не ограничиваться только иерархической структурой текста. Однако такое применение таблиц не по назначению было вынужденой мерой до появления других инструментов размещения элементов веб-страниц. В настоящее время такой подход не рекомендуется.

Вложенные таблицы

Таблицу можно вложить в ячейку родительской таблицы. Это актуально в случаях, когда родительская таблица имитирует модульную сетку, а дочерняя содержит табличные данные, или, если обычная таблица имеет сложную структуру.

При построении сложной структуры таблицы вложенные таблицы могут решить, возникшие при построении сложной структуры таблицы путём объединения ячеек, проблемы.

Рекомендуется отделять дочернюю таблицу фоном отличным от фона родительской таблицы либо указанием ширины меньшей, чем у родительской ячейки. Если всё же необходимо отобразить вложенную таблицу как часть родительской, ширине нужно присвоить значение 100%.

Обновлено: 14:45 05.02.2020

Назад

©Tumaliev R.