DIV vs Table
February 26, 2008 – 10:35 amŠis raksts, laikam, ir kā mudinājums pašam sev. 
Iepriekšējā raksta komentāros Valdis prasīja lai iedodu kādu mazu piemēru ar kuru varētu paspēlēties, tad nu lūk - test.html
#1 noliek input lauku lejā, bet #2 ir iespējams vertikāli nocentrēt. Tagad lai noformatētu tik pat smuki kā tabulu, man jāliek visās malās padingi, margini, utt + jāmoka tas input lauks vidū .. un šeit nevar būt runa par to vai man vispār vajag to input lauku tur vidū .. mēs pieņemam, ka vajag. Kādi bija xhtml un css dizaina labumi? Izskatās, ka lapa ātrāk ielādējas? Mazāk html koda - par šo es nepiekrītu, jo saliekot visus paddingus un “hakus” nedomāju, ka būs mazāk simbolu(nevis mazāk līniju)?
Šeit atradu dažādus labumus:
- make your pages load faster - Tiešām? Man liekas, ka tikai izskatās, ka lapa ielādējas ātrāk, jo tabulas tiek renderētas mazliet savādāk. Precīzāk tabulas tiek renderētas, kad ir visi dati ielādēti, bet div, p, u.c. elementi tiek renderēti, uzreiz, negaidot visus datus. Vai man ir taisnība? Nav man gluži taisnība - css failus pārlūks parasti “iekašo”, tas nozīmē, ka tiešām lapa ielādējas ātrāk, bet var arī izmantot tabulas + css.
- lower your hosting costs - Kā gan tas varētu to ietekmēt? Tiek izmantots mazāks bandwidth? Varbūt, ja mēs vēljoprojām lietotu modemus, tad būtu par to jāuztraucas.
- make your redesigns more efficient and less expensive - Viss ir atkarīgs no tā, kā sastrukturizēts kods.
- help you maintain visual consistency throughout your sites - “Palīdz radīt vizuālu saskaņu starp lapām” - Pareizi iztulkoju? Nesaprotu kā tas varētu ietekmēt tas, ka izmantotas tabulas.
- get you better search engine results - par šo neko nezinu un vispār liekās mazliet neloģiski vai tad search engines neņem vērā datus, kas atrodas tabulās? Nevajadzētu būt tieši otrādāk, ka svarīgākie dati atrodas tabulās?
- make your sites more accessible to all viewers and user agents - Varbūt arī, bet cik lielā mērā, manuprāt kopumā izskats nemainīsies no tā kādu tu gribēsi redzēt, tikai tas cik ilgu laiku patērēsi taiso vienā un otrā variantā gan atšķirsies. Viss atkarīgs no dizaina - kā varētu mainīties accessibility atkarībā no tā kas izmantots? jebkurā gadījumā parasts lietotājs redzēs gala iznākumu, nevis to ar kādu tehnoloģiju tas taisīts. Ok, vienīgais varbūt gala lietotājam liksies, ka lapa mazliet(tikai mazliet, ņemot vērā mūsdienu interneta ātrumus un datoru jaudas) ielādējas un varbūt uz mobilām ierīcēm nebūs tik viegli saskatīt vai izlasīt datus, bet uz kuras mobilās ierīces ir viegli izlasīt tādus protālus kā piemēram tvnetu vai apollo vienalga vai viņiem ir vai nav “table-free” izkārtojums?
- and give you a competitive edge (that is, job security) as more of the world moves to using Web standards - kur būtu rakstīts, ka tabulas nav web standarts vai, ka tabulas nebūtu īsti drošas?
Man personīgi arī patīk izmantot div tagus un css, bet ir lietas, kuras nevar izdarīt tik vienkārši. Agrāk es arī centos taisīt tā, lai ir pilnībā css dizains, bet tagad tas viss sāk likties muļķīgi. Nez ko par to saka HTML 5? HTML 5 saka: “we need some editorial text on how layout tables are bad practice and non-conforming” Pameklējot googlē tekstu: “html why tables are bad practise” pirmais rezultāts ir - “HTML tables best practise“, kur diezgan labi aprakstīts kādam mērķim tabulas domātas.
Es negribu radīt iespaidu, ka es cenšos panākt, lai visi tagad izmanto tabulas .. es tikai gribu ieteikt tik daudz neturēties pie principiem vai arī atrast labu risinājumu. Bet es neesmu atradis labu risinājumu vertikālai pozicionēšanai div tagos un tāpat arī padding un margin atšķiras uz internet explorera un piemēram firefox.
Nobeigumā viena laba frāze atrasta šeit:
“If you are interested in semantics and standards you would never put a similar hack in an XHTML file, so why would you do it in the CSS file?”
9 Responses to “DIV vs Table”
Ja iebrauc tajā lietā un vajadzīgajās niansēs, tad tas viss kļūst triviāli.
Par to tavu piemēru - kaut vai pieliec savam p elementam šādu stilu:
line-height: 275px;
background-image: url(/uploads/test.jpg);
background-repeat: no-repeat;
background-position: 200px center;
un izvāc bildi no p elementa ārā. Lieta darīta.
By Ingus on Feb 26, 2008
lower your hosting hosts - tas pie mums visi ir pieraduši ka hostinga provaideri neplēš piķi par trafiku. Ārzemēs tas var būt paliels “pain in the ass”, jo ja ar strukturētu XHTML/CSS var lapas izmēru samazināt divas reizes no tabulu izmēra tad tas nozīmē ka lapu var apskatīt divas reizes vairāk cilvēku pirms trafika limits izbeigsies :).
Šeit par īsti nav runas par web standartiem konkrēti, bet par web semantiku - saturam jābūt loģiski saliktam pareizajos tagos un to nodrošina webv standarti - tabulāri dati iet tabulās, paragrāfi paragrāfos, listi listos. Dizains nav tabulāra informācija kas uzreiz izjauc lapas “satura loģiku”, kas uzreiz to (teorētiski) pazemina, piemēram, google reitingos.
Cik cilvēki var plēsties par standartiem :)! Nu nemāki, neproti tad nevajag - sēdi uz HTML4 un tabulām :). Es jau pāris gadus kā kodēju (vismaz cenšos ;)) semantiski pareizi un atbilstoši standartiem kodēt un man mūžā nav nācies izmantot nevienu haku, vai sastapt lietu ko nevarētu izdarīt izmantojot XHTML/CSS ko varēja izdarīt ar tabulām. Jā browser compatability ir sāpes pakaļā dažreiz, bet izprotot pārlūku atšķirības problēmas var smuki apiet (neizmantojot hakus).
By jk on Feb 26, 2008
jk: Bet tā visa apiešana neliekas muļķīga? Padomā cik pareizi būtu sastrukturizētas lapas, ja visi pārlūki atbilstu standartiem.
ar to es gribēju pateikt, ka daļēji pie nepareizi strukturizētām lapām ir vainīgi pārlūku autori.
Tu gribi teikt, ja man lapā piemēram search forma atrodas tabulā vai arī, ja man ir kaut kāds saraksts ar datiem, kas atrodas tabulā, tad google meklētājā tie dati atradīsies zemāk par līdzīgiem datiem(Varbūt pat ne tik pilnīgiem), kuru mājas lapā nebūs nevienas tabulas? Tas nozīmē, ka google zirnekļcilvēks spēj atšķirt vai tabulā ir ielikti tabulāri dati vai arī dizains? man kaut kā tās visas lietas neiet īsti kopā.
Ingus: Un lai tai bildei uzliktu linku, tad man jātaisa image maps? Konkrētāks piemērs ir bloga aukšā search forma + feed ikona..
By gm on Feb 26, 2008
Jā, daļēji pie putras ir vainīgi pārlūku autori, jo kādreiz tiem bija piekāst uz standartiem, jo standarti nevienu neinteresēja. Pēdējā laikā standarti ir pēdējais modes kliedziens, tāpēc tiem tiek pieviērsts arvien vairāk uzmanības un nākas ar tiem rēķināties :).
Googlei ir vieglāk indeksēt “pareizi” sastrukturizetus datus kas meklētājam ļauj vieglāk “izprast” datu nozīmi. Līdz ar to tas spēj precīzāk Tavu lapu izdot meklējuma rezultātos. Tā protams ir teorija, bet fakts paliek fakts - semantiski pareizi strukturēts saits ir vieglāk uztverams meklētājserveriem un arī man kā developerim vieglāk ir saprasts “pareizi” sarakstītu kodu nevis miksli no tabulām :). Vienkārši man jau izraisa riebumu kods kurā ir tabulu mikslis un kuru nekādīgi nevar viegli izprast un jā jāveic redizains tad tās ir tīrās šausmas, jo DIVus ir vieglāk “bīdīt/mainīt” nekā tabulas.
Kāds gudrs vīrs ir teicis ka cilveki diskutē un strīdās tikai lai SEV pierādītu SAVU taisnību. Es jau sen esmu pārgājis uz XHTML/CSS/JS kodu kas ir loģiski atdalīts viens no otra un ir semantiski pareizi noformēts. Pec tam veicot izmaiņas webā tas dikti atvieglo dzīvi.
Pārlūku nesavietojamības galvenos knifus jau pārzinu un tāpēc maketējot webus ņemu to verā un dzīve kļuvusi vieglāka. Hakus neatzīstu un nelietoju.
Saproties - necenties pārliecināt sevi ka tabulas ir labas vai sliktas. Tabulas, DIVi, CSS, XHTML ir tikai instrumenti - lieto kas Tev liekas pareizāk un ērtāk. Man ērtāk ir rakstīt “pareizu” kodu, tā ir mana filozofija. Izvēlies pats savējo :). Peace :)!
By jk on Feb 26, 2008
Es nestrīdos un vispār neesmu html programmētājs .. man pēc būtības html un css diezko nepatīk rakstīt(to pašu iemeslu dēļ
). Vienkārši dažreiz savajagas un tad ir jāmeklē risinajumi… 
By gm on Feb 26, 2008
Es padodos šai gadījumā. Vispār mans viedoklis par html un css kodēšanu ir ļoti līdzīgs jk domām.
By Valdis on Feb 26, 2008
Pirmoreiz saskaroties ar virsrakstiem “create your tables with div” un papildrakstiem, ka tā ir labāka prakse, es ķēros klāt un skatījos kā tas sanāk.
Secinājumi šobrīd ir: nu nav DIV obligāti labāks par table, it sevišķi, ja ir nepieciešamas vienkāršas strukturētas tabulas.
By Sandis on Feb 27, 2008
Manuprāt lielākās problēmas ir visāda veida pozicionēšana un tas, ka atšķiras pārlūkiem veids kā tie saprot paddingus un marginus.
By gm on Feb 28, 2008