Списки и таблицы на сайтах

Введение

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

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

Таблицы встречаются на сайтах реже, но это теперь. А раньше с их помощью сайты, в общем-то, и верстались. Существовало даже такое понятие «табличная вёрстка». В период гегемонии Internet Explorer почти все её применяли, поскольку это был самый простой способ обеспечить одновременно эластичность дизайна и кроссбраузерность. Собственно, если вы присмотритесь внимательно к веб-сайтам, созданным в период до 2009 года, то увидите, как сквозь композицию просматривается структура таблицы.

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

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

Списки

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

Каждый список представляет собой перечень объектов, каждый из которых может быть обозначен специальным визуальным средством — маркером. В HTML неупорядоченный список объединяет тег <UL>, упорядоченный — <OL>, а отдельный элемент списка в обоих случаях — <LI>.

Сразу следует выделить несколько особенностей верстки списков:

  • В списке линия набора смещается вправо относительно маркера.
  • Интерлиньяж должен быть меньше, чем расстояние между двумя элементами списка.

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

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

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

В некоторых случаях в отдельных элементах списков есть подмножества из связанных элементов. Например, в списке продуктов, которые надо купить в магазине, может быть элемент «овощи» и «фрукты» с собственными подмножествами. Тогда список становится многоуровневым. Уровни списка здесь делятся по смысловой иерархии. Высокие уровни иерархии соответствуют более общим сущностям (например, «овощи»), а более низкие — тем, которые являются их подмножествами (например, «томаты»).

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

В упорядоченных списках уровни иерархии подчеркиваются либо путем изменения принципа упорядочения (например, для первого уровня нумерация, а для второго — буквы), либо прописью второго уровня через точку и сдвигом линии набора.

Таблицы

Как мы писали в начале материала, таблицы, как и списки — это способ упорядочения информации.

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

Тождественные характеристики перечисляются в главной части таблицы (ее еще называют «шапкой»), а остальная информация делится на строки и колонки.

Таблице в целом соответствует тег <table>, главной части — <thead>, строке <tr>, а ячейке — <td>. В случае таблиц эти теги заворачиваются друг в друга, как матрешки.

Шапку таблицы, как правило, оформляют более выразительно. Например, более насыщенным цветом фона или через насыщенные шрифты.

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

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

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

В некоторых случаях ячейки могут объединяться.

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

Как и в обычных текстах, базовым является выравнивание по левому краю. Но цены, суммы и количественные параметры в таблицах часто выравнивают по правому краю. Это связано с тем, что визуально сумма растет относительно точки, отделяющей целое число от дробной части (то есть, числа «растут слева»).

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

В заключение

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

·
447
·
goodsuper 5
Наступна стаття
Формы в веб-сайтах
0
Головна