Таблиците са един от най-лесните и разбираеми (стига да са структурирани правилно) начини за предаване на голямо количество информация в (относително) малко пространство от страницата на сайта.
В миналото, таблиците бяха основен инструмент за строене на сайтове. Някои уебдизайнери правеха цели сайтове във формата на таблица. Това е донякъде разбираемо, тъй като самата структура на почти всяко пространство в уебсайт може да бъде мислено приравнено на таблица. Например страницата, която гледате в момента (ако сте на компютър), бихме могли да приемем, че има две колони от информация – текстът – основната информация, и страничната лента (sidebar), в която има второстепенна информация.
От друга страна обаче, това, че нещо е възможно и относително лесно, не означава, че трябва бъде извършено, нито че правилно. Сайтовете, във формата на таблица са трудни за използване и поддръжка и, в крайна сметка, огрмоните таблици не дават никаква информация на търсещите машини за визуалната структура на сайта, което пречи на бота да установи коя информация е първостепенна и коя – второстепенна. Което, от своя страна, очевидно, пречи за добри SEO резултати.
Не правете сайтове чрез таблици.
Но това не означава да не ползвате таблиците изобщо. Ако имате информация, която искате да предадете и която е логично и очаквано да бъде представена под формата на таблица, разбира се, възползвайте се от този уеб елемент.
Ето какво трябва да имате предвид, когато го правите:
Заглавка на таблицата
Всяка колона (вертикал) трябва да има своя стойност (име), която да обозначава за потребителите какво гледат. Бихте могли да фиксирате заглавката на таблицата, така че колкото и надолу в страницата да слиза потребителя (докато вижда таблицата) да продължава да има контекст за информацията, която вижда.
Редове
Редовете трябва да имат видими граници (не е задължително те да бъдат направени чрез “border: XXpx solid #XXXXXX”, нито цветовете на различните редове да са ярко контрастиращи (например между черно и бяло). Напълно достатъчно е един ред да бъде светло сив, а другият – бял, например, за да се отличават помежду си и да може потребителя да вижда информацията, без да напряга очите си.
Разстояния
При изграждане на таблиците си, задължително посочете едно и също разстояние между текста и границите на клетките (вътрешно отстояние/padding), за да не изглежда всяка клетка с различен размер, както твърде често успяваме да направим в Excel, например.
Търсакча (по желание)
Ако таблиците ви са твърде големи, бихте могли да интегрирате способност за вътрешно (в таблицата) търсене по ключови думи или редове.
Филтри и сортиране (по желание)
Отново, при по-големи масиви информации, представени чрез таблици, е хубаво да се добавят възможности за филтриране на информацията, според нуждите на потребителя както и сортиране (например, от най-голямо към най-малко и т.н.).
Адаптивност
Таблиците, поради тяхната ширина и необходимост от пространство настрани, а не нагоре и надолу, са малко по-особен елемент, когато става дума за мобилен изглед. В този смисъл, за разлика, от повечето уеб елементи, при тях е по-скоро необходимо да се “разливат извън границите на дисплея” и да може тази информация да се показва при желание от клиента (с придърпване в едната или друга посока), а не, както е при другите елементи, просто да се умали, така че да запълни дисплея.
Имайте предвид мобилните устройства, когато изграждате таблици.
Страници (по желание)
Друга възможност за предоставянето на големи масиви данни под формата на таблица е като ги разделите на отделни страници (на таблицата, не на сайта), така че да могат хората да разбират информацията и, когато са готови, да продължават към следващата. Трябва да внимавате обаче какъв тип информация разделяте на отделни страници.