Списки і таблиці у вебсайтах

Для вебсайтів списки і таблиці мають особливе значення. Формально, обидва ці засоби верстки інформації передбачені для роботи з масивами змісту. Списки ми застосовуємо, коли перелічуємо матеріали, що мають одну спільну характеристику, а таблиці стають в пригоді, коли з’являється якась додаткова умова. Скажімо, списком можна записати розклад занять в школі на один день. Але таблиця набагато зручніша для опису розкладу на весь тиждень.

Взагалі списки є поширеним інструментом у вебдизайні, який дозволяє робити масив інформації більш наочним. От, наприклад, якщо ви збираєтесь в магазин, ви можете записати перелік продуктів і через кому, але ж як правило ви їх перераховуєте саме списком. Бо так зручніше сприймати подібну інформацію, чи не так?

Таблиці трапляються в сайтах дещо рідше, але свого часу саме за їхньою допомогою сайти й верстались. Існувало навіть таке поняття «таблична верстка». В період гегемонії Internet Explorer геть усі її використовували, оскільки це був найпростіший спосіб забезпечити одночасно еластичність дизайну та кросбраузерність. Власне, якщо ви придивитесь уважно до вебсайтів, створених в період до 2009 року, побачите, як повз композицію проглядається структура таблиці.

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

І у випадку дизайну таблиць, і у випадку списків є ціла низка нюансів, на які корисно звертати увагу, коли ви створюєте дизайн сайту. Тож, розберімося з ними!

Списки

Як ми вже розповіли у вступі, списки є незамінним засобом візуалізації, коли ви маєте масив елементів, подібних за певною вихідною характеристикою чи задачею. Наприклад, продукти, які ви плануєте купити в магазині, об’єднує, власне, ваш похід до магазину.

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

Одразу слід виділити декілька особливостей верстки списків:

  • В списку лінія набору зміщується праворуч відносно маркера.
  • Інтерліньяж має бути меншим, ніж відстань між двома елементами списку.

При цьому самі маркери списку в HTML мали три стандартні форми: квадрат, коло та диск. Вони і зараз є найбільш поширеними маркерами, але за замовчуванням найчастіше використовується маркер у формі диску.

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

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

В деяких випадках з окремими елементами списків є підмножини з пов’язаних елементів. Наприклад, в списку продуктів, які треба придбати в магазині, може бути елемент «овочі» та «фрукти» з власними підмножинами. Тоді список стає багаторівневим. Рівні списку тут поділяються за змістовною ієрархією. Вищі рівні ієрархії відповідають більш загальним сутностям (наприклад, «овочі»), а нижчі — таким, що є їхніми підмножинами (наприклад, «томати»).

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

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

Таблиці у вебсайтах

Як ми писали на початку матеріалу, таблиці, як і списки — це спосіб впорядкування інформації.

Вони стають в пригоді, коли в елементів списку є кілька тотожних характеристик. Наприклад, в кожної пісні в музичному альбомі є позиція (номер треку), назва та тривалість. А якщо це збірка популярних рок-пісень, скажімо, сімдесятих, то корисно зазначати ще й виконавця.

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

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

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

Рядки та колонки поділяють на парні та непарні. Для ліпшого зчитування таблиці їм можна надавати індивідуальне оформлення за цією ознакою, як-от відмінний колір тла.

Безпосередньо в таблиці та між її комірками можуть бути рамки.

В кожній комірці є внутрішній відступ. Відповідно до правила внутрішнього та зовнішнього, цей відступ має бути більшим, ніж міжрядковий інтервал.

В деяких випадках комірки можуть об’єднуватись.

При цьому для кожної комірки може бути застосоване окреме, власне вирівнювання. І тут є певні принципи.

Як і у звичайних текстах, базовим є вирівнювання за лівим краєм. Але ціни, суми, та кількісні параметри в таблицях часто вирівнюють за правим краєм. Це пов’язано з тим, що візуально сума зростає відносно крапки, яка відділяє ціле число від дробної частини (тобто, числа «зростають ліворуч»).

При цьому вирівнювання змісту шапки відповідає вирівнюванню комірки.

На завершення

Попри простоту загальної концепції, в роботі з таблицями та списками часто спливає чимало дрібних нюансів. Ви матимете нагоду попрактикуватись і ліпше розібратися з ними в практичних модулях курсу «Основи вебдизайну».

·
6863
·
5
·
goodsuper 114
Наступна стаття
Форми у вебсайтах
1632
Головна