Разметка таблицы в html: Таблицы | HTML

Содержание

HTML :: Таблицы

Создание таблицы
Создание заголовка таблицы
Формирование строк и ячеек таблицы
Деление строк таблицы на логические секции
Объединение колонок в группы
Физическое объединение ячеек таблицы
Понятие табличной верстки

Создание таблицы

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

HTML Результат htmlCodes

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

Пример №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).

HTML Результат htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Логическая разметка таблицы</title>
</head>
<!-- Заголовок документа не показан на рисунке -->
<body>
	<table border="1">
	<caption>Деление на секции с выделением разным фоном</caption>
		
		<thead>
			<tr>
				<th>Я &ndash; первая заглавная ячейка </th>
				<th>А я &ndash; вторая заглавная ячейка</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td>Я &ndash; первая ячейка в первой строке тела</td>
				<td>Я &ndash; вторая ячейка в первой строке тела</td>
			</tr>
			<tr>
				<td>Я &ndash; первая ячейка во второй строке тела</td>
				<td>Я &ndash; вторая ячейка во второй строке тела</td>
			</tr>
		</tbody>
		
		<tfoot>
			<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.

HTML Результат htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с колонками таблицы</title>
</head>
<body>
	<!-- Создадим таблицу с границами -->
	<table border="1">
		<caption>Таблица с 8 колонками</caption>
		
		<!-- Установим желтый фон первых двух колонок  -->
		<col  span="2">
		
		<!-- Фон третьей колонки сделаем красным  -->
		<col >
		
		<!-- Три колонки пропустим  -->
		<col span="3">
		
		<!-- Фон седьмой колонки сделаем серым  -->
		<col >
		
		<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).

HTML Результат htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Использование элементов «col» и «colgroup»</title>
</head>
<body>
	<table border="1">
		<caption>Таблица с 8 колонками</caption>
		
		<!-- Первой колонке установим синий фон -->
		<col>
		
		<!-- Зададим колонкам ширину в 60 пикселей -->
		<colgroup>
			<col>
			<col>
			<col>
		</colgroup>
		
		<!-- А этим в 100 пикселей -->
		<colgroup>
			<col>
			<col>
		</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.

HTML Результат 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">1.1+1.2</td> 
		
		<td>1.3</td> <td>1.4</td> 
		
		<!-- Объединяем 6 ячеек -->
		<td  rowspan="3" colspan="2" >
			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" >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
Вернуться к оглавлению учебника

css — Разметка нестандартной таблицы html

Задать вопрос

Вопрос задан 3 года 11 месяцев назад

Изменён 3 года 11 месяцев назад

Просмотрен 68 раз

помогите, пожалуйста сверстать подобную таблицу средствами html и сss. Буду крайне благодарен.

html
css
table

Разметка выглядит так, остальное дело стилей

<table border="1" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td colspan="3">Текст</td>
			<td colspan="2">Текст</td>
			<td colspan="5">Текст</td>
			<td colspan="3">Текст</td>
			<td colspan="4">Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
		<tr>
			<td><span>Текст</span></td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td rowspan="2">Текст</td>
			<td rowspan="2">Текст</td>
			<td rowspan="2">Текст</td>
		</tr>
		<tr>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
		<tr>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
		<tr>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
		<tr>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
		<tr>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
		<tr>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
		<tr>
			<td colspan="19">Текст</td>
			<td>Текст</td>
			<td>Текст</td>
		</tr>
	</tbody>
</table>

: Элемент Table — HTML: Язык гипертекстовой разметки

Элемент HTML

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на включение.

элементов,

необязательный элемент

одно из следующих:

ноль или более

элементов

один или несколько

элементов

необязательный элемент

,
ноль или более
Категории контента	Содержание потока
Разрешенный контент	В таком порядке: дополнительный элемент
Отсутствие тега	Нет, начальный и конечный теги обязательны.
Разрешенные родители	Любой элемент, который принимает потоковое содержимое
Неявная роль ARIA	`стол`
Разрешенные роли ARIA	Любой
Интерфейс DOM	`HTMLTableElement`

Атрибуты

Этот элемент включает глобальные атрибуты.

Устаревшие атрибуты

выравнивание

Этот перечисляемый атрибут указывает, как таблица должна быть выровнена внутри содержащего документа. Может принимать следующие значения:

слева : таблица отображается в левой части документа;
center : таблица отображается в центре документа;
справа : таблица отображается в правой части документа.

Установите margin-left и margin-right на auto или margin на 0 auto для достижения эффекта, аналогичного атрибуту align.

bgcolor

Цвет фона таблицы. Это 6-значный шестнадцатеричный код RGB с префиксом « # ». Также можно использовать одно из предопределенных ключевых слов цвета.

Для достижения аналогичного эффекта используйте свойство CSS background-color .

граница

Этот целочисленный атрибут определяет в пикселях размер рамки, окружающей таблицу. Если установлено 0, 9Атрибут кадра 0004 имеет значение void.

Для достижения аналогичного эффекта используйте сокращенное свойство CSS border .

набивка

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

Чтобы добиться аналогичного эффекта, примените свойство border-collapse к элементу

со значением, установленным на свернуть, и свойство padding к элементам

интервал ячеек

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

Чтобы добиться аналогичного эффекта, примените свойство border-spacing к элементу

. border-spacing не имеет никакого эффекта, если border-collapse настроен на свертывание.

рама

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

Для достижения аналогичного эффекта используйте стиль границы и свойства border-width .

правила

Этот перечисляемый атрибут определяет, где в таблице должны появляться правила, т. е. строки. Может принимать следующие значения:

нет , что означает, что никакие правила отображаться не будут; это значение по умолчанию;
groups , что приведет к отображению правил между группами строк (определено параметром

, и элементов) и только между группами столбцов (определяемыми элементами и );

rows , что приведет к отображению правил между строками;

столбцов , что приведет к отображению правил между столбцами;

all , что приведет к отображению правил между строками и столбцами.

Для достижения аналогичного эффекта примените свойство border к соответствующим элементам

, , , или .

резюме

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

`Другие примеры`

 Простая таблица с заголовком
<таблица>

Таблица с thead, tfoot и tbody


<таблица>


  <тело>

Таблица с colgroup


<таблица>


    <тд>309миллион

Таблица с colgroup и col


<таблица>

<столбец>
    <колл.  промежутка = "2">

Простая таблица с заголовком


<таблица>

 стол
{
граница коллапса: коллапс;
интервал между границами: 0px;
}
стол, т, тд
{
отступ: 5px;
граница: 1px сплошной черный;
}

`Вопросы доступности`

`Подписи`

Предоставление элемента


  <тело>

Предоставление объявления scope="col" в элементе

Джон Доу

Джейн Доу

Имя Фамилия

Джон Доу

Джейн Доу

Содержимое заголовка 1 Содержимое заголовка 2

Основное содержание 1 Основное содержание 2

Содержимое нижнего колонтитула 1 Содержимое нижнего колонтитула 2

Страны Столицы Население Язык

США Вашингтон, округ Колумбия Английский

Швеция Стокгольм 9 миллионов Шведский

Лайм Лимон Оранжевый

Зеленый Желтый Оранжевый

Потрясающие данные

Имя ШЕСТНАДЦАТЕРИЧНЫЙ HSLa RGB

Бирюзовый #51F6F6 hsla(180, 90%, 64%, 1) rgba(81, 246, 246, 1)

Золотарник #F6BC57 hsla(38, 90%, 65%, 1) rgba(246, 188, 87, 1)

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

Предоставление объявления scope="row" в элементе

поможет описать, что ячейка является первой в строке.

MDN Столы для слабовидящих пользователей
Таблицы с двумя заголовками • Таблицы • Учебные пособия W3C WAI по веб-доступности
Таблицы с неправильными заголовками • Таблицы • Учебные пособия по веб-доступности W3C WAI
H63: использование атрибута области для связывания ячеек заголовков и ячеек данных в таблицах данных | Методы W3C для WCAG 2.0

Столы сложные

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

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

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

MDN Столы для слабовидящих пользователей
Таблицы с многоуровневыми заголовками • Таблицы • Учебники W3C WAI по веб-доступности
h53: Использование атрибутов id и заголовков для связывания ячеек данных с ячейками заголовков в таблицах данных | Методы для W3C WCAG 2.0

Технические характеристики

Спецификация	Статус	Комментарий
HTML Living Standard Определение «табличного элемента» в этой спецификации.	Уровень жизни
HTML5 Определение «табличного элемента» в этой спецификации.	Рекомендация

Совместимость с браузером

Таблица совместимости на этой странице создана из структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet
`таблица`	Chrome 9 Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`выравнивание` Устарело	Хром Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`bgcolor` Устарело	Хром Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`граница` Устарело	Хром Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`cellpadding` Устарело	Хром Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`Cellspacing` Устарело	Chrome Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`рама` Устарело	Хром Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`правила` Устарело	Chrome Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`сводка` Устарело	Chrome Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0
`ширина` Устарело	Хром Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка Да	Опера Полная поддержка Да	Сафари Полная поддержка Да	WebView Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка 1. 0

Легенда

Полная поддержка: Полная поддержка
Устарело. Не для использования на новых веб-сайтах.: Устарело. Не для использования на новых веб-сайтах.

См. также

свойств CSS, которые могут быть особенно полезны для оформления <таблица> элемент:
- ширина для управления шириной таблицы;
- border , border-style , border-color , border-width , border-collapse , border-spacing для управления внешним видом границ ячеек, правил и рамки;
- margin и padding для стилизации содержимого отдельной ячейки;
- выравнивание по тексту и выравнивание по вертикали , чтобы определить выравнивание текста и содержимого ячейки.

Почему в разметке страницы используется так много HTML-таблиц?

спросил 11 лет, 5 месяцев назад

Изменено 9 лет, 5 месяцев назад

Просмотрено 908 раз

Я пытаюсь заняться веб-разработкой, поэтому начал изучать HTML, CSS и JavaScript. Я очень хорошо справляюсь с javascript, но я все еще не могу сделать ничего с помощью HTML и CSS, чтобы спасти свою жизнь. Я собирался спросить о некоторых местах или советах по улучшению, но я знаю, что вопрос задавался бесчисленное количество раз и был просто удален, поэтому я решил, что просто просмотрю исходный код некоторых сайтов других людей.

Я постоянно вижу столы слева и справа. Есть ли веская причина для использования таблиц?

Для вывода табличных данных.

Вот несколько вопросов, которые следует задать себе при выборе между таблицами и CSS-контейнерами.

Таблицы предназначены для табличных данных. Период.
Тег
— это , а не зло. Несмотря на то, что думают и говорят некоторые люди, смысл CSS не в том, чтобы никогда его не использовать. Однако следствием принципа семантического HTML является то, что вы должны никогда не используйте таблицы для макета . Позвольте мне повторить это еще раз, как отдельный абзац, для акцента:
Никогда не используйте таблицы для компоновки. Всегда.
Если вы не можете решить, является ли стол правильным выбором, задайте себе следующие вопросы:
«Имеют ли строки или столбцы информации общий атрибут?»
«Если бы я изменил порядок строк или столбцов, это все еще имело бы смысл?»
«Если бы я переставил оси таблицы (превратил строки в столбцы и наоборот), это все равно имело бы смысл?»
Если ответом на вышеприведенное обычно является «Хмм… Наверное, нет», тогда вам не следует использовать таблицу.
Если вам нужно больше убедительности, см. «Почему таблицы плохи (для макета) по сравнению с семантическим HTML + CSS» .
3
Предполагая, что вы имеете в виду таблицы, используемые в качестве макета страницы, а не только для табличных данных…
Вы видите таблицы, потому что CSS неудобен в использовании (по общему признанию, сейчас меньше, чем несколько лет назад). В какой-то момент человек должен выполнить работу. Чтобы сделать это «правильно» с помощью CSS, требуется бесконечная суета и эксперименты. Таблицы, с другой стороны, можно понять интуитивно.
Если вы хотите сделать это правильно (используя CSS) и не хотите тратить свою жизнь на CSS, лучшим компромиссом будет остановиться на нескольких разных макетах и скопировать немного CSS из шаблонов веб-сайтов. Используйте шаблоны в качестве отправной точки. Начинать с нуля с CSS — это путь к разочарованию.
4
Табличные макеты в некотором роде легче освоить, чем чисто CSS-макеты для людей, только начинающих изучать HTML. Кроме того, раньше вы не могли надежно использовать CSS и заставить его работать во всех браузерах. Таким образом, практически все учебники по HTML вплоть до 2000 года или около того использовали таблицы исключительно для макетов. Большая часть этого HTML-кода была передана другим сайтам (через View Source), и многие люди узнали из этих руководств и не удосужились изучить макеты CSS.
Я предложу себя здесь на флэйм и скажу, что все будет хорошо, если вы начнете делать макеты в таблицах до изучения CSS. Различия на начальном уровне в лучшем случае незначительны. Вы не сможете делать действительно сложные макеты ЛИБО, пока у вас не будет года или двух опыта, так что особой разницы нет. Начните с таблиц, чтобы получить что-то на экране и сохранить интерес, и медленно продолжайте читать CSS (который явно лучше в долгосрочной перспективе).
Категории: Разное
Навигация по записям
Назад
Вперед
Оставить комментарий
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

© 2019 Штирлиц Сеть печатных салонов в Перми
Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.
Карта сайта

Штирлиц — Сеть печатных салонов в Перми

Разметка таблицы в html: Таблицы | HTML | CodeBasics

HTML :: Таблицы

Создание таблицы

Создание заголовка таблицы

Формирование строк и ячеек таблицы

Деление строк таблицы на логические секции

Объединение колонок в группы

Физическое объединение ячеек таблицы

Понятие табличной верстки

Быстрый переход к другим страницам

css — Разметка нестандартной таблицы html

: Элемент Table — HTML: Язык гипертекстовой разметки

Атрибуты

Устаревшие атрибуты

`Другие примеры`

`Вопросы доступности`

`Подписи`

Примеры

Простой стол

Область видимости строк и столбцов

Пример

Столы сложные

Технические характеристики

Совместимость с браузером

Легенда

См. также

Почему в разметке страницы используется так много HTML-таблиц?

Таблицы предназначены для табличных данных. Период.

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