Tabele sau Divuri ?

iNoob | Stefanescu Mihai | 2020-10-11

---

In ultimii ani web-masterii au modificat structura website-urilor din tabele in div-uri. Asta este grozav. Dar stai putin! Ei stiu motivul acestei schimbarii? De obicei nimeni nu stie de ce schimbam acest lucru, si trec din infernul tabelelor in infernul div-urilor.

Acest articol incearca sa acopere toate problemele legate de structrura unui website. In prima parte vreau sa va explic care este diferenta dintre tabele si div-uri (cu mai multe exemple desigur…). In a doua partea a articolului vreau sa va arat cum sa scrieti cod mai usor de inteles. In ultima parte voi aduce in discutie cateva chestii ce tin de viitor.

Iadul Tabelelor
Te aflii in iadul tabelelor atunci cand website-ul tau foloseste o structura formata din tabele ca design. Tabelele de obicei maresc complexitatea website-ului si desigur mai greu de intretinut. De asemenea reduc flexibilitatea website-ului in medie de diverse elemente de design si limiteasza functionalitatea.
MAMA (Metadata Analysis & Mining Application) este un motor de cautare pentru strcutura paginii web de la Opera Software ce scaneaza structura web a paginii si iti returneaza detaliile. Daca ne uitam in  cheia de gasiri din MAMA observam ca majoritatea siteurilor au o structura bazata pe tabele formata din  3 nivele. Pe lista celor mai populare 10 taguri  gasim table, td si tr. Aceasta structura de tabele este in peste regasita in peste 80% din site-urile verificate de MAMA.

Usurinta de utilizare

Sa folositi tabele pentru structura unui website este ceva foarte intuitiv. Vedem structuri construite in acest mod in fiecare zi si conceptul este deva extrem de cunoscut.
Folosirea sistemului de tabele iti face treaba mai usoara pentru ca poti folosi un singur stil iar pentru div-uri ai nevoie de stiluri diferite. Cu divurile trebuie sa folosesti atributul style pentru fiecare bloc pe care vrei sa il creezi.
SI inca un lucru bun este acela ca tabelele nu iti vor dezordona toata pagina cand continutul unei celule este prea mare, iar coloanele nu sunt “strivite” precum in structura cu div-uri.

Intretinere

Un tabel in HTML este constituit din mai multe tag-uri:
-table : in interiorul acestuia sunt puse toate celelalte tag-uri.
-tr : acest tag il deschizi/inchizi pentru orice rand pe care vrei sa il ai in tabel.
-td : acest tag il deschizi/inchizi pentru orice celula.
Tag-urile thead si tbody nu sunt folosite pentru structura unui website pentru ca adauga un inteles semantic continutului. Pentru usurinta in citire, fiecare tag primesti cate o linie de cod cu alinierea de riguare. Cu toate aceste tag-uri ce formeaza un tabel in HTML  se adauga alte cateva linii de cod in continutul websiteului. Atributele colspan si rowspan fac acest cod si mai complex si astfel facand-ul si mai greu de inteles pentru webdesignerii ce vor avea nevoie sa umble in cod.

Cum vedem in exemplul de mai sus, structura facuta cu tabele contine mai mutle linii de cod decat ce-a facuta cu div-uri. Imagineaza-ti acum cat de mult va creste aceasta structura pe amsura ce vei continua sa dezvolti acest design. Intr-o structura bazata pe div-uri trebuie sa tinem minte ca putem sari peste cateva meniuri facandule cu ajutorul listelor nesortate (ul) in loc de alt div.
Cand vedeti un cod in care sunt imbricate mai multe tabele va dati seama ca va aflati in iadul tabelelor. Numarul de linii de cod pare a nu se mai termina si complexitatea este coplesitoare. Structura construita cu tabele puteti sa o numiti cum vreti, dar nu cod curat.

Un alt dezavantaj al structurii realizate cu tabele este acela ca este greu de separat continutul de design. Conform MAMA, in jur de 90% din website-uri folosesc constant atributele border, width, cellpadding si cellspacing. Acestea sunt linii de cod care ar trebuii sa se regaseasca in fisierul .css al website-ului.
Acest cod in excess incetineste munca unui designer/programator si creste costurile de intretinere. Cand angajezi un programator vei observa ca el poate scrie un numar de linii de cod per ora, iar acest cod incalcit ii ingreuneaza munca si pe deasupra va fi mai greu de inteles si pentru alti oameni ce umbla in sursa. Dupa un timp este posibil ca nici designerul ce a facut acel cod sa nu-l mai inteleaga.
Cred ca este evident si nu trebuie sa mai spun, mai multe linii de cod inseamna dimensiune a fisierelor mai mare, deci viteza de incarcare mai mica. Atunci cand faci un design web trebuie sa tii cont si de faptul ca apar din ce in ce mai multe medii ce nu pot incarca fisiere prea mari in timp scurt, de exemplu dispozitivele mobile, ca sa nu aduc in discutie netul mobil care este limitat. Siteurile trebuie sa poata fi vizitate de pe diverse dispozitive, nu doar de clasicele monitoare, iar codul scris prost limiteaza posibilitatile. Un cod mare are cu siguranta mai multe bug-uri decat un cod mai mic. De obicei programatorii creeaza (neintentionat, evident) un numar de erori per linie, iar structura cu tabele fiind una lunga si complexa creste numarul de erori.

Flexibilitatea media
Folosind tabele pentru structura iti face site-ul mai putin flexibil cand vine vorba de aranjarea coloanelor, ascunderea coloanelor, etc. Poate utilizatorul vrea sa vada o versiunea printer friendly a articolului, dar acest lucru este ingreunat de tabele. Acest lucru necesita pagini diferite cand este vorba de tabele, ceea ce inseamna mai multe ore de plata programatorului si structura mai greu de intretinut decat ca la o structura pe div-uri.

Iadul Div-urilor
Ce vreau sa spun prin iadul divurilor? Ca un site are mai multe divuri decat necesita functionarea lui corecta.
Un div este un element de tip bloc ce definesti o sectiune dintr-un document. De obicei, programatorii gasesc o constructie la nivel de blocuri pe care nu o inteleg si adauga mai multe div-uri decat au nevoie.

Usurinta de utilizare
Structurile bazate pe div-uri este mult mai usor de invatat decat o structura bazata pe tabele. UN programator ce lucreaza cu o asemenea structura trebuie sa stie CSS si sa cunoasca diferenta dintre  elementele de tip block si elementele inline, cand sa foloseasca float si cand sa foloseasca pozitia absolute, precum si  rezolvarea problemelor ce apar in diverse browsere.

Elementele div nu sunt atat de vizibile precum tabelele. Toata lumea stie cum arata un tabel, dar divurile nu ies atat de mult in evidenta. Lucrul bun la divuri este ca vorbim doar de un element, nu sunt puse in alte elemente precum in cazul tabelelor.
Cand construiti o pagina cu ajutorul div-urilor trebuie sa fiti atenti la continutul din acestea pentru ca daca continutul este mai mare decat doriti sa fie div-ul atunci acesta se va marii automat. De asemenea coloanele pot fi fortate sa fie afisate una sub alta datorita continutului prea mare, dar unele dina ceste probleme apar mai ales in browsere mai vechi (in special in Internet Explorer 6).
Sa lucrati in mai multe browsere poate fi inselator la inceput,  dar din ce capatati mai multa experienta veti reusi sa rezolvati problemele mai usor, iar suportul browserelor pentru standardele W3C devine din ce in ce mai bun.Cu popularitatea castigata de Firefox si Safari, respectiv ultimul venit in lupta Chomre observam o mare batalie intre acesti giganti, ceea ce pentru webdesigneri si webprogramatori este un lucru bun pentru ca vor aparea versiuni din ce in ce mai bune ale acestor browsere.

Intretinere

Ce-a mai mare problema a div-urilor este aceea ca sunt folosite prea des. Div-urile ar trebuii sa fie folosite doar la construirea structurii si a plasarea diverselor elemente de design cand nu o putem face alt tip de element..

Div-urile imbricate sunt un drum catre drumul spre iadul acestora, codul devenind aproape de necitit  facandu-i pe progamatori sa citeasca de 2 ori cel putin pentru a intelege…
Trebuie sa folositi div doar cand este aboslut necesar, titluri, meniuri, etc puteti folosi taguri precum h1, h2, etc.
Lucrand cu valori semantice date claselor si id-urlior va creste intr-un mod uimitor lizibilitatea codului, dar incercati sa evitati sa le numiti asa: textMareSiRosu. SI site-urile mari, precum Google folosesc algoritmi avansati ce au in componenta clase si id-uri.
O tehnologie interesanta este aceea a microformatelor ce este construita pe idea de clase semantice.Cu ajutorul formatelor speciale standard, continutul poate fi procesat automat.

Prezenta atributului style arata ca un site se indreapta cu pasi rapizi spre un infern al div-urilor.53.54% din site-urile indexate de MAMA contin atributul style, si 35.40% din websiteuri contin cel putin 1 atribut style. Clasele si id-urile ajuta la separaraea designului de continut si curata codul facandu-l mai usor de inteles.
Codurile semantice ajuta computerele sa inteleaga continutul. In timp ce oamenii sunt in stare sa caute pe internet cum se spune “maimuta” in norvegiana calculatoarele nu pot face nimic fara oameni, de aceea este foarte important sa folosim tag-uri descriptive pentru tipurile de continut.
Fiecare div pe care il scrie programatorul face codul mai greu de inteles si citit. Mai multe linii de cod  duc la timp mai mare de download. Folosirea in excess a div-urilor este la fel de rea ca si folosirea de tabele, cu exceptia ca acestea sunt mai flexibile.

Pentru a ilustra ce am spus mai sus hai sa va dau un exemplu:

Meniu

Aici aveti un exemplu de meniu cu prea multe div-uri. Folosind o lista cu tag-ul display: block in css face toate aceste div-uri inutile.
Heading

Heading-urile ca acestea adauga decat efect vizual, valoarea lor semantica fiind pierduta iar paienjenii motoarelor de cautare nu pot face diferenta intre continut si heading.(acelasi lucru se intampla si cand folosim tag-ul b in loc de strong)

Lista

Programatorii ce nu inteleg potentialul listelor folosesc in locul lor div-uri. Listele te scutesc de definirea mai multor clase in css si ajuta cititorii sa stie cate optiuni ai in meniu.

Latimi diferite pentru containere

Flexibilitatea cu media

Chiar si un website aflat in iadul div-urilor poate fi flexibil cu media atat timp cat designul este separat de continut si pus in css-uri.O structura bazata pe div-uri iti permite sa muti cu usurinta coloane si chiar sa le ascunzi pe unele cu codul display: none; pus in css.
Cand un website are multe div-uri cu float setat pentru fiecare este foarte greu sa opresti unul din ele pentru a evita problemele de printare in browserele bazate pe Gecko precum Netscape 6.x, Mozilla, etc.

Drumul catre Rai

Folosirea corecta a Div-urilor

Inainte de a face un div nou puneti-va intrebarea: “Acest lucru este absolut necesar, sau pot face acelasi lucru cu un element de tip block?” Folosirea tag-urilor h1, h2, h3, h4 si h5 pentru titluri, ul si ol pentru meniuri, si sa nu uitam de paragraf va ajuta enorm de mult. Alt element ce nu are nevoie de div-uri este tag-ul form. Pentru mai multa flexibilitate  cu formele incercati sa combinati elementul fieldset cu o lista, in acest mod continutul are valoare semantica iar programatorului ii este mai usor de citit.

Pentru ca un singur div poate creea un element, codul va fi mult mai mic decat la o structura bazata pe tabele. Mai putin cod ce e mai usor de citit, mai usor de intretinut, mai rapid de modificat, are mai putine probleme, dimensiunea fisierului este mai mica, intelegeti ce vreu sa spun… Tot ce iti doresti este un cod mic ce isi indeplineste sarcina cu brio.

Cand o structura este scrisa corect ai nevoie de mai multe div-uri pentru partea grafica. Cand nu putem seta o culoare de fundal, border, imagine de fundal, etc la un anumit nivel este okay sa folosim un div. Simplitatea codului nu ar trebuii sa stea in calea designului bun.

Sfaturi si trucri

Exemplul de mai jos ar trebuii sa ii inspire pe programatori sa se intereseze mai mult pe aceasta tema, ce-a a codului curat si a evitarii divurilor inutile. Observati cum semantica dina cest cod ajuta la lizibilitatea codului.

Un meniu facut cu o lista este mai usor de folosit decat un div cu mai multe linii de cod. Tag-ul li este un tag la nivel de block ce poate avea mai multe proprieteti (precum background).

Titluri

Folositi heading-uri oriunde este posibil. Acestea adauga valoare semantica continutului si ajuta la cresterea rank-ului.

Lista Noutati

Grupeaza diferite parti de continut si punele in liste. Este uimitor cat de multe site-uri foloseste aceasta metoda de afisare, pentru ca acestea sunt un container excelent. Salvaza multe linii de cod si il face mult mai usor de inteles decat tabelele sau divurile.

Latimi diferite pentru containere

Cu o clasa setata pentru body nu mai ai nevoie de contentSmall, contentNormal, contentWider si asa mai departe. Cel mai simplu faci referinta la body printr-o clasa ce cotroleaza latimea setata in css.Folosind un fisier .css pentru design face codul mai usor de citit iar programatorul nu are atat de mult de inteles.

Lista post data

Folositi tag-ul dl cand listati valori in pereche. Multi oameni ar folosii un tabel pentru a face acest lucru, dar folosirea tag-ului dl face codul mai usor de citit.

Forma Simpla

Acest exemplu de forma este semantic si are containere pentru schema. Obtinerea unei scheme ce arata bine intr-o forma este de obicei destul de complicat.

Folosirea div-urilor pentru managementul unei structuri (header, meniu, footer si asa mai departe) si folosirea altor elemente de tip block precum p, ul, dl, si form fac sursa ta un loc mult mai placut pentru programatori/designeri. Listele sunt destul de late si perfecte pe post de container.
Sfaturi trecere de la structura pe baza de tabele la div-uri
-Mergi incet, incepe sa inlocuiesti tabelele mai mici cu div-uri si inlocuiestele cu totul (nu uita sa setezi clasele CSS necesare). Lucreaza la codul ce afecteaza mai multe pagini, dar ocupate si de cele mai populare/importante pagini.
-Nu mai pune nici un tabel in codul tau, decat daca este vorba de date ce au neaparata nevoie sa fie intr-un tabel.
-Separa designul de continut. Tot ce tine de structura in fisierele HTML, iar ce tine de design in fisierele CSS.
-De fiecare data cand lucrezi intr-un fisier fii atent daca poti imbunatatii codul cu ceva, chiar daca este vorba de o clasa in loc de un tag style, sau da il poti face mai lizibil.
-Iti va lua mai mult timp sa inlocuiesti tot sistemul de o data (presupunand ca vorbim de un site relativ mare), dar rand cu rand este posibil.
-Nu continua sa scrii cod prost scris daca site-ul deja contine asa ceva. Scrie cod semantic bun si reaminteste-ti constant ca codul prost scris va fi inlocuit pana la urma.

Cum arata viitorul?

Deja cunoastem 2 noi tehnologii ce arata intersat din punctd e vedere al structurii. HTML 5 va venii cu tag-uri ce au inteles semantic corespunzator si template-urile pe baza de tabele pentru CSS. CSS 3 va veni cu cateva caracteristici noi numite template pe multi-coloane.

HTML 5

In HTML 5 vom observa marcajele semantice pentru struictura paginii web, ceea ce inseamna ca toata structura va avea inteles semantic.

Acest lucru va adauga o multime de posibilitatii modului in care computerele citesc website-urile:
-Motoarele de cautare vor avea mai multe moduri de a da un rank unui website, bazanduse pe structura
-Marcajele pentru dispozitive cu dispalyuri mici va deveni un standard.
Pe langa noua structura a elementelor, HTML 5 aduce multe taguri noi. Unele dintre cele mai interesante sunt:
-Tag-urile audio si video aduc inteles semantic pentru continut si permit redariea directa din browser.
-Formele vor avea inteles semantic nou si imbunatatit pentru introducere si validare.
-Noul tag canvas va avea API 2-D pentru desen.
HTML 5 contine multe noi API-uri:
–  Immediate-mode 2D drawing
– Timed media playback
– Offline storage
– Editing
– Drag and drop
– Messaging/networking
– “Back” button management
– MIME and protocol handler registration
Avand in vedere ca am scris atat de mult am sa ma opresc chiar daca mai aveam de spus cateva chestii…deci daca aveti intrebari sau nelamuriri sunteti bineveniti sa lasati un comentariu (acestea fiind monitorizate zilnic), air noi va vom raspunde.