для чего нужен заголовок таблицы

HTML таблицы основы

Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:

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

Как работает таблица?

Personal pronouns

Субъект	Объект
Единствен. числ.	1 Лицо		Я	меня
	2 Лицо		ты	тебя
	3 Лицо	♂	он	его
		♀	она	её
		o	оно	его
Множ.числ.	1 Лицо		мы	нас
	2 Лицо		вы	вас
	2 Лицо		они	их

Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.

Оформление таблиц

Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.

В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти здесь, можно также использовать шаблон HTML, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.

Примечание: Посмотрите также таблицу personal_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.

Когда не надо использовать таблицы HTML?

HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.

Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :

Упражнение: ваша первая таблица

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

Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент

создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.

В результате получится таблица, которая будет выглядеть примерно так:

Hi, I’m your first cell.	I’m your second cell.	I’m your third cell.	I’m your fourth cell.
Second row, first cell.	Cell 2.	Cell 3.	Cell 4.

Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).

«>» title=»Permalink to Добавление заголовков с помощью элементов

«>Добавление заголовков с помощью элементов

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:

Теперь как выглядит таблица:

Knocky	Flor	Ella	Juan
Breed	Jack Russell	Poodle	Streetdog	Cocker Spaniel
Age	16	9	10	5
Owner	Mother-in-law	Me	Me	Sister-in-law
Eating Habits	Eats everyone’s leftovers	Nibbles at food	Hearty eater	Will eat till he explodes

Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.

Упражнение: заголовки

Попробуем улучшить эту таблицу.

Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

Для чего нужны заголовки?

Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.

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

Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

Слияние нескольких строк или столбцов

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

Исходная разметка выглядит так:

Но результат не такой, как хотелось бы:

Animals
Hippopotamus
Horse	Mare
Stallion
Crocodile
Chicken	Cock
Rooster

Воспользуемся colspan и rowspan чтобы улучшить таблицу.

Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

Стилизация столбцов

Возьмём простой пример:

Data 1	Data 2
Calcutta	Orange
Robots	Jazz

Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент ввести необходимо — иначе к первому столбцу не будет применён стиль.

Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент с атрибутом span, таким образом:

Упражнение: colgroup и col

Теперь попробуйте сами.

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.

Mon	Tues	Wed	Thurs	Fri	Sat	Sun
1st period	English	German	Dutch
2nd period	English	English	German	Dutch
3rd period	German	German	Dutch
4th period	English	English	Dutch

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

Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.

Источник

Урок 55. Заголовок таблицы

На предыдущих уроках я рассказала практически обо всех командах ленты Макет и некоторых командах ленты Конструктор. Настало время научится делать красивые читабельные таблицы и заголовок таблицы. Скачайте файл тут и откройте его. Это кусочек документа с двумя таблицами. Таблица 2 оказалась на границе двух страниц:

Ничего удивительного – бывает часто. Ко всему прочему ячейка оказалась разорванной. Пока мы смотрим документ в электронном виде ничего страшного. А если смотрим печатный документ?

По окончании этого урока вы сможете:

Чтобы мои скриншоты не занимали много места, я уберу из поля зрения поля колонтитулов. Посмотрите на ролике, как это сделать:

Согласитесь, без полей колонтитулов очень удобно работать – лучше воспринимается текст документа. Если вы хотите вернуть поля колонтитулов, то подведите курсор к границе страниц и щелкните два раза.

1. Заголовок таблицы с повтором

Шаг 1. Выделяем заголовок таблицы:

Шаг 2. Назначаем заголовок выделенным строчкам (лента Макет → группа команд Данные → команда Повторить строки заголовков):

Обратите внимание на три обстоятельства:

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

2. Запрет на разрыв ячеек

Шаг 1. Выделяем всю таблицу:

Шаг 2. Запрещаем перенос строк (лента Макет → группа команд Таблица → команда Свойства → диалоговое окно Свойства таблицы → снять галочку «разрешить перенос строк на следующую страницу»):

Обратите внимание на режим «повторять заголовок на каждой странице». Это дублирование команды «Повторить строки заголовков», которая находится на ленте Макет в группе команд Данные.

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

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

Шаг 3. Выравниваем содержимое всей таблицы по центру (выделить всю таблицу → лента Макет → группа команд Выравнивание → команда Выровнять по середине):

Шаг 4. Выровнять первый столбец по правому краю посередине (выделить первый столбец за исключением первой ячейки → лента Макет → группа команд Выравнивание → команда Выровнять по центру по левому краю):

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

3. Таблица с пронумерованными заголовками

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

Шаг 1. Вставим строчку сразу после заголовка (установить курсор в первую ячейку после заголовка → лента Макет → группа команд Строки и столбцы → команда Вставить сверху):

Кстати, попробуйте установить курсор в самую первую ячейку и вставьте строчку после, и вы получите такую картину:

Первая ячейка объединённая, поэтому вот такой сюрприз!

Понять и запомнить!

Будьте осторожны со вставкой строчек после объединённых ячеек!

Шаг 2. Нумеруем ячейки вставленной строчки:

Заодно выровняем номера столбцов по центру ячеек. Чтобы поменьше двигать мышкой, лучше работать с клавиатурой. Последовательность действий: первая ячейка «1» с клавиатуры → клавиша Tab → «2» → клавиша Tab → «3» → клавиша Tab → «4» → клавиша Tab → «5».

Понять и запомнить!

Клавиша Tab позволяет последовательно переходить по ячейкам.

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

Шаг 3. Разбиваем таблицу (текстовый курсор в ячейке «1» → лента Макет → группа команд Объединение → команда Разделить таблицу):

Шаг 4. Назначаем первую пронумерованную строчку заголовком таблицы (шаг 2 первого раздела)

Вот здесь нас подстерегает опасность. Может случиться так, что разделенная таблица окажется на границе двух страниц:

У нас задача: создать впечатление, что эти две таблицы – единое целое. На уроке 51 я сказала, что содержимое ячейки – это полноценный абзац. Следовательно…

Шаг 5. Задаем на символ конца абзаца и на нумерованную строчку режим «не отрывать от следующего (выделить нужную часть → панель быстрого доступа → режим «Абзац не отрывать от следующего»):

Посмотрите на скриншоте, какой объем документа я выделила. Зато теперь я могу быть спокойна: этот кусочек документа будет всегда идти в связке. А на номер таблицы я, побеспокоившись заранее, присвоила стиль текста с режимом «Абзац не отрывать от следующего».

Ещё раз обращаю внимание на удобство работы с настроенной панелью быстрого доступа (Урок 18 и Урок 19).

Осталась последняя проблема: расстояние между двумя таблицами слишком велико. Нам никто не поверит, что это одна таблица.

Шаг 6. Задаем размер символу конца абзаца, равным «1 пт» (выделить символ конца абзаца → ленты Главная → группа команд Шрифт → 1 пт в поле размера шрифта):

Всё, задача выполнена.

Теперь вы сможете:

Источник

HTML таблицы продвинутые возможности и доступность

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Необходимые знания:	Базовый HTML (Введение в HTML).
Цель:	Изучить более продвинутые возможности HTML таблиц и их доступность.

«>» title=»Permalink to Добавление заголовка к таблице с помощью «>Добавление заголовка к таблице с помощью

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

Заголовок помещают сразу после тега

.

Примечание: Атрибут summary (en-US) также может быть использован в

элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

_ _и_

«>_ _и_

» title=»Permalink to Добавление структуры с помощью

, и

«>Добавление структуры с помощью

, и

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

Примечание:

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

и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

Ваша готовая таблица должна выглядеть примерно так:

Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

Вложенные таблицы

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

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

Разметка простой вложенной таблицы:

Результат которого выглядит примерно так:

title1	title2	title3
cell1 cell2 cell3	cell2	cell3
cell4	cell5	cell6

Таблицы для пользователей с ограниченными возможностями

Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.

Items Sold August 2016

Clothes			Accessories
Trousers	Skirts	Dresses	Bracelets	Rings
Belgium	Antwerp	56	22	43	72	23
	Gent	46	18	50	61	15
	Brussels	51	27	38	69	28
The Netherlands	Amsterdam	89	34	69	85	38
	Utrecht	80	12	43	36	19

Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.

В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.

Использование заголовков столбцов и строк

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

Атрибут scope

И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.

Атрибуты id и headers

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

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

Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:

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

Упражнение: играем со scope и headers

Примечание: вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).

Заключение

Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите Styling Tables.

Источник