Таблицы в HTML - Создание таблиц - Высота и ширина, фон таблицы

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

Определение в Википедии: Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>).

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



Создание таблицы: строки и ячейки. Заголовок таблицы

Таблица создается с помощью тега <table> - он открывает таблицу. Обязательный тег </table> информирует браузер о завершении таблицы.

Любая таблица состоит из столбцов и строк.

Тег <tr> создает строку, а тег <td> ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.

Тег <th> также создает ячейку. Его отличие от тега <td> в том, что ячейка созданная тегом <th> является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.

Содержимое ячейки, созданной тегом <td> по умолчанию располагается в ее левой чаcти.

Тег <caption> создает заголовок таблицы, он располагается внутри тега <table> - сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.

Выравнивание таблицы. Выравнивание содержимого ячеек

Для выравнивания таблицы используется атрибут align тега <table>.

При помощи атрибут align Вы можете разместить таблицу в левой или правой (align="left" и align="right") части окна браузера (родительского элемента) или по его центру (align="center").

Выравнивание содержимого строк (тег <tr>) и ячеек (тег <td>) по горизонтали также осуществляется при помощи атрибута align, а по вертикали при помощи атрибута valign:

- атрибут align принимает значения left, right, center и justify, которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;

- атрибут valign, принимающий значения top, bottom и middle, задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.

Атрибут align служит также для выравнивания заголовка (тег <caption>) по горизонтали и определения его расположения - над таблицей или под ней.

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

Высота и ширина таблицы и ячеек

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

Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght и width соответственно.

Тег <tr>, создающий строку таблицы не имеет атрибутов hieght и width. Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.

Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:

- указывается целое положительное число. В этом случае размер будет задан в пикселях;

- указывается целое положительное число с символом %.

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

Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.

Границы таблицы и ячеек

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

Атрибут border тега <table> позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.

Толщина границы (или рамки) задается в пикселях. В качестве значения атрибута border указывается целое положительное число. Если атрибут border указан без значения, толщина рамки составит 1 пиксель.

Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует).

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

Атрибут bordercolor задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег <table> ), строки (тег <tr>) или ячейки (тег <td>).

Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS).

Частичное отображение границ

Граница таблицы и рамка вокруг ячеек могут быть отображены частично.

Атрибут frame тега <table> указывает, где рисовать границу таблицы. Атрибут rules указывает, как отобразить границы ячеек.

Отступы внутри и снаружи ячеек

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

Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding тега <table>.

Внешние отступы - расстояние между границами соседних ячеек  и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing тега <table>.

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

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

При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега <td>.

Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали.

Оба атрибута имеют смысл, если таблица состоит из нескольких строк.

Фон таблицы. Фон ячеек таблицы

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

Атрибут background тега <table> задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь...).

Атрибут bgcolor тега <table> задает цвет фона таблицы. Цвет можно задать двумя способами (подробнее здесь...)

При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег <td>).

Напомним также о существовании атрибута cols тега <table>, который указывает браузеру количество столбцов в таблице.

Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.

Редактирование таблицы

В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.

К первой группе относятся теги <col> и <colgroup>. Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.

Один из этих тегов располагают сразу после тега <table>. Допустим это тег <col>.

При помощи атрибута span тега <col> указывают количество колонок, к которым будут применены атрибуты align, valign или width (выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок).

Если атрибут span в теге <col> отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега <col> задаются свойства для следующих (следующей - если атрибут span отсутствует) колонок таблицы и т.д.

Ко второй группе тегов относятся также практически идентичные между собой теги <thead>, <tbody> и <tfoot>.

Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align и valign соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor.

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

Теги <thead> и <tfoot> должны быть расположены перед тегом <tbody>, сразу после открывающего таблицу тега <table>. Строки, помещенные в тег <thead> представлены вверху таблицы, а строки заключенные в тег <tfoot> будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы.

Тег <tbody> допускается использовать несколько раз внутри тега <table>.