Веб дизајн без табела (или распоред без табела) је метод веб дизајна који избегава коришћење HTML табела за контролу распореда странице. Уместо да се распоред странице прави помоћу HTML табела, овај приступ веб дизајну ослања се на CSS стилове да би се контролисао изглед и распоред садржаја веб странице.

Историја HTML је језик за означавање код кога је првобитно сам корисник одређивао како ће садржај изгледати. Међутим, како се Интернет средином 1990-их проширио из академских и истраживачких кругова у широку употребу и постао више усмерен на медије, графички дизајнери почели су да траже начине да контролишу визуелни изглед веб страница. Како је посебно популаризовао дизајнер Дејвид Сигел у својој књизи "Creating Killer Web sites" , табеле и "спејсери" (обично провидне GIF слике величине једног пиксела са прецизно задатом ширином, висином или маргинама) користили су се за креирање и одржавање распореда веб страница.

Крајем деведесетих појавили су се први довољно моћни WYSIWYG уређивачи, што је значило да веб дизајнерима више није било неопходно техничко познавање HTML-а да би правили веб странице. Такви уређивачи индиректно су подстакли обимну употребу увијених (угњеждених) табела за позиционирање елемената дизајна. Како су дизајнери мењали своје документе у овим алатима, у код су се убацивали непотребни елементи и празни делови. Осим тога, недовољно искусни дизајнери имали су навику да користе табеле више него што је потребно када раде у WYSIWYG окружењу. Ова пракса често је доводила до бројних табела једна унутар друге, као и табела са сувишним редовима и колонама. Употреба графичких уређивача са алатима за „исецање“ (slicing), који директно генеришу HTML и слике, такође је допринела лошем коду — табеле су често имале много редова или колона висине или ширине од само једног пиксела. Понекад је за приказ садржаја било коришћено много више линија кода него што је самог садржаја било.

Ослањање на табеле за распореде довело је до низа проблема. Многе веб странице су биле конструисане са табелама угњежденим једна у другу, што је проузроковало настанак великх HTML докумената који захтевају више пропусног опсега него документи са једноставнијим форматирањем. Поред тога, када се распоред заснован на табелама обради — на пример, када га обрађује читач екрана или претраживач — редослед садржаја може бити помало збркан и збуњујућ.

Cascading Style Sheets (CSS) је језик који је развијен како би се побољшало одвајање дизајна од садржаја и вратио фокус на семантичку организацију садржаја на вебу. Појам „дизајн без табела“ подразумева коришћење CSS-а уместо табела за распоред HTML елемената на страници. HTML табеле и даље имају своје легитимно место када се приказују табеларни подаци на веб страницама, а понекад се и даље користе као средство за распоред у ситуацијама када је подршка за CSS ограничена или проблематична, на пример за вертикално центрирање елемента.

Усвајање Спецификација CSS1 објављена је у децембру 1996. године од стране W3C-а с циљем побољшања приступачности веба и наглашавања одвајања презентационих детаља у стилским листовима од семантичког садржаја у HTML документима. CSS2, објављен у мају 1998. године (касније ажуриран као CSS 2.1 и CSS 2.2), проширио је CSS1 додавањем могућности за позиционирање и распореде помоћу табела.

Разлози због којих се за распореде целих веб страница више користе HTML табеле него CSS су следећи:

жељом издавача садржаја да на својој веб страници реплицирају постојеће елементе корпоративног дизајна; ограничењима у то време у подршци за CSS у претраживачима; постојећом базом инсталираних претраживача који нису подржавали CSS; недовољним познавањем CSS стандарда од стране нових веб дизајнера; недостатком знања или свести о разлозима (укључујући HTML семантику и приступачност веба) за коришћење CSS-а уместо онога што је сматрано лакшим начином за брзо постизање жељеног распореда; новом генерацијом WYSIWYG алата за веб-дизајн који су подстицали ову праксу

Кључни моменти у усвајању CSS-ом заснованих распореда укључују кампању Web Standards Project-а под називом Browser Upgrade из фебруара 2001. године и истовремено редизајнирање веб-дизајн магазина A List Apart, а потом и редизајн магазина Wired 2002. године. Веб сајт CSS Zen Garden, покренут 2003. године, приписује се заслугом за популаризацију распореда без табела.

Разлози Намена и семантичка улога HTML табела је у приказивању табеларних података, а не у распореду садржаја на страници. Предности коришћења CSS-а за распоред страница укључују побољшану приступачност информација ширем кругу корисника, користећи разне корисничке агенсе. Долази и до уштеде пропусног опсега, јер се велики број семантички бесмислених тагова <table>, <tr> и <td> уклања са десетина страница, остављајући мање, али значајније заглавља, параграфе и листе. Упутства за распоред се преносе у CSS стилске листе за цео сајт, које се могу преузети једном и кеширати за поновну употребу док сваки посетилац прегледа сајт. Сајтови могу постати лакши за одржавање, јер се целокупан изглед или бренд може променити једним потезом, само изменом CSS-а, што ће утицати на све странице које користе ту стилску листу. Нови HTML садржај се може додати тако да се на њега одмах примењују постојећа правила распореда дефинисана CSS-ом, без додатног напора.

Предности

Приступачност Због брзог раста интернета, све обимнијих закона против дискриминације особа са инвалидитетом и повећане употребе мобилних телефона и PDA уређаја, постало је неопходно да веб садржај буде приступачан корисницима који користе широк спектар уређаја — не само релативно уједначене десктоп рачунаре и CRT мониторе на којима је веб првобитно постао популаран. Дизајн без табела значајно побољшава приступачност, јер табеле које су превише широке за екран захтевају хоризонтално померање да би се у потпуности прочитале, док се обичан текст аутоматски прилагођава ширини екрана.

Читачи екрана и брајеви уређаји имају много мање проблема са дизајном без табела јер прате логичку структуру садржаја. Исто важи и за веб претраживаче — софтверске агенте за које власници сајтова желе да пронађу њихове странице, правилно их класификују и тако омогуће корисницима да их лако пронађу одговарајућом претрагом.

Захваљујући одвајању дизајна (CSS) од структуре (HTML), могуће је обезбедити различите распореде елемената за различите уређаје — нпр. ручне уређаје, мобилне телефоне итд. Такође је могуће назначити другачији стил за штампу, на пример сакрити или изменити изглед реклама или навигационих елемената који су небитни или сметају у верзији странице намењеној штампању.

Смерница број 3 из W3C-јевих Смерница за приступачност веб садржаја наводи: „користите обележавање и стилске листове и то на исправан начин.“ Контролна тачка 3.3 из ове смернице, која спада у приоритет 2, каже: „користите стилске листове да контролишете распоред и приказ.“

Уштеда пропусног опсега Дизајн без табела производи веб странице са мање HTML тагова који се користе искључиво за позиционирање садржаја. То обично значи да саме странице постају мање и брже за преузимање. Филозофија подразумева да се сва упутства у вези распореда и позиционирања преместе у спољне стилске листе. Према основним могућностима HTTP протокола, како се ова упутства ретко мењају и примењују за многе веб странице, она ће се кеширати и поново користити након првог преузимања. То додатно смањује потребу за пропусним опсегом и време преузимања на целом сајту.

Одржавање Одржавање веб сајта може захтевати често уношење промена, како мањих тако и већих, у визуелни стил сајта, у зависности од његове сврхе. Код распореда заснованог на табелама, сам распоред је део HTML-а. Као такво, без помоћи визуелних уређивача заснованих на шаблонима, као што су HTML уређивачи, мењање позиционирања елемената на целом сајту може захтевати велики труд, у зависности од броја поновљених промена које је потребно унети. Чак ни коришћење алата попут sed (stream editor) или сличних глобалних функција за „нађи и замени“ не може у потпуности решити проблем.

Код распореда без табела који користи CSS, информације о распореду могу бити смештене у CSS документу. Пошто је информација о распореду централисана, ове промене се по подразумеваној поставци могу унети брзо и глобално. Саме HTML датотеке можда неће бити потребно мењати приликом измена распореда.

Такође, пошто информације о распореду могу бити смештене ван HTML-а, додавање новог садржаја у дизајну без табела може бити прилично једноставно, било да се ради о изменама постојеће странице или додавању нове. Насупрот томе, без таквог дизајна, распоред за сваку страницу може захтевати више времена и ручних измена појединачних елемената или коришћење глобалних алата за „нађи и замени“. Међутим, власници сајтова често желе да одређене странице буду другачије од осталих на сајту, било на кратко или дуго време. То ће често захтевати израду посебне стилске листе за ту страницу. Међутим, садржај странице (или шаблона) обично може остати непромењен, што није случај код распореда заснованог на табелама.

Референце

Категорија:Веб-дизајн Категорија:Веб развој