belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

2.7. Элемент 'table'. Понятие табличной верстки.
Теги <caption>, <th>, <td>, <tr>, <thead>, <tbody>, <tfoot>

Информация, структурированная в виде таблиц, представляется в HTML 5 элементом 'table', в дополнение к которому предоставляется целый набор тегов, позволяющих создать заголовок, разбить таблицу на логические секции, сформировать и, при необходимости, объединить строки, столбцы и отдельные ячейки. Давайте посмотрим на код простейшей таблицы, показанный в примере 2.14, а затем разберем все элементы по порядку.


<html>
<head>
	<meta charset="utf-8">	
	<title>Структура таблицы</title>
</head>
<body>
	<table border="1">
		<caption>Я &ndash; заголовок таблицы</caption>
		<tr>
			<!-- 2 заголовочные ячейки -->
			<th>1-я колонка</th>
			<th>2-я колонка</th>
		</tr>
	
		<tr>
			<td>Я &ndash; первая ячейка второй строки  &nbsp; &nbsp;</td>
			<td>Я &ndash; вторая ячейка второй строки</td>
		</tr>
		
		<tr>
			<td>Я &ndash; первая ячейка третьей строки</td>
			<td>Я &ndash; вторая ячейка третьей строки</td>
		</tr>
	</table>
</body>
</html>

Пример 2.14. Использование элемента 'table'

Итак, для формирования таблицы используется парный тег <table>. По умолчанию браузеры рисуют таблицу вообще без границ. Но если указать атрибут border, который в качестве равнозначных значений принимает пустую строку или "1", то будут нарисованы все границы ячеек и рамка вокруг таблицы.

Если у таблицы предполагается заголовок, то сразу же после открывающего тега <table> необходимо разместить элемент 'caption', формирующийся парным тегом <caption>. По умолчанию браузеры отображают заголовок над таблицей с выравниванием по центру. Однако изменить внешний вид и расположение заголовка, опять же, весьма просто при помощи CSS.

После заголовка, если он есть, можно начинать располагать строки 'tr' (от англ. table row), которые формируются парными тегами <tr>. Внутри строк располагаются ячейки 'th' (от англ. table header cell) и 'td' (от англ. table data cell), формирующиеся соответствующими парными тегами <th> и <td>. Заголовочные ячейки 'th', если они используются, содержат заголовки столбцов или строк, которые по умолчанию отображаются браузерами полужирным шрифтом и центрируются. Данные в обычных ячейках отображаются обычным шрифтом и выравниваются по левому краю.

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

Для группировки строк таблицы разбиваются элементами 'thead', 'tbody' и 'tfoot' на логические секции (наподобие веб-страницы), которые формируются соответствующими парными тегами: <thead>, <tbody> и <tfoot>.

Элемент 'thead' предназначен для группирования одной или нескольких строк вверху таблицы. По логике вещей в данной секции нужно размещать строки с заголовочными ячейками 'th', однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента 'thead' в пределах одной таблицы, который должен располагаться после элементов 'caption' или 'colgroup', если они конечно присутствуют, но перед элементом 'tbody'. При чем секция может вообще не содержать строк и даже в некоторых случаях допускается отсутствие закрывающего тега. Но, как всегда, мы так поступать не будем, а, соответственно, и описывать такие ситуации не станем ни здесь, ни далее.

Элемент 'tfoot' предназначен для группирования одной или нескольких строк внизу таблицы. Опять же, логика подсказывает, что в данной секции нужно размещать строки с итоговыми ячейками 'td', однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента 'tfoot' в пределах одной таблицы, который разрешается располагать, как непосредственно перед элементом 'tbody', так и сразу же после него. Мы будем использовать второй вариант и всегда располагать 'подвал' таблицы после ее 'тела'. Если итоговых ячеек нет, то элемент 'tfoot' можно оставить пустым, но указывать его для сохранения логической разметки нужно, если мы указали элементы 'thead' и 'tbody'.

Cекций 'tbody' может быть несколько. Располагаются они друг за другом после секции 'thead'. Все они предназначены для размещения обычных строк с данными, сгруппированных по каким-либо признакам, если, конечно, секций несколько. Кроме того, допускается отсутствие строк в секциях 'tbody', но если секции созданы, то использовать строки вне 'thead', 'tbody' и 'tfoot' не разрешается. Короче, если мы решили использовать логическую разбивку таблицы на перечисленные разделы, то нужно соответствовать своим устремлениям до конца.

Теперь давайте рассмотрим простейшее деление таблицы на секции (см. пример 2.15).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Логическая разметка таблицы</title>
</head>
<!-- Заголовок документа не показан на рисунке -->
<body>
	<table border="1">
	<caption>Деление на секции с выделением разным фоном</caption>
		
		<thead style="background-color: yellow">
			<tr>
				<th>Я &ndash; первая заглавная ячейка </th>
				<th>А я &ndash; вторая заглавная ячейка</th>
			</tr>
		</thead>
		
		<tbody style="background-color: green">
			<tr>
				<td>Я &ndash; первая ячейка в первой строке тела</td>
				<td>Я &ndash; вторая ячейка в первой строке тела</td>
			</tr>
			<tr>
				<td>Я &ndash; первая ячейка во второй строке тела</td>
				<td>Я &ndash; вторая ячейка во второй строке тела</td>
			</tr>
		</tbody>
		
		<tfoot style="background-color: grey">
			<tr>
				<td>Итог:</td>
				<td>использовано три фона</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

Пример 2.15. Разбиение таблицы на секции

Может показаться, что введение элементов 'thead', 'tbody' и 'tfoot' излишне. Ведь можно было бы разрешить использовать для выделения и группировки строк универсальный элемент 'div', применяя к нему нужные стили CSS. Однако давайте не будем забывать, что 'div' – элемент физической разметки, а перечисленные элементы осуществляют логическую разметку. Конечно, без стилей CSS они, также как и 'div' свое содержимое никак не изменяют, зато для поисковых машин, вне зависимости от применяемых к ним стилей, дают четкое представление о структуре таблицы, а также виде и степени важности данных, располагающихся в соответствующих разделах.

Для объединения колонок по общему признаку применяются элементы 'col' (от англ. column) и 'colgroup' (от англ. column group). Первый из них является пустым и формируется одиночным тегом <col>, второй формируется парным тегом <colgroup>. Оба элемента должны располагаться сразу после элемента 'caption' или, при его отсутствии, после открывающего тега <table>.

Каждый элемент 'col' представляет одну или несколько колонок, отсчет которых происходит слева направо и соответствует порядку следования элементов 'col' в коде. Если нужно, чтобы элемент представлял несколько колонок, то используется атрибут span, который в качестве значений принимает натуральные числа, указывающие требуемое количество колонок. Рассмотрим использование элемента 'col' подробнее на примере 2.16.

<!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>

Пример 2.16. Использование элемента 'col'

Таким образом, если мы, например, хотим применить общий стиль CSS для колонок с четвертой по восьмую включительно, то необходимо сперва создать элемент 'col', указать в нем атрибут span="3", а затем сформировать еще один элемент 'col' с атрибутом span="5", привязав к нему необходимые стили CSS.

Столбцы таблицы 'col' могут также быть объединены в лексические группы при помощи элемента 'colgroup'. Если мы, например, хотим задать столбцам желтый цвет фона, то необходимо перечислить их внутри контейнера 'colgroup', указав в его открывающем теге атрибут style= "background-color: yellow". В результате отпадает необходимость указывать этот атрибут во всех элементах 'col'. Кроме того, 'colgroup' может использоваться аналогично элементу 'col', и, следовательно, вперемешку с ним. В этом случае для выделения нескольких столбцов также используется атрибут span (см. пример 2.17).

<!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>

Пример 2.17. Использование элементов 'col' и 'colgroup'

Если к ячейкам и строкам таблицы, а также к элементам 'thead', 'tbody' и 'tfoot' через атрибуты class, style или id без проблем применимы практически все свойства CSS, то с элементами 'col' и 'colgroup' дела обстоят как раз наоборот. Дело в том, что использование в этих элементах указанных атрибутов с целью применения к столбцам требуемых стилей CSS не принесет ожидаемого результата, так как практически ни одно свойство CSS просто напросто не будет применено. В итоге мы можем использовать данные элементы только лишь для определения фона и ширины колонок, что явно не соответствует предназначению этих элементов.

Итак, со строками и столбцами разобрались, теперь рассмотрим ячейки. На практике довольно часто возникает необходимость физического объединения сразу нескольких ячеек в одну. Для этих целей в тегах <th> и <td> предусмотрены атрибуты colspan (от англ. column span) и rowspan (от англ. row span), которые в качестве значений принимают, соответственно, число объединяемых ячеек по горизонтали и вертикали. Рассмотрим различные варианты объединения ячеек на примере 2.18.

<!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>

Пример 2.18. Использование атрибутов colspan и rowspan

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

Как было сказано выше, в элемент 'table' главным образом используется для представления табличной информации. Однако в предыдущих версиях HTML таблицы с невидимыми границами, активно использовались для разметки сетки веб-документа. В результате страница состояла из отдельных ячеек, в которых располагались остальные элементы. Такой способ верстки получил название табличной верстки. И не смотря на то, что позднее на смену табличной верстке пришла блочная верстка, в основе которой лежит активное использование элемента 'div', ее использование все еще применяется для разметки отдельных частей документа, например, для создания двухколоночного текста или выравнивания отдельных элементов.

Контрольные вопросы и задания

  1. Опишите основную структуру таблицы.
  2. Каким образом осуществляется объединение ячеек в таблице?

Словарь новых английских слов

word [wə:d] – слово.
break [breɪk] – разрыв, прекратить.
opportunity [,ɔpə'tju:niti] – возможность,
удобный случай.
division [di'viʒən] – раздел, разделение.
bold [bəuld] – жирный.
italic [i'tælik] – курсив, наклонный.
underline [ˌʌndəˈlaɪn] – подчеркнуть.
strike out [strʌɪk ˈaut] – вычеркивать.
subscript [ˈsʌbskrɪpt] – нижний индекс.
superscript [ˈsuːpəskrɪpt] – верхний индекс.
emphasis [ˈɛmfəsɪs] – акцент, выделение.
strong [strɔɳ] – сильный, прочный.
variable ['vɛəriəbl] – переменная.
sample ['sa:mpl] – образец.
definition [defi'ni∫ən] – определение.
quote [kwəut] – цитата.
insert [ɪnˈsɜːt] – вставлять.
reversed [rɪˈvɜːst] – перевернутый, обратный.
ordered [ˈɔːdəd] – упорядоченный, нумерованный (список).
unordered [ʌnˈɔːdəd] – маркированный (список).
description [dis'krip∫ən] – описание.
row [rou] – строка, ряд.
column ['kɔləm] – столбец, колонка.
cell [cel] – ячейка, элемент, клетка.
table ['teibl] – таблица, стол.
row span – диапазон строк.
column span – диапазон столбцов.
self [self] – сам.
parent ['pɛərənt] – родитель.
blank [blæɳk] – чистый, пустой, бланк.
anchor ['æɳkə] – якорь, привязка.
link [link] – связь, ссылка.
foot [fut] – нижнее поле, ступня.
header ['hedə] – заголовок, верхний колонтитул.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх