Bakit Dapat Mong Iwasan ang Mga Table para sa Mga Layout ng Web Page

CSS ay ang pinakamahusay na paraan upang bumuo ng mga disenyo ng web page

Ang pag-aaral na magsulat ng mga layout ng CSS ay maaaring nakakalito, lalo na kung pamilyar ka sa paggamit ng mga talahanayan upang lumikha ng mga magarbong web page layout. Ngunit habang nagbibigay-daan ang HTML5 ng mga talahanayan para sa layout, ito ay hindi isang magandang ideya.

Hindi Magagamit ang mga Table

Tulad ng mga search engine, ang karamihan sa mga mambabasa ng screen ay nagbabasa ng mga web page sa pagkakasunud-sunod na ipinapakita sa HTML. At ang mga talahanayan ay maaaring maging napakahirap para sa mga mambabasa ng screen upang mai-parse. Ito ay dahil ang nilalaman sa isang talahanayan layout, habang ang haba, ay hindi palaging magkaroon ng kahulugan kapag basahin kaliwa-sa-kanan at top-sa-ilalim. Dagdag pa, may nakapaloob na mga talahanayan, at iba't-ibang espasyo sa mga selda ng talahanayan ay maaaring gumawa ng pahina na mahirap malaman.

Ito ang dahilan na inirerekomenda ng pagtutukoy ng HTML5 laban sa mga talahanayan para sa layout at kung bakit hindi pinapagana ito ng HTML 4.01. Ang mga mapupuntahan na web page ay nagbibigay-daan sa higit pang mga tao na gamitin ang mga ito at ang marka ng isang propesyonal na taga-disenyo.

Sa CSS, maaari mong tukuyin ang isang seksyon bilang pag-aari sa kaliwang bahagi ng pahina ngunit ilagay ito sa huling HTML. Pagkatapos ng mga mambabasa ng screen at mga search engine magkapareho ay magbabasa ng mga mahahalagang bahagi (ang nilalaman) muna at ang hindi gaanong mahalagang mga bahagi (nabigasyon) ay tatagal.

Ang mga Tables ay nakakalito

Kahit na lumikha ka ng isang table na may isang web editor, ang iyong mga pahina sa web ay magiging sobrang kumplikado at mahirap mapanatili. Maliban sa mga pinakasimpleng disenyo ng web page, ang karamihan sa mga talahanayan ng layout ay nangangailangan ng paggamit ng maraming at mga katangian at ng mga nested na mga talahanayan.

Ang paggawa ng mesa ay maaaring maging madali habang ginagawa mo ito, ngunit kailangan mong panatilihin ito. Anim na buwan sa linya na ito ay maaaring hindi madaling matandaan kung bakit nested mo ang mga talahanayan o kung ilang mga cell ay nasa isang hilera at iba pa. Dagdag pa, kung pinapanatili mo ang mga web page bilang isang miyembro ng koponan, kailangan mong ipaliwanag sa bawat tao kung paano gumagana ang mga talahanayan o inaasahan ang mga ito na kumuha ng karagdagang oras kung kailan kailangan nilang gumawa ng mga pagbabago.

Ang CSS ay maaaring kumplikado pati na rin, ngunit pinapanatili nito ang pagtatanghal na hiwalay mula sa HTML at ginagawang mas madali upang mapanatili sa katagalan. Dagdag pa, may layout ng CSS maaari kang magsulat ng isang CSS file, at estilo lahat ng iyong mga pahina upang tumingin sa ganoong paraan. At kapag gusto mong baguhin ang layout ng iyong site, binago mo lamang ang isang CSS file, at ang buong site chnges-hindi na dumadalaw sa bawat pahina nang paisa-isa upang i-update ang mga talahanayan upang i-update ang layout.

Ang mga Tables ay Madali

Habang posible na lumikha ng mga layout ng talahanayan na may lapad na porsyento, madalas silang mas mabagal na mag-load at maaaring baguhin nang malaki kung gaano ang hitsura ng iyong layout. Ngunit kung gumamit ka ng tinukoy na lapad para sa iyong mga talahanayan, ikaw ay nagtatapos sa isang napaka matibay na layout na hindi magiging maganda sa mga monitor na naiiba sa laki ng iyong sarili.

Ang paglikha ng mga nababagay na layout na mukhang maganda sa maraming mga monitor, mga browser, at mga resolution ay medyo madali. Sa katunayan, may mga query sa media ng CSS, maaari kang lumikha ng hiwalay na mga disenyo para sa iba't ibang mga screen ng laki.

Nested Tables Mag-load ng Higit Slowly kaysa sa CSS para sa Parehong Disenyo

Ang pinaka-karaniwang paraan upang lumikha ng magarbong mga layout na may mga talahanayan ay ang mga "nest" na mga talahanayan. Nangangahulugan ito na ang isang (o higit pa) na talahanayan ay inilalagay sa loob ng isa pa. Ang higit pang mga talahanayan na nested, mas matagal ang kinakailangan para sa web browser na mag-render ng pahina.

Sa karamihan ng mga kaso, ang isang layout ng table ay gumagamit ng higit pang mga character upang lumikha kaysa sa isang disenyo ng CSS. At mas kaunting mga character ay nangangahulugan na mas mababa upang i-download.

Ang mga Tables ay Nakakagambala sa Search Engine Optimization

Ang pinakakaraniwang table na nilikha ng layout ay may navigation bar sa kaliwang bahagi ng pahina at ang pangunahing nilalaman sa kanan. Kapag gumagamit ng mga talahanayan, ito (karaniwan) ay nangangailangan na ang unang nilalaman na nagpapakita sa HTML ay ang left-hand navigation bar. Inilalarawan ng mga search engine ang mga pahina batay sa nilalaman, at maraming engine ang tumutukoy na ang nilalaman na ipinapakita sa tuktok ng pahina ay mas mahalaga kaysa sa iba pang nilalaman. Kaya, ang isang pahina na may unang navigation sa kaliwa, ay lilitaw na magkaroon ng nilalaman na mas mahalaga kaysa sa nabigasyon.

Gamit ang CSS, maaari mong ilagay muna ang mahalagang nilalaman sa iyong HTML at pagkatapos ay gamitin ang CSS upang matukoy kung saan dapat itong mailagay sa disenyo. Nangangahulugan ito na makikita ng mga search engine ang mahalagang nilalaman, kahit na ang disenyo ay nagpapababa sa pahina.

Mga Tables Huwag Palaging Mag-print ng Lamang

Maraming mga disenyo ng talahanayan ay hindi maayos na naka-print dahil ang mga ito ay sobrang lapad para sa printer. Kaya, upang maayos ang mga ito, gupitin ng mga browser ang mga table at i-print ang mga seksyon sa ibaba na nagreresulta sa napaka-disjointed pahina. Kung minsan ay napupunta ka sa mga pahina na mukhang okay, ngunit ang buong kanang bahagi ay nawawala. Ang iba pang mga pahina ay mag-print ng mga seksyon sa iba't ibang mga sheet.

Sa CSS maaari kang lumikha ng isang hiwalay na estilo ng sheet para lamang sa pag-print ng pahina.

Ang mga Table para sa Layout ay hindi wasto sa HTML 4.01

Ang mga detalye ng HTML 4 ay nagsasabi: "Ang mga talahanayan ay hindi dapat gamitin nang pulos bilang isang paraan sa nilalaman ng dokumento ng layout dahil ito ay maaaring magpakita ng mga problema kapag nag-render sa di-visual na media."

Kaya, kung nais mong isulat ang wastong HTML 4.01, hindi ka maaaring gumamit ng mga talahanayan para sa layout. Dapat ka lamang gumamit ng mga talahanayan para sa hugis ng mga talaan ng data. At ang hugis ng talaan sa pangkalahatan ay kamukha ng isang bagay na maipapakita mo sa isang spreadsheet o posibleng isang database.

Subalit binago ng HTML5 ang mga panuntunan at ngayon ang mga talahanayan para sa layout, habang hindi inirerekomenda, ay may wastong HTML na ngayon. Ang mga detalye ng HTML5 ay nagsasaad: "Ang mga table ay hindi dapat gamitin bilang pantulong sa layout."

Dahil ang mga talahanayan para sa layout ay mahirap para sa mga mambabasa ng screen upang makilala, gaya ng nabanggit ko sa itaas.

Ang paggamit ng CSS sa posisyon at layout ng iyong mga pahina ay ang tanging wastong HTML 4.01 na paraan upang makuha ang mga disenyo na ginamit mo upang gamitin ang mga talahanayan upang lumikha. At lubos na inirerekumenda ng HTML5 ang pamamaraang ito.

Ang mga Tables para sa Layout ay Maaaring Makakaapekto sa Inaasahan ng Inyong Job

Habang mas maraming mga bagong designer ang natututo ng HTML at CSS, ang iyong mga kasanayan sa mga layout ng talahanayan ng gusali ay magiging mas mababa at mas kaunting demand. Oo, totoo na ang mga customer ay hindi karaniwang nagsasabi sa iyo ng eksaktong teknolohiya na dapat mong gamitin upang maitayo ang kanilang mga web page. Ngunit hinihiling nila sa iyo ang mga bagay tulad ng:

Kung hindi mo maihatid kung ano ang hinihingi ng mga kliyente, titigil sila sa pagdating sa iyo para sa mga disenyo, marahil hindi ngayon, ngunit baka sa susunod na taon o sa taon pagkatapos. Maaari mo bang kayang ipaubaya ang iyong negosyo dahil hindi ka handa upang simulan ang pag-aaral ng isang pamamaraan na na ginagamit mula sa huling bahagi ng 1990s?

Ang Moral: Alamin ang Paggamit ng CSS

Maaaring mahirap matuto ang CSS, ngunit ang anumang bagay na kapaki-pakinabang ay nagkakahalaga ng pagsisikap. Huwag panatilihin ang iyong mga kasanayan mula sa stagnating. Dagdagan ang CSS at buuin ang iyong mga web page sa paraang nilayon silang itayo-may CSS para sa layout.