- Организация данных с помощью таблиц
- Создание таблицы
- Строки таблицы
- Данные таблицы
- Демонстрация таблицы
- Заголовок таблицы
- Демонстрация заголовка таблицы
- Атрибут headers
- Структура таблицы
- Демонстрация названия таблицы
- Демонстрация группирования элементов таблицы
- Объединение нескольких ячеек
- Демонстрация объединения ячеек
- Границы в таблице
- Свойство border-collapse
- Демонстрация border-collapse
- Свойство border-spacing
- Демонстрация border-spacing
- Добавление границ к строкам
- Демонстрация добавления границ к строкам таблицы
- Чередование в таблице
- Демонстрация чередования строк в таблице
- Выравнивание текста
- Демонстрация выравнивания текста в таблице
- Полностью стилизованная таблица
- Демонстрация стилизации таблицы
- На практике
- Демонстрация и исходный код
- Резюме
- Ресурсы и ссылки
- См. также
Организация данных с помощью таблиц
Таблицы в HTML были созданы, чтобы обеспечить простой способ разметки структурированных табличных данных и для отображения этих данных в форме, которую пользователь легко читает и воспринимает.
Когда HTML был ещё в процессе разработки, CSS, однако, не поддерживался широко в браузерах, так что таблицы были основным средством, с помощью которого создавались сайты. Они применялись для позиционирования содержимого, а также для построения общего макета страницы. Это работало в то время, но это не то, для чего таблицы предназначались, что и привело ко множеству связанных проблем.
К счастью, мы прошли с тех пор долгий путь. Сегодня таблицы используются специально для организации данных (как и должно быть), а CSS свободно работает над позиционированием и компоновкой.
Построение табличных данных по-прежнему является испытанием. Как таблица должна быть построена в HTML во многом зависит от данных и как они будет отображаться. Затем, когда они размечены в HTML, таблицы должны быть оформлены через CSS, чтобы сделать информацию более чёткой и понятной для пользователей.
Создание таблицы
Строки таблицы
Данные таблицы
Не заставляйте меня думать Стив Круг На складе 1 $30.02 UX-дизайн. Практическое руководство по проектированию опыта взаимодействия Расс Унгер, Кэролайн Чендлер На складе 2 $52.94 ($26.47 × 2) Изучаем HTML5 Брюс Лоусон, Реми Шарп Нет на складе 1 $22.23 Пуленепробиваемый веб-дизайн Дэн Сидерхолм На складе 1 $30.17
Демонстрация таблицы
Заголовок таблицы
Разница между этими двумя элементами похожа на разницу между заголовками (элементы от до ) и абзацами (элемент ). Хотя содержимое заголовка можно поместить внутрь абзаца, не имеет смысла делать это. Потому что применение заголовка добавляет больше семантического смысла содержимому. То же самое верно и для заголовков таблицы.
Заголовки таблицы могут быть задействованы в столбцах и строках; данные в таблице определяют, где заголовки уместны. Атрибут scope помогает точно определить, какое содержимое связано с заголовком. Атрибут scope со значениями col , row , colgroup и rowgroup у элемента применяется к строке или столбцу. Наиболее используемые значения col и row . Значение col указывает, что каждая ячейка внутри столбца имеет непосредственное отношение к этому заголовку таблицы, а значение row указывает, что каждая ячейка в строке относится непосредственно к этому заголовку таблицы.
Использование элемента , наряду с атрибутом scope , чрезвычайно помогает экранным ридерам и вспомогательным технологиям понимать смысл таблицы. Таким образом, они также полезны для тех, кто просматривает веб-страницы с помощью этих технологий.
Кроме того, в зависимости от браузера, заголовки таблицы могут получить некоторый стиль по умолчанию, как правило, жирный и по центру.
Название Наличие Кол-во Цена Не заставляйте меня думать Стив Круг На складе 1 $30.02 UX-дизайн. Практическое руководство по проектированию опыта взаимодействия Расс Унгер, Кэролайн Чендлер На складе 2 $52.94 ($26.47 × 2) Изучаем HTML5 Брюс Лоусон, Реми Шарп Нет на складе 1 $22.23 Пуленепробиваемый веб-дизайн Дэн Сидерхолм На складе 1 $30.17
Демонстрация заголовка таблицы
Превращение данных в таблицу — это лишь начало. Пока мы только немного прикоснулись к тому, как семантически добавить данные в таблицу, мы можем ещё много что сделать для определения структуры наших таблиц.
Атрибут headers
Структура таблицы
Знания о построении таблицы и систематизации данных крайне мощные, однако есть несколько дополнительных элементов, которые помогут нам организовать данные и структуру таблицы. Эти элементы включают , , и .
Книги по дизайну и фронтенд-разработке .
Демонстрация названия таблицы
, и
Содержимое таблиц может быть разбито на несколько групп, включая шапку, тело и подвал. Элементы (шапка таблицы), (тело таблицы) и (подвал таблицы) помогают структурно организовать таблицы.
Шапка таблицы, , обёртывает строку заголовка или строки таблицы, чтобы обозначить их шапкой. должен быть помещён в верхней части таблицы, после любого элемента и перед любым элементом .
После могут идти элементы или . Изначально, элемент должен идти сразу после элемента , но HTML5 предоставил в этом свободу действий. Эти элементы могут теперь встречаться в любом порядке, но они никогда не должны быть родительскими элементами друг другу. Элемент должен содержать основные данные таблицы, в то время как содержит описание данных таблицы.
Книги по дизайну и фронтенд-разработке Название Наличие Кол-во Цена Не заставляйте меня думать Стив Круг На складе 1 $30.02 Сумма $135.36 НДС $13.54 Итого $148.90
Демонстрация группирования элементов таблицы
Объединение нескольких ячеек
Атрибут colspan применяется для получения одной ячейки из нескольких столбцов в таблице, в то время как атрибут rowspan используется, чтобы получить одну ячейку из нескольких строк. Каждый атрибут принимает целое значение, которое указывает количество ячеек для охвата, где 1 — значение по умолчанию.
Используя прежнюю таблицу с книгами, теперь мы можем удалить пустые ячейки в подвале.
Книги по дизайну и фронтенд-разработке Название Кол-во Цена Не заставляйте меня думать Стив Круг На складе 1 $30.02 Сумма $135.36 НДС $13.54 Итого $148.90
Демонстрация объединения ячеек
Границы в таблице
Эффективное использование границ может помочь сделать таблицу более наглядной. Границы вокруг таблицы или отдельных ячеек могут оказать большое влияние, когда пользователь пытается интерпретировать данные и быстро сканировать информацию. При стилизации границ через CSS есть два свойства, которые могут быстро пригодиться: border-collapse и border-spacing .
Свойство border-collapse
Свойство border-collapse определяет модель границы в таблице. Есть три значения для свойства border-collapse : collapse , separate и inherit . Значение по умолчанию separate у свойства border-collapse означает, что все разные границы складываются друг с другом, как описано выше. Значение collapse , с другой стороны, сжимает границы в одну, выбирая ячейку таблицы в качестве основной.
Демонстрация border-collapse
Свойство border-spacing
Когда свойство border-collapse со значением separate позволяет соединять одну границу с другой, так свойство border-spacing задаёт, какое расстояние, если оно есть, отображается между этими границами.
Например, таблица с однопиксельной границей вокруг всей таблицы и однопиксельной границей вокруг каждой ячейки будет иметь двухпиксельную границу вокруг каждой ячейки, потому что границы складываются друг с другом. Добавление border-spacing со значением 4px отделяет границы на 4 пикселя.
Демонстрация border-spacing
Свойство border-spacing работает только тогда, когда значение свойства border-collapse задано как separate , это значение по умолчанию. Если свойство border-collapse ранее не указывалось, мы можем использовать свойство border-spacing не волнуясь.
Кроме того, свойство border-spacing может принимать два значения размера: первое значение для горизонтального расстояния, а второе — для вертикального. К примеру, запись border-spacing: 5px 10px установит 5 пикселей горизонтального расстояния между границами и 10 пикселей — вертикального.
Добавление границ к строкам
table < border-collapse: collapse; >th, td < border-bottom: 1px solid #cecfd5; padding: 10px 15px; >tfoot tr:last-child td
Демонстрация добавления границ к строкам таблицы
Чередование в таблице
Здесь наша таблица с книгами использует псевдокласс :nth-child с параметром even для выбора всех чётных строк таблицы и применения к ним серого фона. Следовательно, каждая строка через одну в теле таблицы будет серой.
table < border-collapse: separate; border-spacing: 0; >th, td < padding: 10px 15px; >thead < background: #395870; color: #fff; >tbody tr:nth-child(even) < background: #f0f0f2; >td < border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; >td:first-child
Демонстрация чередования строк в таблице
Выравнивание текста
В дополнение к границам и чередованию, важную роль в формировании таблицы играет выравнивание текста внутри ячеек. Имена, описания и тому подобное, как правило, выравниваются по левому краю, в то время как номера и другие числа выравниваются по правому. Другая информация, в зависимости от контекста, может быть по центру. Мы можем переместить текст по горизонтали с помощью свойства text-align в CSS, как мы рассмотрели это в уроке 6, «Работа с типографикой».
Для выравнивания текста по вертикали, однако, применяется свойство vertical-align . Это свойство работает только со строчными элементами и ячейками таблицы и не будет работать для блочных, строчно-блочных или ещё каких-либо других элементов.
Свойство vertical-align принимает несколько разных значений, самые популярные — top , middle и bottom . Эти значения вертикально позиционируют текст относительно ячейки таблицы или ближайшего родительского элемента для строчных элементов.
Исправив HTML и CSS и включив свойства text-align и vertical-align , мы можем очистить макет нашей таблицы с книгами. Обратите внимание, что данные в таблице становится намного яснее и удобнее.
Название Кол-во Цена Стив Круг Расс Унгер, Кэролайн Чендлер Брюс Лоусон, Реми Шарп Дэн Сидерхолм Сумма $135.36 НДС $13.54 Итого $148.90
table < border-collapse: separate; border-spacing: 0; color: #4a4a4d; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; >th, td < padding: 10px 15px; vertical-align: middle; >thead < background: #395870; color: #fff; >th:first-child < text-align: left; >tbody tr:nth-child(even) < background: #f0f0f2; >td < border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; >td:first-child < border-left: 1px solid #cecfd5; >.book-title < color: #395870; display: block; >.item-stock, .item-qty < text-align: center; >.item-price < text-align: right; >.item-multiple < display: block; >tfoot < text-align: right; >tfoot tr:last-child
Демонстрация выравнивания текста в таблице
Полностью стилизованная таблица
Пока наша таблица с книгами выглядит довольно хорошо. Давайте сделаем ещё один шаг вперёд, скруглим некоторые уголки и чуть больше стилизуем часть текста.
Название Кол-во Цена $26.47 × 2 Сумма $135.36 НДС $13.54 Итого $148.90
table < border-collapse: separate; border-spacing: 0; color: #4a4a4d; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; >th, td < padding: 10px 15px; vertical-align: middle; >thead < background: #395870; background: linear-gradient(#49708f, #293f50); color: #fff; font-size: 11px; text-transform: uppercase; >th:first-child < border-top-left-radius: 5px; text-align: left; >th:last-child < border-top-right-radius: 5px; >tbody tr:nth-child(even) < background: #f0f0f2; >td < border-bottom: 1px solid #cecfd5; border-right: 1px solid #cecfd5; >td:first-child < border-left: 1px solid #cecfd5; >.book-title < color: #395870; display: block; >.text-offset < color: #7c7c80; font-size: 12px; >.item-stock, .item-qty < text-align: center; >.item-price < text-align: right; >.item-multiple < display: block; >tfoot < text-align: right; >tfoot tr:last-child < background: #f0f0f2; color: #395870; font-weight: bold; >tfoot tr:last-child td:first-child < border-bottom-left-radius: 5px; >tfoot tr:last-child td:last-child
Демонстрация стилизации таблицы
На практике
Теперь, когда мы знаем, как создать и стилизовать таблицы, давайте завершим последнюю оставшуюся страницу нашего сайта Styles Conference — расписание.
-
Мы начнём нашу страницу Расписание с открытия файла schedule.html и добавления элемента с классом row , так же, как мы это проделали со всеми другими страницами. Внутри этого нового также добавим элемент с классом container .
/* ======================================== Расписание ======================================== */ table < margin-bottom: 44px; width: 100%; >table:last-child
Семинары 24 августа Регистрация
Семинары 24 августа Регистрация Адам Коннор
Свет! Камера! Мотор! Вдохновение дизайна от кинематографа Дженифер Джонс
Чему дизайнеры могут научиться у родителей
Семинары 24 августа Регистрация Адам Коннор
Свет! Камера! Мотор! Вдохновение дизайна от кинематографа Дженифер Джонс
Чему дизайнеры могут научиться у родителей Обед Тесса Хармон
Искусство кодирования: Генерация вязанных шаблонов Расс Унгер
От Маппетов к мастерству: Основные принципы UX от Джима Хенсона
tbody td < border-top: 1px solid #dfe2e5; padding-top: 21px; >tbody td:first-of-type < padding-right: 15px; >tbody td:last-of-type < padding-left: 15px; >tbody td:only-of-type
После того, как класс находится на месте, добавим его ко всем элементам
Семинары 24 августа Регистрация . Обед .
Таблицы, которые на первый взгляд выглядят просто, могут оказаться довольно сложными, как в случае с нашим расписанием для Styles Conference. Хорошей новостью является то, что наше расписание теперь завершено и выглядит превосходно.
Рис. 11.01. Страница Расписание включает несколько таблиц для Styles Conference
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Резюме
Ладно, теперь мы знаем, как семантически скомпоновать табличные данные в HTML, также делая это интуитивно с помощью CSS. Обсуждение таблиц было нашим последним основным препятствием при изучении HTML и CSS и мы на этом официально завершили наш сайт Styles Conference.
Для проверки, в этом уроке мы рассмотрели следующее:
- лучшие способы для семантического создания таблиц;
- как сделать, чтобы отдельные ячейки таблицы объединяли несколько столбцов или строк;
- структурные элементы, из которых состоят таблицы;
- разные способы стилизации границ таблицы и как различные свойства влияет на внешний вид таблицы;
- как вертикально выравнивать текст в таблице.
Мы проделали большую работу по применению всех наших новых навыков на практике и ушли далеко вперёд, чем были несколько уроков назад. Давайте закончим на высокой ноте, свяжем некоторые концы и рассмотрим методы написания наилучшего кода.