Контакты      О сайте
Главная › Блог

Атрибуты тега TABLE, бордюры, размеры и другие. Атрибуты тега TABLE, бордюры, размеры и другие Для создания строки в таблице используют тег

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

, и

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега , определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan="2" .

Пример HTML таблицы с объединением ячеек

Исходный код таблицы HTML с объединенными ячейками

. Далее перечислены некоторые атрибуты тега , которые применяются наиболее часто.

align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right , текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы.

border

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

cellpadding

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

cellspacing

Задает расстояние между внешними границами ячеек. Если установлен атрибут border , толщина границы принимается в расчет и входит в общее значение.

cols

Атрибут cols указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все ее содержимое будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.

rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols ), строками (rows ) или группами (groups ), которые определяются наличием тегов

, , , или . Толщина границы указывается с помощью атрибута border .

width

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

Исходный код простой таблицы 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 для нужной ячейки:

Текст ячейки





























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 коде

Ниже представлены 2 варианта HTML таблиц.

Простая HTML таблица

HTML код сложной таблицы































Подпись таблицы
Ячейка колонтитула 1 Ячейка колонтитула 2 Ячейка колонтитула 3
Ячейка колонтитула 4 Ячейка колонтитула 5 Ячейка колонтитула 6
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4

Поддержка браузерами

Тег
Да Да Да Да Да

Атрибуты

В HTML5 тег

не имеет атрибутов.

Устаревшие атрибуты тега table

Атрибут Значения Описание
align left
right
center
justify 		Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex: #1a2a2c, #eee.
HTML colorname: black, yellow;
border число Ширина границ таблицы в пикселях. По умолчанию: 0 - границы не выводятся.
В HTML5 используйте CSS.
cellpadding число Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS.
cellspacing число Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS.
frame void
above
below
lhs
rhs
vsides
hsides
box
border

Определяет какие внешние границы будут отображены:
void - все границы скрыты;
above - только верхняя граница;
below - только нижняя граница;
lhs - только левая граница;
rhs - только правая граница;
vsides - вертикальные границы;
hsides - горизонтальные границы;
box или border - все границы.

В HTML5 используйте CSS.
rules none
groups
rows
cols
all

Определяет какие внутренние границы будут отображены:
none - все скрыты;
groups - границы групп;
rows - границы строк;
cols - границы колонок;
all - все;

В HTML5 используйте CSS.
summary текст Описание таблицы.
width пиксели
проценты 		Ширина таблицы. В HTML5 используйте CSS.

В этой главе мы поговорим об атрибутах тега table .

summary - этот атрибут определяет общую информацию о назначении и структуре таблицы для не визуальных(речевых) браузеров, т.е. предостовляет краткую информацию о содержимом таблицы. На первый взгляд кажется что для новичков этот атрибут не обязателен, но это не так, валидатор выдает предупреждение об его отсутствии, так что ставте его хотя бы пустым summary="".

summary="Краткая информация о таблице." >
первый ряд, первая ячейка первый ряд, вторая ячейка

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

border - этот атрибут задает толщину бордюра вокруг таблицы как и в картинках в пикселях.

border="5" >
первый ряд, первая ячейка первый ряд, вторая ячейка

первый ряд, первая ячейка первый ряд, вторая ячейка

если значение этого атрибута больше ноля то можно(но не желательно) вставить еще один атрибут bordercolor="#FFAA00" с цветом бордюра.

align - это атрибут служит для выравнивания таблицы и может принимать одно из этих значений:left или center или right .

height задает высоту таблицы в пикселях. Этот атрибут задается только в тех случаях если нам необходимы установить конкретную высоту.

width - задает ширину таблицы в пикселях или в процентах относительно ширины окна браузера.

cellspacing - задает расстояние между ячейками в пикселях

cellspacing="10" >
первый ряд, первая ячейка первый ряд, вторая ячейка

первый ряд, первая ячейка первый ряд, вторая ячейка

cellpadding задает расстояние между ячейкой и ее содержимым:

cellpadding="10" >
первый ряд, первая ячейка первый ряд, вторая ячейка

bgcolor как и в теге body задает цвет для таблицы.

background делает картинку фоном таблицы как и теге body.

Создадим страницу table.html :

таблицы в хтмл

первый ряд, первая ячейка первый ряд, вторая ячейка
второй ряд, первая ячейка второй ряд, вторая ячейка

А теперь просмотрим (откроется в новой вкладке) что у нас получилось.
Этим примером хотел обратить ваше внимание на то что если мы задаем размер таблице то ячейки делят этот размер поровну. А так-же обратите внимание что текст у нас застрял по центру... Не порядок!!!

valign - этот атрибут служит для вертикального выравнивания содержимого ячейки и может принимать следующие занчения:
valign="middle" текст расположен по центру, можно не задавать т.к. это значение по умолчанию.
valign="top" текст расположен вверху ячейки.
valign="bottom" текст расположен внизу ячейки.
Домашнее задание: самостоятельно подставить атрибуты valign, cellpadding и cellspacing с разными значениями в файле table.html .

Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц: