എന്തുകൊണ്ട് നിങ്ങൾ വെബ് പേജ് ലേഔട്ടുകൾക്കായി പട്ടികകൾ ഒഴിവാക്കണം

വെബ് പേജ് ഡിസൈൻ നിർമ്മിക്കുന്നതിനുള്ള ഏറ്റവും നല്ല മാർഗ്ഗമാണ് CSS

ഫാഷൻ വെബ് പേജ് ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് പട്ടികകൾ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, പ്രത്യേകിച്ച് CSS ലേയറുകൾ എഴുതുന്നതിന് പഠിക്കുന്നത് തന്ത്രപരമായിരിക്കാം. എന്നാൽ HTML5 ലേഔട്ടിനായി ടേബിളുകൾ അനുവദിക്കുമ്പോൾ, അത് നല്ല ആശയമല്ല.

ടേബിളുകൾ ആക്സസ് ചെയ്യാനാകില്ല

തിരയൽ എഞ്ചിനുകൾ പോലെ, മിക്ക സ്ക്രീൻ റീഡറുകളും HTML പേജിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന ക്രമത്തിൽ വെബ് പേജുകൾ വായിക്കുന്നു. സ്ക്രീൻ റീഡറുകളെ പാഴ്സ് ചെയ്യുന്നതിന് പട്ടികകൾ വളരെ ബുദ്ധിമുട്ടായിരിക്കും. കാരണം, പട്ടികയുടെ ലേഔട്ടിലുള്ള ഉള്ളടക്കം ഇടത് വശത്തായിരിക്കുമ്പോൾ ഇടത്-വലത്തേക്കും മുകളിൽ നിന്നും താഴെയായിരിക്കുമ്പോൾ എല്ലായ്പ്പോഴും അർത്ഥമില്ല. പ്ലസ്, നെസ്റ്റഡ് ടേബിളുകളുള്ളതും പട്ടികയുടെ കോശങ്ങളിലെ വിവിധ പരിപാടികളും ഈ താൾ കണ്ടെത്തുന്നത് വളരെ പ്രയാസകരമാണ്.

ഇതാണ് HTML5 നിർദ്ദേശം ലേഔട്ടിനായി ടേബിളുകളോട് ശുപാർശ ചെയ്യുന്നത് കൂടാതെ എന്തുകൊണ്ട് HTML 4.01 അത് അനുവദിക്കുന്നില്ല എന്ന് നിർദ്ദേശിക്കുന്നു. ആക്സസ് ചെയ്യാവുന്ന വെബ് പേജുകൾ കൂടുതൽ ആളുകൾ അവരെ ഉപയോഗിക്കാൻ അനുവദിക്കുകയും ഒരു പ്രൊഫഷണൽ ഡിസൈനറിന്റെ അടയാളമായിരിക്കുകയും ചെയ്യുന്നു.

CSS ഉപയോഗിച്ച്, ഒരു ഭാഗത്തെ ഒരു പേജിന്റെ ഇടതുഭാഗത്തായി അംഗീകരിക്കാം, പക്ഷേ ഇത് HTML ൽ അവസാനം വയ്ക്കുക. തുടർന്ന് സ്ക്രീൻ വായനക്കാരും സെർച്ച് എഞ്ചിനുകളും ഒന്നിലധികം പ്രധാനപ്പെട്ട ഭാഗങ്ങളും (ഉള്ളടക്കം) ആദ്യവും കുറച്ച് പ്രധാന ഭാഗങ്ങളും (നാവിഗേഷൻ) അവസാനിപ്പിക്കും.

ടേബിളുകൾ Tricky ആകുന്നു

നിങ്ങൾ ഒരു വെബ് എഡിറ്റർ ഉപയോഗിച്ച് ഒരു ടേബിൾ സൃഷ്ടിക്കുന്നെങ്കിൽ, നിങ്ങളുടെ വെബ് പേജുകൾ ഇപ്പോഴും വളരെ സങ്കീർണ്ണവും നിലനിർത്താൻ പ്രയാസമായിരിക്കും. ഏറ്റവും ലളിതമായ വെബ് പേജ് ഡിസൈനുകൾ ഒഴികെ, മിക്ക ലേഔട്ട പട്ടികകളും ഒരുപാട് ഉപയോഗവും ആട്രിബ്യൂട്ടുകളും നെസ്റ്റഡ് ടേബിളുകളും ഉപയോഗിക്കേണ്ടതുണ്ട്.

നിങ്ങൾ അത് ചെയ്യുമ്പോൾ പട്ടികയെ കെട്ടിയിട്ട് എളുപ്പത്തിൽ തോന്നിയേക്കാം, എന്നാൽ നിങ്ങൾ അത് നിലനിർത്തണം. ആറുമാസത്തിനു താഴെയായി, നിങ്ങൾ പട്ടികകൾ എന്തിനാണ് അല്ലെങ്കിൽ ഒരു വരിയിൽ എത്ര സെൽസ് ഉണ്ടായിരുന്നുവോ അതോ പലപ്പോഴും ഓർമ്മിക്കാൻ എളുപ്പമായിരിക്കില്ല. കൂടാതെ, വെബ് പേജുകൾ ഒരു ടീം അംഗമായി സൂക്ഷിക്കുകയാണെങ്കിൽ, ടേബിളുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഓരോ വ്യക്തിയെയും വിശദമാക്കേണ്ടതുണ്ട് അല്ലെങ്കിൽ മാറ്റങ്ങൾ വരുത്തേണ്ട സമയത്തെ കൂടുതൽ സമയം എടുക്കാൻ അവർ പ്രതീക്ഷിക്കുന്നു.

CSS- ഉം സങ്കീർണമാക്കാം, പക്ഷേ അവതരണം HTML ൽ നിന്ന് വേർതിരിച്ച് സൂക്ഷിക്കുന്നു, ഇത് ദീർഘകാലത്തേയ്ക്ക് നിലനിർത്താൻ കൂടുതൽ എളുപ്പമുള്ളതാക്കുന്നു. കൂടാതെ, CSS ലേഔട്ടിനൊപ്പം നിങ്ങൾക്ക് ഒരു CSS ഫയൽ എഴുതാനും നിങ്ങളുടെ എല്ലാ പേജുകളും ആ രീതിയിൽ കാണാൻ കഴിയും. നിങ്ങളുടെ സൈറ്റിന്റെ ലേഔട്ട് മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോഴെല്ലാം, നിങ്ങൾ ഒരു CSS ഫയൽ മാറ്റുകയും, സൈറ്റിനെ ചങ്ങലയ്ക്കുകയും ചെയ്യുന്നു- ഓരോ ലേഔട്ടിലും ഓരോ പേജിലുമുടനീളം പോകുന്നത് പട്ടികയെ അപ്ഡേറ്റ് ചെയ്യുന്നതിനായി പട്ടികകൾ പുതുക്കുന്നതിന്.

ടേബിളുകൾ രൂക്ഷമായവയാണ്

ശതമാനം വീതിയോടുകൂടിയ പട്ടിക ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ സാധിക്കും, അവ പലപ്പോഴും ഭാരം കുറഞ്ഞവയാണ്, നിങ്ങളുടെ ലേഔട്ട് എങ്ങനെ കാണപ്പെടുന്നു എന്നത് നാടകീയമായി മാറ്റാൻ കഴിയും. എന്നാൽ നിങ്ങളുടെ പട്ടികകൾക്കായി നിർദിഷ്ട വീതികൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടേതിൽ നിന്ന് വ്യത്യസ്തമായ അളവിലുള്ള മോണിറ്ററുകളിൽ നന്നായി കാണാത്ത വളരെ ദൃഢമായ ലേഔട്ടിനൊപ്പം നിങ്ങൾ അവസാനിക്കും.

അനേകം മോണിറ്ററുകളിലും ബ്രൗസറുകളിലും റെസല്യൂഷനുകളിലും നന്നായി കാണുന്ന ഫ്ലെക്സിബിൾ ലേയൗട്ട് അനുകരിക്കുക എളുപ്പമാണ്. സത്യത്തിൽ, സിഎസ്എസ് മീഡിയ ചോദ്യങ്ങൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് വ്യത്യസ്ത വലിപ്പത്തിലുള്ള സ്ക്രീനുകൾക്കായി പ്രത്യേക ഡിസൈനുകൾ സൃഷ്ടിക്കാൻ കഴിയും.

നെസ്റ്റഡ് ടേബിള് അതേ രൂപകല്പിനുള്ള CSS വളരെ മന്ദഗതിയിലാക്കുക

പട്ടികകളുള്ള ഫാൻസി ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള സാധാരണ രീതി "നെസ്റ്റ്" പട്ടികകളാണ്. ഇതിനർത്ഥം ഒന്നോ അതിലധികമോ ടേബിൾ മറ്റൊന്നായി വയ്ക്കണം എന്നാണ്. കൂട്ടിയിണച്ചിരിക്കുന്ന കൂടുതൽ പട്ടികകൾ, അത് വെബ് പേജിൽ റെൻഡർ ചെയ്യാൻ എടുക്കും.

മിക്കപ്പോഴും, ഒരു പട്ടികയുടെ ശൈലി നിർമ്മിക്കുന്നതിനായി കൂടുതൽ പ്രതീകങ്ങൾ സൃഷ്ടിക്കുന്നു. കുറവ് പ്രതീകങ്ങൾ ഡൗൺലോഡ് ചെയ്യാൻ കുറവാണ്.

ടേബിളുകൾ തിരയൽ എഞ്ചിൻ ഒപ്റ്റിമൈസേഷൻ ഉപദ്രവിക്കാൻ കഴിയുന്നു

ലേഔട്ട് സൃഷ്ടിക്കുന്ന ഏറ്റവും സാധാരണമായ പട്ടികയിൽ ഇടതുവശത്തുള്ള ഒരു നാവിഗേഷൻ ബാറും വലതുഭാഗത്തെ പ്രധാന ഉള്ളടക്കവും ഉണ്ട്. പട്ടികകൾ ഉപയോഗിക്കുമ്പോൾ, HTML- ൽ പ്രദർശിപ്പിക്കുന്ന ആദ്യത്തെ ഉള്ളടക്കം ഇടത്-കൈ നാവിഗേഷൻ ബാറാണ് (സാധാരണയായി) ആവശ്യമാണ്. തിരയൽ എഞ്ചിനുകൾ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി പേജുകളെ തരംതിരിക്കുന്നു, ഒപ്പം മറ്റ് എഞ്ചിനുകൾ മറ്റ് ഉള്ളടക്കത്തേക്കാൾ വളരെ പ്രധാനപ്പെട്ടതാണ് പേജിന്റെ മുകൾഭാഗത്ത് പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഉള്ളടക്കം കൂടുതൽ പ്രാധാന്യം നൽകുന്നത്. അതുകൊണ്ട്, ഇടതുഭാഗത്ത് നാവിഗേഷൻ ഉള്ള ഒരു പേജ് ആദ്യം, നാവിഗേഷനെക്കാൾ പ്രാധാന്യമുള്ള ഉള്ളടക്കം ഉള്ളതായി തോന്നുന്നു.

CSS ഉപയോഗിച്ച്, നിങ്ങളുടെ പ്രാധാന ഉള്ളടക്കത്തെ ആദ്യം നിങ്ങളുടെ HTML ൽ ഇട്ടശേഷം ഡിസൈനിനു പകരം എവിടെ സ്ഥാപിക്കണം എന്ന് തീരുമാനിക്കാൻ CSS ഉപയോഗിക്കുക. അതായത്, ഡിസൈൻ പേജിൽ താഴെയാണെങ്കിലും സെർച്ച് എഞ്ചിനുകൾ പ്രധാന ഉള്ളടക്കത്തെ ആദ്യം കാണും.

പട്ടികകൾ എല്ലായ്പ്പോഴും നന്നായി അച്ചടിക്കുക

പല ടേബിൾ ഡിസൈനുകളും നന്നായി പ്രിന്റ് ചെയ്യാത്തതിനാൽ അവ നന്നായി പ്രിന്റ് ചെയ്യാറില്ല. അതിനാൽ, അവ അനുരൂപമാക്കുന്നതിന്, ബ്രൗസറുകൾ പട്ടികയിൽ നിന്ന് വെട്ടിമാറ്റി, അവയിൽ നിന്ന് നീക്കം ചെയ്ത താളുകൾ കുറയ്ക്കും. ചിലപ്പോൾ നിങ്ങൾ ശരിയായി തോന്നുന്ന പേജുകൾക്കൊപ്പം അവസാനിക്കും, എന്നാൽ വലത് വശത്ത് വലതുഭാഗം കാണുന്നില്ല. മറ്റ് പേജുകൾ വിവിധ ഷീറ്റുകളിൽ വിഭാഗങ്ങൾ പ്രിന്റ് ചെയ്യും.

പേജ് പ്രിന്റുചെയ്യുന്നതിന്, CSS ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു പ്രത്യേക ശൈലി ഷീറ്റ് സൃഷ്ടിക്കാൻ കഴിയും.

ലേഔട്ടിനായി പട്ടികകൾ HTML 4.01 ൽ അസാധുവാണ്

HTML 4 സ്പെസിഫിക്കേഷൻ പ്രസ്താവിക്കുന്നത്: "നോട്ടിഫൈൽ ഡിസൈൻ ഉള്ളടക്കത്തിനുള്ള ടേബിളുകൾ മാത്രമായി ഉപയോഗിക്കരുത്, കാരണം ഇത് ദൃശ്യമണ്ഡല മാധ്യമങ്ങൾക്ക് റെൻഡർ ചെയ്യുമ്പോൾ പ്രശ്നങ്ങൾ ഉണ്ടാകാം."

അതിനാൽ, നിങ്ങൾ സാധുവായ HTML 4.01 എഴുതാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ നിങ്ങൾക്ക് ലേഔട്ടിനായി പട്ടികകൾ ഉപയോഗിക്കാനാവില്ല. പട്ടിക ഡാറ്റയ്ക്കായി മാത്രമേ നിങ്ങൾക്ക് പട്ടികകൾ ഉപയോഗിക്കാവൂ. കൂടാതെ ടാബ് ഡാറ്റ സാധാരണയായി ഒരു സ്പ്രെഡ്ഷീറ്റിൽ അല്ലെങ്കിൽ ഒരു ഡാറ്റാബേസിൽ പ്രദർശിപ്പിക്കാൻ കഴിയുന്നതുപോലെ തോന്നുന്നു.

എന്നാൽ HTML5, ലേഔട്ടിനായി ഉപയോഗിച്ചിരിക്കുന്ന നിയമങ്ങൾ ഇപ്പോൾ പട്ടികകൾ മാറ്റിയിരിക്കുന്നു, ശുപാർശ ചെയ്യാത്തപ്പോൾ, ഇപ്പോൾ സാധുവായ HTML ആണ്. HTML5 സവിശേഷത വ്യക്തമാക്കുന്നത്: "പട്ടികകൾ ലേഔട്ട് എയിഡ്സ് ആയി ഉപയോഗിക്കരുത്."

കാരണം മുകളിലുള്ള സൂചിപ്പിക്കുന്നത് പോലെ, സ്ക്രീൻ റീഡർമാർക്ക് ലേഔട്ട് വ്യത്യാസപ്പെടുത്താൻ ബുദ്ധിമുട്ടുള്ള പട്ടികകൾ ബുദ്ധിമുട്ടാണ്.

സ്ഥാനവും ലേഔട്ടിനുമായുള്ള CSS ഉപയോഗിച്ചു് നിങ്ങളുടെ ടേബിളുകൾ ഉപയോഗിയ്ക്കുവാൻ സാധ്യമായ പട്ടികകൾ ഉപയോഗിയ്ക്കുന്ന ഡിസൈനുകൾ ലഭിയ്ക്കുന്നതിനു് മാത്രം സാധുവായ HTML 4.01 വഴി മാത്രമാകുന്നു. കൂടാതെ HTML5 ഈ രീതിയും ശക്തമായി ശുപാർശ ചെയ്യുന്നു.

ലേഔട്ടിനായി ടേബിളുകൾക്ക് നിങ്ങളുടെ തൊഴിൽ സാധ്യതകൾ സ്വാധീനിക്കാൻ കഴിയും

കൂടുതൽ പുതിയ ഡിസൈനർമാർക്ക് HTML, CSS എന്നിവ പഠിക്കാൻ കഴിയുന്നതോടെ, ടേബിൾ ലേഔട്ടുകളുടെ നിർമ്മാണത്തിൽ നിങ്ങളുടെ വൈദഗ്ധ്യം കുറവായിരിക്കും. അതെ, വെബ് പേജുകൾ നിർമ്മിക്കാൻ നിങ്ങൾ ഉപയോഗിക്കേണ്ട കൃത്യമായ സാങ്കേതികവിദ്യ ഉപഭോക്താക്കൾക്ക് സാധാരണയായി നൽകാറില്ല എന്നത് ശരിയാണ്. എന്നാൽ അവർ നിങ്ങളോട് ആവശ്യപ്പെടുന്നതു പോലെയാണ്:

• ആക്സസ് ചെയ്യാവുന്ന വെബ് പേജുകൾ: സ്ക്രീൻ വായനക്കാർക്ക് കാണാൻ കഴിയുന്ന രൂപകൽപ്പനകൾ പല രാജ്യങ്ങളിലും നിർബന്ധമായും നടപ്പാക്കപ്പെടുന്നു, എല്ലാ ദിവസവും കോർപ്പറേഷനുകൾ പ്രവേശനക്ഷമത കൂടുതൽ പ്രാധാന്യമർഹിക്കുന്നു.
• കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന വെബ് പേജുകൾ: നിങ്ങൾക്ക് അവ ഭാവിയിൽ നിലനിർത്താൻ പോകുന്നില്ലെങ്കിൽപ്പോലും അവരോടൊപ്പം എടുക്കാൻ കഴിയും.
• ഫ്ലെക്സിബിൾ ഡിസൈനുകൾ: നിരവധി ബ്രൌസറുകൾ, മിഴിവുകൾ, ഉപകരണങ്ങൾ എന്നിവയിൽ പ്രവർത്തിക്കുന്ന ഡിസൈനുകൾ.
• വേഗത്തിലുള്ള ഡൌൺലോഡിങ് പേജുകൾ: വേഗത കൂടുതൽ പ്രധാനമാകുന്നത്, പോലും എസ്.ഇ.ഒ.
• അച്ചടിക്കാവുന്ന ഡിസൈനുകൾ: പ്രത്യേക സ്ക്രിപ്റ്റുകൾ അല്ലെങ്കിൽ അധിക പേജുകൾ ഇല്ലാതെ പ്രിന്റ് ചെയ്യുന്ന പേജുകൾ.

ക്ലയന്റുകൾ എന്താണ് ചോദിക്കുന്നതെന്ന് നിങ്ങൾക്ക് പറയാനാവില്ലെങ്കിൽ, അവർ ഇന്ന് രൂപകൽപ്പനകളിൽ, ഒരുപക്ഷേ അടുത്തല്ല, ഒരുപക്ഷേ അടുത്ത വർഷം അല്ലെങ്കിൽ വർഷം കഴിഞ്ഞ് നിങ്ങൾക്ക് വരാതിരിക്കില്ല. 1990 കളുടെ ഒടുവിൽ ഉപയോഗത്തിലുള്ള ഒരു സാങ്കേതികവിദ്യ പഠിക്കാൻ നിങ്ങൾക്ക് താല്പര്യമില്ല കാരണം നിങ്ങളുടെ ബിസിനസ്സ് കഷ്ടപ്പെടുന്നതിന് നിങ്ങൾക്ക് താല്പര്യമുണ്ടോ?

ധാർമികത: CSS ഉപയോഗിക്കുവാൻ പഠിക്കൂ

CSS പഠിക്കാൻ പ്രയാസമുള്ളവയായിരിക്കാം, എന്നാൽ ശ്രദ്ധേയമായ എന്തും പരിശ്രമം വേണം. നിങ്ങളുടെ കഴിവുകൾ സ്നാഗയിൽ നിന്ന് ഒഴിവാക്കിയിരിക്കരുത്. CSS- നെക്കുറിച്ച് മനസിലാക്കുക, നിങ്ങളുടെ വെബ് പേജുകൾ ലേഔട്ടിലുള്ള CSS ഉപയോഗിച്ച് നിർമ്മിക്കപ്പെടേണ്ട ഉദ്ദേശം.