എന്സ്റ്റഡ് ടേബിളുകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കേണ്ടത് എന്തുകൊണ്ട്?

നെസ്റ്റഡ് ടേബിളുകൾ നിങ്ങളുടെ വെബ് പേജുകൾ താഴേക്ക് പതുക്കെ

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

ഒരു സങ്കലന പട്ടിക എന്താണ്?

ഒരു പട്ടികയുപയോഗിച്ച് മറ്റൊരു പട്ടിക ഉള്ള HTML പട്ടികയാണ് കൂട്ടിചേർത്ത പട്ടിക. ഉദാഹരണത്തിന്:




നിര 1
നിര 2
നിര 3

നിര 1




നെസ്റ്റഡ് പട്ടിക നിര 1
കൂട്ടിചേർത്ത പട്ടിക നിര 2



നിര 3

നിര 1
നിര 2
നിര 3

നെസ്റ്റഡ് ടേബിളുകൾ കൂടുതലുപയോഗിച്ച് കൂടുതൽ ഡൌൺലോഡ് ചെയ്യാൻ പേജുകൾ സഹായിക്കുന്നു

ഒരു വെബ്പേജിലെ ഒരു ടേബിൾ പേജ് വളരെ പതുക്കെ ഡൌൺലോഡ് ചെയ്യാൻ ഇടയാക്കില്ല (കാരണം അതിന് കാരണം). എന്നാൽ നിങ്ങൾ ഒരു ടേബിൾ മറ്റൊരു ടേബിളിൽ വച്ച് വെച്ചാൽ, ബ്രൌസറിനായി കൂടുതൽ വേഗത്തിൽ ലഭിക്കുന്നു, അതിനാൽ പേജ് വളരെ സാവധാനത്തിൽ ലോഡ് ചെയ്യുന്നു. നിങ്ങൾ പരസ്പരം അകത്തേക്ക് കൂട്ടിച്ചേർക്കുന്ന കൂടുതൽ പട്ടികകൾ, പേജ് മന്ദഗതിയിലാക്കുന്നു.

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

വിതാനത്തിനുള്ള ടേബിളുകൾ

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

കൂടാതെ, നിങ്ങൾ സാധുവായ XHTML എഴുതാൻ ശ്രമിക്കുകയാണെങ്കിൽ, പട്ടികകൾ എല്ലാ ലേഔട്ടുകളിലും ഉപയോഗിക്കാൻ പാടില്ല. പട്ടികകൾക്ക് ഡാറ്റാ നിരക്കുള്ളതാണ് (സ്പ്രെഡ്ഷീറ്റുകൾ പോലെയുള്ളവ), ലേഔട്ടിനായി അല്ല. പകരം, നിങ്ങൾ ലേഔട്ട് -CSS രൂപകല്പനകൾ കൂടുതൽ വേഗത്തിൽ റെൻഡർ ചെയ്യാനും സാധുതയുള്ള XHTML നിലനിർത്താൻ സഹായിക്കും.

വേഗത രൂപകൽപ്പന ടേബിളുകൾ

ഒന്നിലധികം വരികളുള്ള ഒരു ടേബിൾ ഡിസൈൻ ചെയ്താൽ, ഓരോ നിരയും ഒരു പ്രത്യേക പട്ടികയായി എഴുതുകയാണെങ്കിൽ അത് കൂടുതൽ വേഗത്തിൽ ലോഡ് ചെയ്യാൻ കഴിയും. ഉദാഹരണത്തിന്, ഇതുപോലുള്ള ഒരു പട്ടിക എഴുതാം:




മുകളിലെ നിര

ഇടത് നിര
വലത് നിര

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



മുകളിലെ നിര




ഇടത് നിര
വലത് നിര

ഏകീകൃത പട്ടികകൾ ഒരു പട്ടികയിലേക്ക് മാറ്റുന്നു

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





നിര 1
colspan = "2" > നിര 2
നിര 3

നിര 1
നെസ്റ്റഡ് പട്ടിക നിര 1
കൂട്ടിചേർത്ത പട്ടിക നിര 2
നിര 3

നിര 1
colspan = "2" > നിര 2
നിര 3

ഈ പട്ടികക്ക് നെസ്റ്റഡ് ടേബിളിനേക്കാൾ കുറച്ച് അക്ഷരങ്ങൾ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനം ലഭിക്കുന്നു, അതിനാൽ ഇത് വേഗത്തിൽ ഡൌൺലോഡ് ചെയ്യും.