Таблицы
Создание таблиц
Таблицы позволяют представить большой объем информации в компактном и наглядном виде, а также сравнивать и сопоставлять различные данные. Они часто встречаются на сайтах, где служат для представления разнообразной статистики, рейтингов, сравнения цен и т.д. К тому же таблицы могут использоваться и для структурирования страниц сайта, так называемая табличная верстка.
Табличная верстка — условное название метода верстки веб-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы
Для добавления таблицы на веб-страницу используется элемент <table>, который указывает браузеру, что содержимое необходимо организовать в табличном виде. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы.
Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов <tr> и <td> соответственно.
Для определения строки в уже созданной таблице используется элемент <tr>, который позволяет браузеру организовать содержимое между тегами <tr> и </tr> в горизонтальном виде: между ними должны размещаться все данные, которые требуется поместить в одну строку. Внутри строки таблицы обычно размещаются ячейки с данными. Для определения ячейки таблицы используется элемент <td>. Число элементов <td> в строке определяет число ячеек. Ячеек может быть произвольное количество, однако таблица должна содержать хотя бы одну ячейку.
Вместо элемента <td> допускается использовать элемент <th>. Элемент <th> определяет содержимое ячейки как заголовок для каждого столбца. Это помогает не только семантически описать содержимое, но также представляет его более аккуратно в различных браузерах и устройствах. Текст в такой ячейке обычно отображается браузерами жирным шрифтом и выравнивается по центру. В остальном разницы между ячейками, созданными с использованием элементов <td> и <th>, нет.
Фрагмент кода, представленного ниже, создает таблицу, состоящую из трех столбцов и четырех строк, одна из которых задает строку заголовков столбцов:
<table> <tr> <th>Поисковая система</th> <th>Декабрь 2009 г.</th> <th>Ноябрь 2009 г.</th> </tr> <tr> <td>Яндекс</td> <td>48.0%</td> <td>47.9%</td> </tr> <tr> <td>Google</td> <td>34.9%</td> <td>34.7%</td> </tr> <tr> <td>Search.mail.ru</td> <td>8.6%</td> <td>8.6%</td> </tr> </table>
Созданная таблица имеет вид в браузере:
Форматирование таблиц
Тот факт, что таблицы применяются достаточно часто, обязан не только их гибкости и универсальности, но и обилию атрибутов элементов <table>, <tr> и <td>, управляющих различными свойствами таблицы. Рассмотрим наиболее часто используемые атрибуты подробнее.
Толщина рамки таблицы: атрибут border
Атрибут устанавливает толщину рамки в пикселах, т.е. использует в качестве значения любое положительное число. По умолчанию, рамка изображается трехмерной, однако вид рамки меняется в зависимости от браузера. При использовании атрибута border без аргументов, браузер отображает рамку толщиной один пиксел. Следующий фрагмент кода добавляет к таблице рамку толщиной 2 пиксела:
Ширина таблицы: атрибут width
Ширину таблицы можно задать с помощью атрибута width. Ширину можно задавать в пикселах или процентах от доступного пространства. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться форматировать текст, чтобы подогнать его к заданным размерам. Если это невозможно, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Если ширина явно не указана, то она также будет вычисляться на основе содержимого таблицы. В следующем примере ширина таблицы устанавливается равной 75% от ширины окна браузера:
Ширина и высота ячейки: атрибуты width и height
С помощью атрибутов width и height можно задать ширину и высоту ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину. Высоту таблицы и ее ячеек браузер устанавливает сам, исходя из их содержимого. Однако при использовании атрибута height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот атрибут будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.
<tr> <td width="50%" height="50">Яндекс</td> <td width="25%">48.0%</td> <td width="25%">47.9%</td> </tr>
Расстояние между ячейками таблицы: атрибут cellspacing
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет и входит в общее значение. Значением атрибута может быть любое целое положительное число. По умолчанию, атрибут cellspacing принимает значения 0 или 2, в зависимости от того, установлен атрибут border или нет. Следующий фрагмент кода устанавливает расстояние между ячейками 2 пиксела:
Расстояние внутри ячеек: атрибут cellpadding
Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым: он добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Добавление cellpadding позволяет улучшить читабельность текста. При отсутствии границ этот атрибут не имеет особого значения. Значение данного атрибута может быть задано в пикселах или процентах от доступного пространства и по умолчанию равно нулю. Задать расстояние между границей ячейки и ее содержимым можно следующим образом:
В заключение этого раздела следует отметить, что официальная спецификация HTML не рекомендует использовать все атрибуты, касающиеся оформления таблиц и ячеек. Устанавливать такие свойства таблиц и ячеек, как выравнивание самой таблицы относительно окна браузера, текста в ячейках, цвет и стиль рамки вокруг ячеек таблицы, фона и многое другое рекомендуется только с использованием свойств CSS. Подробно эти вопросы будут освещены в разделе "CSS. Верста макетов".
Объединение ячеек в таблице
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали.
Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали. Например, в таблице из 4 ячеек верхние горизонтальные ячейки необходимо объединить. Пример кода представлен ниже:
<TABLE width="200" border="1" cellpadding="4"> <TR> <TD colspan="2">Ячейка 1</TD> </TR> <TR> <TD>Ячейка 2</TD> <TD>Ячейка 3</TD> </TR> </TABLE>
Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали. Например, в таблице из 4 ячеек левые вертикальные ячейки объединены с помощью параметра rowspan. Такого результата можно достичь с помощью следующего фрагмента кода:
<TABLE width="200" border="1" cellpadding="4"> <TR> <TD rowspan="2">Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> </TR> </TABLE>
