HTML :: Таблицы
Создание таблицы
Информация, структурированная в виде таблиц, представляется в HTML 5 элементом «table», в дополнение к которому предоставляется целый набор тегов, позволяющих создать заголовок, разбить таблицу на логические секции, сформировать и, при необходимости, объединить строки, столбцы и отдельные ячейки. Давайте посмотрим на код простейшей таблицы, показанный в примере №1, а затем разберем все элементы по порядку.
htmlCodes
<html> <head> <meta charset="utf-8"> <title>Структура таблицы</title> </head> <body> <table border="1"> <caption>Я – заголовок таблицы</caption> <tr> <!-- 2 заголовочные ячейки --> <th>1-я колонка</th> <th>2-я колонка</th> </tr> <tr> <td>Я – первая ячейка второй строки </td> <td>Я – вторая ячейка второй строки</td> </tr> <tr> <td>Я – первая ячейка третьей строки</td> <td>Я – вторая ячейка третьей строки</td> </tr> </table> </body> </html>
Пример №1. Использование элемента «table»
Итак, для формирования таблицы используется парный тег <table> (от англ. table – таблица). По умолчанию браузеры рисуют таблицу вообще без границ. Но если указать атрибут border, который в качестве равнозначных значений принимает пустую строку или "1", то будут нарисованы все границы ячеек и рамка вокруг таблицы.
Создание заголовка таблицы
Если у таблицы предполагается заголовок, то сразу же после открывающего тега <table> необходимо разместить элемент «caption», формирующийся парным тегом <caption> (от англ. caption – заголовок). По умолчанию браузеры отображают заголовок над таблицей с выравниванием по центру. Однако изменить внешний вид и расположение заголовка, опять же, весьма просто при помощи CSS.
Формирование строк и ячеек таблицы
После заголовка, если он есть, можно начинать располагать строки «tr», которые формируются парными тегами <tr> (от англ. table row – строка таблицы). Внутри строк располагаются ячейки «th» и «td», формирующиеся соответствующими парными тегами <th> (от англ. table header cell – заголовочная ячейка таблицы) и <td> (от англ. table data cell – табличная ячейка с данными). Заголовочные ячейки «th», если они используются, содержат заголовки столбцов или строк, которые по умолчанию отображаются браузерами полужирным шрифтом и центрируются. Данные в обычных ячейках отображаются обычным шрифтом и выравниваются по левому краю.
Деление строк таблицы на логические секции
Наша первая таблица достаточно примитивна, но встречаются таблицы, содержащие сотни строк, значительное количество столбцов и причудливым образом объединенных ячеек, которые могут группироваться самыми различными способами, как по внешнему виду, так и по содержанию. Для этих целей предусмотрены дополнительные теги и атрибуты, которые мы сейчас и рассмотрим.
Для группировки строк таблицы разбиваются элементами «thead», «tbody» и «tfoot» на логические секции (наподобие веб-страницы), которые формируются соответствующими парными тегами: <thead> (от англ. table head – шапка таблицы), <tbody> (от англ. table body – тело таблицы) и <tfoot> (от англ. table foot – подвал таблицы).
Элемент «thead» предназначен для группирования одной или нескольких строк вверху таблицы. По логике вещей в данной секции нужно размещать строки с заголовочными ячейками «th», однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента «thead» в пределах одной таблицы, который должен располагаться после элементов «caption» или «colgroup», если они конечно присутствуют, но перед элементами «tbody», «tfoot» или «tr». При чем секция может вообще не содержать строк и даже в некоторых случаях допускается отсутствие закрывающего тега. Но, как всегда, мы так поступать не будем, а, соответственно, и описывать такие ситуации не станем ни здесь, ни далее.
Элемент «tfoot» предназначен для группирования одной или нескольких строк внизу таблицы. Опять же, логика подсказывает, что в данной секции нужно размещать строки с итоговыми ячейками «td», однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента «tfoot» в пределах одной таблицы, который разрешается располагать, как непосредственно перед элементом «tbody», так и сразу же после него. Мы будем использовать второй вариант и всегда располагать «подвал» таблицы после ее «тела». Если итоговых ячеек нет, то элемент «tfoot» можно оставить пустым, но указывать его для сохранения логической разметки нужно, если мы указали элементы «thead» и «tbody».
Cекций «tbody» может быть несколько. Располагаются они друг за другом после секции «thead». Все они предназначены для размещения обычных строк с данными, как правило сгруппированных по каким-либо признакам, если секций несколько. Кроме того, допускается отсутствие строк в секциях «tbody», но если секции созданы, то использовать строки вне «thead», «tbody» и «tfoot» не разрешается. Короче, если мы решили использовать логическую разбивку таблицы на перечисленные разделы, то нужно соответствовать своим устремлениям до конца.
Теперь давайте рассмотрим простейшее деление таблицы на секции (см. пример №2).
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Логическая разметка таблицы</title> </head> <!-- Заголовок документа не показан на рисунке --> <body> <table border="1"> <caption>Деление на секции с выделением разным фоном</caption> <thead style="background-color: yellow"> <tr> <th>Я – первая заглавная ячейка </th> <th>А я – вторая заглавная ячейка</th> </tr> </thead> <tbody style="background-color: green"> <tr> <td>Я – первая ячейка в первой строке тела</td> <td>Я – вторая ячейка в первой строке тела</td> </tr> <tr> <td>Я – первая ячейка во второй строке тела</td> <td>Я – вторая ячейка во второй строке тела</td> </tr> </tbody> <tfoot style="background-color: grey"> <tr> <td>Итог:</td> <td>использовано три фона</td> </tr> </tfoot> </table> </body> </html>
Пример №2. Разбиение таблицы на секции
Может показаться, что введение элементов «thead», «tbody» и «tfoot» излишне. Ведь можно было бы разрешить использовать для выделения и группировки строк универсальный элемент «div», применяя к нему нужные стили CSS. Однако давайте не будем забывать, что «div» – элемент физической разметки, а перечисленные элементы осуществляют логическую разметку. Конечно, без стилей CSS они, также как и «div» свое содержимое никак не изменяют, зато для поисковых машин, вне зависимости от применяемых к ним стилей, дают четкое представление о структуре таблицы, а также виде и степени важности данных, располагающихся в соответствующих разделах.
Объединение колонок в группы
Для объединения колонок по общему признаку применяются элементы «col» и «colgroup». Первый из них является пустым и формируется одиночным тегом <col> (от англ. column – колонка), второй формируется парным тегом <colgroup> (от англ. column group – группа колонок). Оба элемента должны располагаться сразу после элемента «caption» или, при его отсутствии, после открывающего тега <table>.
Каждый элемент «col» представляет одну или несколько колонок, отсчет которых происходит слева направо и соответствует порядку следования элементов «col» в коде. Если нужно, чтобы элемент представлял несколько колонок, то используется атрибут span, который в качестве значений принимает натуральные числа, указывающие требуемое количество колонок. Рассмотрим использование элемента «col» подробнее на примере №3.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Работа с колонками таблицы</title> </head> <body> <!-- Создадим таблицу с границами --> <table border="1"> <caption>Таблица с 8 колонками</caption> <!-- Установим желтый фон первых двух колонок --> <col style="background-color: yellow" span="2"> <!-- Фон третьей колонки сделаем красным --> <col style="background-color: red"> <!-- Три колонки пропустим --> <col span="3"> <!-- Фон седьмой колонки сделаем серым --> <col style="background-color: grey"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td> </tr> </table> </body> </html>
Пример №3. Использование элемента «col»
Таким образом, если мы, например, хотим применить общий стиль CSS для колонок с четвертой по восьмую включительно, то необходимо сперва создать элемент «col», указать в нем атрибут span="3", а затем сформировать еще один элемент «col» с атрибутом span="5", привязав к нему необходимые стили CSS.
Столбцы таблицы «col» могут также быть объединены в лексические группы при помощи элемента «colgroup». Если мы, например, хотим задать столбцам желтый цвет фона, то необходимо перечислить их внутри контейнера «colgroup», указав в его открывающем теге атрибут style="background-color: yellow". В результате отпадает необходимость указывать этот атрибут во всех элементах «col». Кроме того, «colgroup» может использоваться аналогично элементу «col», и, следовательно, вперемешку с ним. В этом случае для выделения нескольких столбцов также используется атрибут span (см. пример №4).
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Использование элементов «col» и «colgroup»</title> </head> <body> <table border="1"> <caption>Таблица с 8 колонками</caption> <!-- Первой колонке установим синий фон --> <col style="background-color: blue"> <!-- Зададим колонкам ширину в 60 пикселей --> <colgroup style="width: 60px"> <col style="background-color: yellow"> <col> <col style="background-color: red"> </colgroup> <!-- А этим в 100 пикселей --> <colgroup style="width: 100px"> <col> <col style="background-color: blue"> </colgroup> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td> </tr> </table> </body> </html>
Пример №4. Использование элементов «col» и «colgroup»
Если к ячейкам и строкам таблицы, а также к элементам «thead», «tbody» и «tfoot» через атрибуты style, class или id без проблем применимы практически все свойства CSS, то с элементами «col» и «colgroup» дела обстоят как раз наоборот. Дело в том, что использование в этих элементах указанных атрибутов с целью применения к столбцам требуемых стилей CSS не принесет ожидаемого результата, так как практически ни одно свойство CSS просто напросто не будет применено. В итоге мы можем использовать данные элементы только лишь для определения фона и ширины колонок, что явно не соответствует предназначению этих элементов.
Физическое объединение ячеек таблицы
Итак, со строками и столбцами разобрались, теперь рассмотрим ячейки. На практике довольно часто возникает необходимость физического объединения сразу нескольких ячеек в одну. Для этих целей в тегах <th> и <td> предусмотрены атрибуты colspan (от англ. column span) и rowspan (от англ. row span), которые в качестве значений принимают, соответственно, число объединяемых ячеек по горизонтали и вертикали. Рассмотрим различные варианты объединения ячеек на примере №5.
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Объединение ячеек</title> </head> <body> <table border="1"> <caption>Таблица с объединенными ячейками</caption> <tr> <!-- Объединяем 2 горизонтальные ячейки 1.1 и 1.2 --> <td colspan="2" style="background-color: red">1.1+1.2</td> <td>1.3</td> <td>1.4</td> <!-- Объединяем 6 ячеек --> <td rowspan="3" colspan="2" style="background-color: yellow"> 1.5+1.6+<br>2.5+2.6+<br>3.5+3.6 </td> <td>1.7</td> <td>1.8</td> </tr> <tr> <td>2.1</td> <!-- Объединяем 2 вертикальные ячейки 2.2 и 3.2 --> <td rowspan="2" style="background-color: blue">2.2+<br>3.2</td> <td>2.3</td> <td>2.4</td> <td>2.7</td> <td>2.8</td> </tr> <tr> <td>3.1</td> <td>3.3</td> <td>3.4</td> <td>3.7</td> <td>3.8</td> </tr> </table> </body> </html>
Пример №5. Использование атрибутов colspan и rowspan
Конечно, код даже простейшей таблицы выглядит довольно массивно, включая в себя большое число составляющих ее структуру тегов. Поэтому очень важно соблюдать основные правила верстки, описанные во введении, не пренебрегая аккуратным форматированием кода. Что касается верстки непосредственно таблиц, то нужно помнить о том, что при объединении, например, двух ячеек в одной строке, количество ячеек в строке уменьшится на одну. Следовательно, указывать присоединенную ячейку в коде не нужно. Тоже самое касается и объединения ячеек по вертикали.
Понятие табличной верстки
Как было сказано выше, в элемент «table» главным образом используется для представления табличной информации. Однако в предыдущих версиях HTML таблицы с невидимыми границами, активно использовались для разметки сетки веб-документа. В результате страница состояла из отдельных ячеек, в которых располагались остальные элементы. Такой способ верстки получил название табличная верстка. И не смотря на то, что позднее на смену табличной верстке пришла блочная верстка, в основе которой лежит активное использование элемента «div», ее использование все еще применяется для разметки отдельных частей документа, например, для создания двухколоночного текста или выравнивания отдельных элементов.
Быстрый переход к другим страницам
- Списки в HTML
- Таблицы в HTML
- Гиперссылки в HTML
- Вернуться к оглавлению учебника