Html5 таблица – HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки

HTML5 | Таблицы

Таблицы

Последнее обновление: 08.04.2016

Для создания таблиц в html используется элемент table. Каждая таблица между тегами <table> и </table> содержит строки, который представлены элементом tr. А каждая строка между тегами <tr> и </tr> содержит ячейки в виде элементов td.

Создадим простейшую таблицу:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Таблицы в HTML5</title>
	</head>
	<body>
		<table>
			<tr>
				<td>Модель</td> <td>Компания</td> <td>Цена</td>
			</tr>
			<tr>
				<td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
			</tr>
			<tr>
				<td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
			</tr>
			<tr>
				<td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
			</tr>
		</table>
	</body>
</html>

Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.

При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead, tfoot и tbody. Для их применения изменим таблицу следующим образом:


<table>
	<caption><b>Популярные смартфоны 2015</b></caption>
	<thead>
		<tr>
			<th>Модель</th> <th>Компания</th> <th>Цена</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
		</tr>
		<tr>
			<td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
		</tr>
		<tr>
			<td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<th colspan="3">Информация по состоянию на 17 марта</th>
		</tr>
	</tfoot>
</table>

В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td, а th. Элемент th выделяет заголовок жирным. А все остальные строки заключаются в tbody

Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.

Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.

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

Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Таблицы в HTML5</title>
		<style>
			td{
				width: 60px; 
				height:60px; 
				border: solid 1px silver; 
				text-align:center;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td rowspan="2">1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>6</td>
				<td colspan="2">7</td>
			</tr>
		</table>
	</body>
</html>

Краткий курс HTML 5. Таблицы — Exlab

10. Таблицы

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

<table border="1">
   <caption>Выписка лицевого счета</caption>
   <tr>
      <th>Месяц</th>
      <th>Баланс</th>
   </tr>
   <tr>
      <td>Январь</td>
      <td>500 грн.</td>
   </tr>
</table>

Если необходимо отобразить описание таблицы, то его можно поместить в элемент <caption>, располагаемый сразу за открывающим тегом <table>. Далее последовательно располагаются строки таблицы, обозначаемые тегом <tr>. Каждая строка содержит в себе ячейки <th> или <td>, формируя таким образом столбцы таблицы.

Элементы <th> обозначают ячейки с заголовками столбцов или строк. Содержимое их по умолчанию отображается браузерами жирным начертанием и центрируется. Тег <td> же предназначен для всех остальных ячеек с данными. Наличие заголовков <th> не является обязательным, но в таблице должна быть хотя бы одна строка с одной ячейкой.

С помощью атрибута border элемента <table>

можно определить, будут ли ячейки таблицы обведены рамкой или нет. Значение 1 указывает, что рамка нужна, пустое значение — нет.

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

Логично, что в каждой строке должно быть одинаковое количество ячеек, чтобы таблица имела прямоугольный вид. Но как быть, если необходимо растянуть какую-нибудь ячейку на несколько столбцов или строк? На помощь приходят атрибуты colspan и rowspan элементов <td> и <th>. Присвоив ячейке атрибут colspan="3", вы сообщите браузеру, что этот элемент занимает место трех ячеек в строке — свое собственное и двух следующих. Соответственно, две следующих ячейки указывать не нужно, и строка будет содержать на 2 элемента <td> (или <th>) меньше.

Этот пример демонстрирует объединение ячеек в таблице.
Объединение ячеек в таблице

Аналогично, атрибут rowspan="2", например, в пятой ячейке строки означает, что она занимает два места в своем столбце, и в следующем элементе

<tr> пятую ячейку нужно пропустить. Помните, что если вы примените один из этих атрибутов, но забудете удалить «лишние» ячейки, то браузер сместит их в следующий столбец, передвинув остальные ячейки еще дальше и исказив тем самым таблицу.

Группирование строк и столбцов

Еще 5 тегов предназначены для объединения строк и столбцов в группы. Это необходимо, когда, например, одна ячейка заголовка соответствует нескольким столбцам с данными или, скажем, последняя строка таблицы содержит итоговые значения, лексически выделяясь на фоне остальных строк.

СреднийКрасноглазых
РазмерВес
Среднее1.80.002541.5%
Самцы1.90.00340%
Самки1.70.00243%
Популяция фруктовых мух

Для объединения строк в группы предназначены три тега. Во-первых, строки с ячейками заголовка можно поместить в элемент <thead>. Во-вторых, завершающие строки с «итоговыми» ячейками — в элемент <tfoot>. Наконец, все остальные строки с данными группируются в одном или нескольких элементах <tbody>. Таким образом вы можете сформировать необходимое вам количество групп. Несмотря на то, что строки из <tfoot> будут отображены последними, размещать сам элемент <tfoot> можно как после последнего, так и перед первым элементом <tbody> (после <thead>). В одной таблице может быть только по одному элементу <thead> и <tfoot>, и любое количество <tbody>. Визуально эти теги не отличаются, пока вы не определите для них соответствующие стили CSS.

Приведенный выше пример таблицы формируется приблизительно таким кодом:

<table>
   <col/>
   <colgroup span="2"></colgroup>
   <col/>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2" scope="colgroup">Средний</th>
         <th rowspan="2" scope="col">Красноглазых</th>
      </tr>
      <tr>
         <th scope="col">Размер</th>
         <th scope="col">Вес</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th scope="rowgroup">Среднее</th>
         <td>1.8</td>
         <td>0.0025</td>
         <td>41.5%</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th scope="row">Самцы</th>
         <td>1.9</td>
         <td>0.003</td>
         <td>40%</td>
      </tr>
      <tr>
         <th scope="row">Самки</th>
         <td>1.7</td>
         <td>0.002</td>
         <td>43%</td>
      </tr>
   </tbody>
</table>

Если вы используете

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

Для группирования столбцов применяется пустой тег <col /> и парный <colgroup>. В отличие от элементов, группирующих строки, эти теги размещаются сразу после элемента <caption> или, если его нет, за открывающим тегом <table>. Они не включают в себя ячейки, а лишь указывают на объединяемые столбцы. Оба тега поддерживают атрибут span, значением которого является количество группируемых столбцов. Если span не указан, то он считается равным единице.

На самом деле, <col /> не создает группу, а лишь позволяет определить общие атрибуты столбцов без необходимости указывать их в каждой ячейке. Например, чтобы назначить всем ячейкам первых двух столбцов class="myData", достаточно добавить в начало таблицы элемент:

<col span="2" />

<colgroup> позволяет сделать то же самое, но при этом лексически объединяет столбцы в группу. Бывает необходимость сгруппировать столбцы, но присвоить им разные классы или другие стандартные атрибуты. В таком случае в элемент <colgroup> помещается необходимое количество тегов <col />. При этом атрибут span указывается только в них, а его значение для <colgroup> определяется автоматически, как сумма значений span, присвоенных расположенным внутри элементам <col />. Другие теги в <colgroup> запрещены.

Размещая последовательно несколько элементов <col /> и/или <colgroup> в таблице, можно добиться группирования столбцов любым необходимых образом. Помните, что если вы применяете эти теги, то в итоге должны перечислить в них все столбцы таблицы, количество которых определяется строкой, с наибольшим количеством ячеек. Например, если в таблице 5 столбцов, а вам необходимо сгруппировать только второй и третий, указав им классы second и myGroup соответственно, то выглядеть это будет следующим образом:

<col />
<colgroup>
   <col />
   <col />
</colgroup>
<col span="2" />

Атрибут scope элемента <th> позволяет указать, относится ли этот заголовок к строке, столбцу или какой-либо группе. Допустимые значения:

col — ячейка является заголовком столбца
row — ячейка является заголовком строки
colgroup — ячейка является заголовком группы столбцов, в которой находится
rowgroup — ячейка является заголовком группы строк, в которой находится

Элементы <td> и <th> поддерживают также атрибут headers, позволяющий дополнительно указать заголовки, относящиеся к данной ячейке. Для этого у ячеек с этими заголовками должны быть указаны id, которые и надо перечислить в атрибуте headers через пробел.

Структура таблицы | WebReference

Каждая таблица состоит из строк и ячеек, минимально может быть одна строка и одна ячейка. В таком случае, впрочем, непонятно, зачем использовать таблицу, потому что как такового табличного представления уже нет. Кроме того, таблице можно задать заголовок, который кратко описывает её содержимое, указать «шапку», «тело» и «подвал» таблицы. Они нужны для стилевого или смыслового выделения части данных. В примере 1 показано создание таблицы, содержащей все упомянутые компоненты.

Пример 1. Создание таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
   }
   td, th {
    border: 1px solid #333; /* */
    padding: 3px; /* Поля в ячейках */
   }
   thead, tfoot {
    background: #f0f0f0; /* Цвет фона */
   }
   tbody:hover {
    background: #f5e0cd; /* Цвет фона при наведении курсора */
    color: #ce232a; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table>
   <caption>Материал для гаек по ГОСТ 1759.5–87</caption>
   <thead>
    <tr>
     <th>Класс прочности</th>
     <th>Технологические процессы</th>
     <th>Марка стали</th>
     <th>Обозначение стандарта</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>4</td>
     <td>Горячая штамповка</td>
     <td>20, Ст3кп3, Ст3сп3</td>
     <td>ГОСТ 1050–79</td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td rowspan="2">5</td>
     <td>Холодная штамповка</td>
     <td>10, 10кп</td>
     <td>ГОСТ 0702–78</td>
    </tr>
    <tr>
     <td>Горячая штамповка</td>
     <td>20</td><td></td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td>6</td>
     <td>Холодная штамповка</td>
     <td>10, 10кп, 15, 15кп</td>
     <td>ГОСТ 0702–78</td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td rowspan="2">8, 9</td>
     <td>Горячая штамповка</td>
     <td>35</td>
     <td rowspan="2">ГОСТ 1050–74<br>ГОСТ 4543–71<br>ГОСТ 10702–78</td>
    </tr>
    <tr>
     <td>Холодная штамповка</td>
     <td>20, 20кп</td>
    </tr>
   </tbody>
   <tfoot>
    <tr>
     <th>Класс прочности</th>
     <th>Технологические процессы</th>
     <th>Марка стали</th>
     <th>Обозначение стандарта</th>
    </tr>
   </tfoot>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Таблица с заголовком, «шапкой» и «подвалом»

Рис. 1. Таблица с заголовком, «шапкой» и «подвалом»

При использовании элементов <thead>, <tbody> и <tfoot> придерживайтесь следующих правил.

  • Заголовок таблицы <caption> пишется в самом верху таблицы, сразу после открывающего тега <table>.
  • <thead> вставляется вверху таблицы, сразу после заголовка, если он присутствует.
  • <tfoot> вставляется после <tbody>, при этом отображается всегда в самом низу таблицы.
  • Элемент <tbody> для таблиц нужен обязательно, но для простых таблиц без <thead> и <tfoot> его можно не указывать. Браузеры сами научились вставлять его автоматически в код, понимая, что большинство разработчиков ленятся добавлять элемент, который визуально никак не влияет на таблицу.
  • <tbody> может быть один или несколько, вы сами решаете, по какому принципу их добавлять. Например, в примере выше в некоторых строках имеются объединения ячеек и чтобы строки при наведении на них курсора мыши выделялись как нам требуется, мы их объединяем в <tbody> согласно нашей логике.

Колонки

Кроме объединения группы строк через <thead> есть ещё один способ группирования ячеек — по колонкам с помощью элементов <col> и <colgroup>. Каждая колонка таблицы сопоставляется со своим элементом <col> который пишется после открывающего тега <table>. Часть колонок можно объединять с помощью атрибута span, его значением выступает число объединяемых колонок. Элементы <col> допустимо помещать в один или несколько <colgroup>, объединяя колонки согласно нашим понятиям.

Элементы <col> и <colgroup> никак не влияют на вид таблицы и её отображение в браузере и применяются только со стилями, как показано в примере 2. Между колонками здесь добавляются двойные линии.

Пример 2. Колонки таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%;
    border-collapse: collapse;
   }
   td, th {
    border: 1px solid #333;
    padding: 3px;
   }
   col { border-left: 4px double #333; }
   col:first-child { border-left-width: 1px; }
  </style>
 </head>
 <body>
  <table>
   <colgroup>
    <col>
    <col span="3">
    <col>
   </colgroup>
   <tr>
    <th rowspan="2">Класс прочности гайки</th>
    <th colspan="4">Сопрягаемые болты</th>
   </tr>
   <tr>
    <th colspan="3">Класс прочности</th>
    <th>Диаметр резьбы</th>
   </tr>
   <tr>
    <td>4</td><td>3,6</td>
    <td>4,6</td><td>4,8</td>
    <td>&gt; М16</td>
   </tr>
   <tr>
    <td>5</td><td>5,6</td>
    <td>5,8</td><td></td>
    <td>≤ М16</td>
   </tr>
   <tr>
    <td>6</td><td>6,8</td>
    <td></td><td></td>
    <td>≤ М48</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2. Заметим, что похожего результата можно добиться заменив в стилях селектор col на td и th.

Двойные линии между колонок

Рис. 2. Двойные линии между колонок

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Таблицы | WebReference

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

Для добавления таблицы на веб-страницу используется элемент <table>. Он служит контейнером для других элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов <tr> и <td> соответственно. Таблица должна содержать хотя бы одну ячейку (пример 1). Вместо <td> допускается использовать элемент <th>. Текст в такой ячейке обычно отображается браузером жирным шрифтом и выравнивается по центру. В остальном разницы между ячейками, созданными через <td> и <th>, нет.

Пример 1. Создание таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th>Заголовок 1</th><th>Заголовок 2</th>
   </tr>
   <tr>
    <td>Ячейка 1</td><td>Ячейка 2</td>
   </tr>
  </table>
 </body>
</html>

Изначально рамка вокруг ячеек таблицы не выводится, поэтому, чтобы показать их границы к <table> добавлен атрибут border (рис. 1).

Вид таблицы

Рис. 1. Вид таблицы

Особенности таблиц

У каждого параметра таблицы есть своё значение, установленное по умолчанию. Из этого следует, что если какой-то атрибут пропущен, то неявно он всё равно присутствует, причём с некоторым значением. Поэтому вид таблицы может оказаться совсем другим, чем предполагал разработчик. Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее.

  • Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется в некоторых случаях для представления сложных данных.
  • Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически исходя из суммарной ширины содержимого ячеек плюс ширина границ между ячейками, поля вокруг содержимого и расстояние между ячейками.
  • Если для таблицы задана её ширина в процентах или пикселях, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается несмотря на указанные размеры.
  • Пока таблица не загрузится полностью, её содержимое не начнёт отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого нужно знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится всё, что находится в ячейках, и только потом отображает таблицу.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.11.2015

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *