Как правильно верстать HTML-таблицы
Учимся верстать таблицы так, чтобы их верно понимали браузеры, поисковики и люди с ограниченными возможностями.
Из этой статьи вы узнаете, как верстать таблицы с учётом не только синтаксиса, но и семантики — то есть обозначать нужные части таблицы тегами, которые отражают их содержание.
Знакомство с семантической вёрсткой
Семантический подход к вёрстке подразумевает использование HTML-тегов в соответствии с их семантикой (предназначением), а его суть заключается в верности выбора тегов и их взаимного расположения.
Семантические теги передают смысл (или обозначают важность) содержащегося в них контента.
Семантический подход — противоположность визуальному, при котором важно только то, как HTML-страница выглядит.
Почему семантика так важна
Она повышает доступность контента. Тогда его лучше понимают:
Семантически верно размеченный контент может выглядеть абсолютно так же, как и свёрстанный без учёта семантики. Это касается любых элементов на HTML-странице.
Так, можно использовать для всех них тег
Для оформления страниц при семантической вёрстке применяют каскадные таблицы стилей (CSS).
Рассмотрим, какие теги отвечают за вёрстку таблиц, когда и зачем нужен каждый.
Frontend-разработчик, программист, дизайнер. Три года в разработке сайтов и приложений, около девяти — в дизайне. Был графдизайнером в языковой школе ILS и разработчиком в IT-компании IVIT. Сейчас преподаёт в Skillbox.
Строки и ячейки таблицы
Каждая таблица состоит из строк и ячеек, а задаётся тегом — это контейнер для остальных тегов таблицы.
Тег образует контейнер для создания строки таблицы. Каждая ячейка в такой строке устанавливается с помощью тега (хотя первая может быть задана и тегом ).
Важно понимать. Дочерними элементами строки могут быть только ячейки (и заголовочная ячейка ). А сама строка дочерним элементом ячейки быть не может. Это ограничивает возможную вложенность тегов.
Мы видим три строки (элементы ). В каждой из строк по три ячейки ( ). Представим это HTML-кодом:
Объединение ячеек
Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.
И тут важно не запутаться:
Атрибут colspan тегов и объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.
Атрибут rowspan тегов и объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.
Рассмотрим пару примеров:
Вторая ячейка первой строки пересекает два столбца. То есть она растянулась по горизонтали и приняла в себя третью ячейку первой строки. Третья ячейка второй строки пересекает две строки, то есть растянулась по вертикали, заняв и третью ячейку третьей строки.
Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:
Как такое сверстать:
Здесь вторая ячейка второй строки занимает два столбца и две строки. Обратите внимание, что во второй строке нет третьей ячейки и в третьей строке нет второй и третьей ячеек. Теперь места этих ячеек занимает вторая ячейка второй строки.
Заголовок таблицы
Этот тег следует включать в любую таблицу. Где бы вы его ни разместили, его содержимое будет выведено перед таблицей. Изменить это можно с помощью свойства caption-side (значение top — для вывода до таблицы, и bottom — после).
Тег по умолчанию выравнивает своё содержимое по центру. Чтобы установить выравнивание по левому или правому краю, достаточно поменять значение свойства text-align.
Зачем нужен заголовок?
Примечание. Если дизайнер не предусмотрел заголовок таблицы, то хороший разработчик придумает его, добавит в разметку и скроет через CSS. Это повысит доступность контента.
Даже скрытый заголовок всё равно доступен при навигации по странице с помощью клавиатуры. И речевой браузер для людей с ограниченными возможностями тоже понимает тег — читая текст в этом теге, он меняет интонацию, темп речи, повышает громкость голоса и тому подобное.
Структура таблиц
Согласно стандарту HTML5, в таблице может быть только по одной секции thead и tfoot, а вот tbody — несколько.
Эти элементы полезны не только для доступности, но и для стилизации (как логичные точки добавления CSS к таблице).
Шапка таблицы
Этим тегом задают заголовочную секцию таблицы. Чаще всего речь идёт о первой строке — содержащей заголовки столбцов.
Браузер и поисковики считают эту часть заголовочным колонтитулом таблицы. Например, при печати колонтитулы таблицы будут на каждой напечатанной странице — и благодаря такой шапке вы не забудете, что значат данные каждого столбца.
Заголовки столбцов и строк. Тег
Тег задаёт особые ячейки, с которых начинаются строки или столбцы. В такой ячейке обычно хранится атрибут для всех данных строки или столбца.
Как мы и говорили выше, к содержимому таких ячеек применяется определённый стиль: по умолчанию это выделение жирным шрифтом и выравнивание по центру ячейки.
Благодаря заголовочным ячейкам таблица выглядит лучше, а искать данные в ней становится проще.
Важно. Не применяйте для визуального форматирования — только для выделения ячейки-заголовка. Этот принцип касается всех элементов разметки, которые обладают семантикой.
Тег даёт ещё одно преимущество: вместе с атрибутом scope он связывает каждый заголовок со всеми данными строки или столбца. То есть добавляет к интуитивной, визуально считываемой связи такую, которую понимают и программы.
К тегу и атрибуту scope мы вернёмся ближе к концу статьи, где подробнее поговорим о доступности таблиц для пользователей с ограниченными возможностями.
Тело таблицы
Секция содержит основную часть информации и группирует главные части таблицы. То есть можно использовать сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.
Тег семантически важен: браузер, поисковые роботы и помощники для людей с ограниченными возможностями благодаря ему понимают, где находится основное содержимое таблицы.
| Месяц | Дни недели | Оплата(тыс. р.) |
|---|---|---|
| Январь | Понедельник | 50 |
| Вторник | 40 | |
| Среда | 35 | |
| Четверг | 40 | |
| Пятница | 15 | |
| Суббота | 60 | |
| Воскресенье | 30 | |
| Февраль | Понедельник | 20 |
| Вторник | 25 | |
| Среда | 15 | |
| Четверг | 70 | |
| Пятница | 77 | |
| Суббота | 63 | |
| Воскресенье | 30 |
Данные основной части таблицы надо сгруппировать по смыслу. У нас сначала идёт январь, затем февраль. Значит, для данных каждого месяца логично использовать свой :
Подвал таблицы
Секция используется для группировки содержимого нижней части таблицы.
Семантически это итог таблицы (например, результат подсчёта сумм по столбцам).
| Нечётное | Чётное |
|---|---|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа | |
Важно помнить!
Теги и нужны не всегда. Бывают таблицы без шапки и подвала.
К тому же браузер всё равно подставит этот тег сам, а всегда полагаться на браузеры — значит оставить место для возможных ошибок.
| 1 | Мавзалеев И. В. | 10.09.1992 |
| 2 | Киреева А. Ю. | 02.05.1996 |
| 3 | Корнеев И. Ю. | 09.10.1990 |
| 4 | Тресков В. А. | 25.03.1993 |
| 5 | Ибрагимов А. Е. | 15.10.1994 |
| 6 | Борисенко Д. С. | 10.10.1991 |
Теги и
C помощью тега удобно стилизовать столбцы таблицы через CSS (не приходится писать классы для каждой ячейки в разных строках). Это крутая фишка для любого разработчика.
Для группировки тегов применяют специальный тег :
позволяет задать стиль сразу для группы столбцов, а тег внутри — переопределить его для отдельных столбцов в группе.
Атрибут span
У тега есть атрибут span, который распространяет стиль на несколько столбцов.
Первый тег — это первый столбец, а второй тег — второй, но из-за атрибута span, в котором мы указали значение «2», его стиль распространяется и на третий.
Атрибут scope тега
Когда таблица хорошо структурирована, достаточно беглого взгляда, чтобы понять, какие где данные: мигом возникают визуальные ассоциации между основной информацией в таблице и заголовками её колонок и/или строк.
Но что, если наши пользователи не могут провести такую визуальную параллель. Например, они слабовидящие. Как им прочитать сложную таблицу?
Люди с ослабленным зрением часто применяют скринридеры — программы, которые читают для них веб-страницы. С обычным текстом скринридер справляется хорошо, но интерпретировать сложную таблицу для него проблема.
Поэтому разработчики должны позаботиться об этом и дополнить визуальные ассоциации в таблице программными, которые скринридер сможет понять.
Чаще всего это делают с помощью тега и атрибута scope, который сообщает скринридеру, какие ячейки точно являются заголовками — например, заголовок строки, в которой программа находится, или же заголовок столбца.
Благодаря им все пользователи могут интерпретировать таблицу так же, как и зрячие люди.
Вернёмся к нашей таблице чётности чисел:
| Нечётное | Чётное |
|---|---|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа | |
Чтобы однозначно указать заголовки столбцов, делаем вот так:
И у каждой строки тоже можно определить заголовок (если в таблице есть не только заголовки столбцов). Слегка изменим для этого наш пример:
| Пара № | Нечётное | Чётное |
|---|---|---|
| 1 | 1 | 2 |
| 2 | 3 | 4 |
| 3 | 5 | 6 |
| Вы узнали, что такое чётные и нечётные числа | ||
Скринридер распознаёт такую семантическую разметку и позволяет пользователям прочесть весь столбец или строку целиком.
У атрибута scope есть ещё два значения — colgroup и rowgroup. Они используются для таблиц с двумя и более уровнями заголовков (заголовки, которые группируют подзаголовки).
Так заголовок верхнего уровня получает scope=»colgroup», а у его подзаголовков scope=»col», и аналогично для строк.
Подытожим
Заботьтесь обо всех пользователях — верстайте таблицы семантически верно.
Какие заголовки можно дать столбцам таблицы : a) Домашняя библиотека ; б) Имя существительное ; в) Ученики нашего класса?
Какие заголовки можно дать столбцам таблицы : a) Домашняя библиотека ; б) Имя существительное ; в) Ученики нашего класса.
Столбцам таблицы можно давать ЛЮБЫЕ имена
Например, в столбец а)»Домашняя библиотека»
можно занести названия книг, которые хранятся в вашем доме
Школу, спорт школу и др.
Средствами Microsoft Excel составить рабочий календарь?
Средствами Microsoft Excel составить рабочий календарь.
Заполнить таблицу произвольным образом (например, см.
Используя встроенные функции Excel, в столбце Сообщение вывести одно из двух текстовых сообщений :
1)«Выполнить», если Дата выполнения совпадает с текущей датой
2) «–», если Дата выполнения не совпадает с текущей датой.
3. Какая информация хранится в оперативной памяти?
3. Какая информация хранится в оперативной памяти?
□ собственное имя □ телефоны городских абонентов □ таблица умножения □ сказки А.
С. Пушкина □ адреса всех учеников класса
1) Заголовки таблиц в Word 97?
1) Заголовки таблиц в Word 97.
Вычисления в таблицах.
Связь с другими таблицами.
) 2) Выравнивание содержимого ячеек Excel 97.
Какая Команда меню для вставки столбцов в таблицу?
Какая Команда меню для вставки столбцов в таблицу.
Как обозначается столбцы и строки электронной таблицы?
Как обозначается столбцы и строки электронной таблицы?
Какие заголовки можно дать столбцам таблицы домашняя библиотека имя существительное киники нашего класса?
Какие заголовки можно дать столбцам таблицы домашняя библиотека имя существительное киники нашего класса.
Запишите макрос для добавления таблицы из трех столбцов и четырех строк?
Запишите макрос для добавления таблицы из трех столбцов и четырех строк.
Как задается имя ячейки (строки, столбца) в электронной таблице?
Как задается имя ячейки (строки, столбца) в электронной таблице?
Тема : Деление слов на группы (дубль 2) Прочитай слова?
Тема : Деление слов на группы (дубль 2) Прочитай слова.
Письмо, съел, мальчик, вьёт, семья, тетрадь, подъем.
Подумай на какие группы можно распределить слова?
Распредели слова на две группы.
Запиши их в таблицу в два столбца.
Объясни свой выбор.
Озаглавь таблицу и её столбцы.
Подумай на какие ещё группы можно распределить слова?
Распредели слова на три группы.
Запиши их в три столбца.
Объясни свой выбор.
Озаглавь таблицу и её столбцы.
В классе 35 учеников?
В классе 35 учеников.
Все они являются читателями школьной и районной библиотек.
Сколько из них : а) не являются читателями школьной библиотеки б) не являются читателями районной библиотеки.
В)являются читателями только школьной библиотеки.
Г) являются читателями только районной библиотеки.
Д)являются читателями обеих библиотек?
Урок 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 пт в поле размера шрифта):
Всё, задача выполнена.
Теперь вы сможете:
