Html css table href

Организация данных с помощью таблиц

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

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

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

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

Читайте также:  Python with mysql tutorial

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

Строки таблицы

Данные таблицы

 
Не заставляйте меня думать Стив Круг На складе 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

После того, как класс находится на месте, добавим его ко всем элементам

, которые объединяют два столбца и включают дату, либо мероприятие — регистрацию, обед или перерыв. Вспоминая нашу таблицу для первого дня с семинарами, HTML будет выглядеть следующим образом:
  .  .
Семинары 24 августа
Регистрация
Обед

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

Страница Расписание включает несколько таблиц для Styles Conference

Рис. 11.01. Страница Расписание включает несколько таблиц для Styles Conference

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Ладно, теперь мы знаем, как семантически скомпоновать табличные данные в HTML, также делая это интуитивно с помощью CSS. Обсуждение таблиц было нашим последним основным препятствием при изучении HTML и CSS и мы на этом официально завершили наш сайт Styles Conference.

Для проверки, в этом уроке мы рассмотрели следующее:

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

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

Ресурсы и ссылки

См. также

Источник

Оцените статью