નેસ્ટેડ કોષ્ટકોનો ઉપયોગ કેમ કરવો જોઈએ

નેસ્ટેડ કોષ્ટકો ડાઉન તમારી વેબ પાના ધીમો

વેબ પૃષ્ઠોને ઝડપી ડાઉનલોડ કરવાની જરૂર છે, પરંતુ નેસ્ટ કરેલ કોષ્ટકો પ્રક્રિયાને ધીમું કરી શકે છે કોઈને તમને જણાવતા નથી કે વધુ લોકો બ્રોડબેન્ડ અથવા હાઇ-સ્પીડ ઈન્ટરનેટનો ઉપયોગ કરે છે, તેથી તમને ચિંતા કરવાની જરૂર નથી કે તમારા પૃષ્ઠોને કેટલી ઝડપી લોડ થાય છે. વેબ પરની સામગ્રીની સંખ્યા સાથે, એક પૃષ્ઠ અથવા સાઇટ કે જે ધીમે ધીમે લોડ થાય છે તે ઓછા મુલાકાતીઓ કરતાં ઝડપથી લોડ થાય છે જે ઝડપથી લોડ થાય છે સ્પીડ ખૂબ મહત્વપૂર્ણ છે.

નેસ્ટેડ ટેબલ શું છે?

નેસ્ટેડ કોષ્ટક એ HTML કોષ્ટક છે જે તેની અંદર બીજા કોષ્ટક ધરાવે છે. દાખ્લા તરીકે:

<ટેબલ>

કૉલમ 1
કૉલમ 2
કૉલમ 3


કૉલમ 1

<ટેબલ>

પુનરાવર્તિત કોષ્ટક કૉલમ 1
પુનરાવર્તિત કોષ્ટક કૉલમ 2



કૉલમ 3


કૉલમ 1
કૉલમ 2
કૉલમ 3

નેસ્ટેડ કોષ્ટકો વધુ ધીમેથી ડાઉનલોડ કરવા માટે પૃષ્ઠોનું કારણ બનાવો

વેબ પેજ પરનું એક કોષ્ટક પૃષ્ઠને વધુ ધીમેથી (કારણસર) ડાઉનલોડ કરવા માટે કારણભૂત નથી. પરંતુ તે ક્ષણ જ્યારે તમે એક ટેબલને બીજા કોષ્ટકમાં મૂકો છો, ત્યારે બ્રાઉઝરને રેન્ડર કરવા માટે તે વધુ જટિલ બની જાય છે, તેથી પૃષ્ઠ વધુ ધીરે છે અને વધુ કોષ્ટકો જે તમે એકબીજાની અંદર નેસ્ટ કર્યા છે, ધીમા પૃષ્ઠ લોડ કરશે.

જ્યારે તમે કોષ્ટકો સાથે પૃષ્ઠ બનાવો છો, તો ધ્યાનમાં રાખો કે કોષ્ટકોની અંદરના વધુ કોષ્ટકો, પૃષ્ઠને ધીમું થતું હશે. સામાન્ય રીતે, જ્યારે કોઈ પૃષ્ઠ લોડ થાય છે, ત્યારે બ્રાઉઝર એચટીએમએલની ટોચ પર શરૂ થાય છે અને પૃષ્ઠને ક્રમશઃ નીચે લોડ કરે છે. જો કે, નેસ્ટેડ કોષ્ટકો સાથે, તેને સમગ્ર વસ્તુ પ્રદર્શિત કરવા પહેલાં કોષ્ટકનો અંત શોધવાનો હોય છે.

લેઆઉટ માટે કોષ્ટકો

તમારે તમારા વેબ પૃષ્ઠોમાં લેઆઉટ માટે કોષ્ટકોનો ઉપયોગ ન કરવો જોઈએ. તેઓ હંમેશા નેસ્ટ કરેલ કોષ્ટકોનો ઉપયોગ કરવાની જરૂર હોય છે, તેથી ટેબલ-લેઆઉટ વેબ પૃષ્ઠ CSS માં પ્રસ્તુત કરાયેલા સમાન ડિઝાઇન કરતાં વધુ ધીમેથી લોડ કરશે.

ઉપરાંત, જો તમે માન્ય એક્સએચટીએમએલ લખવાનો પ્રયત્ન કરી રહ્યા હોવ તો, કોષ્ટકોને લેઆઉટ માટે ઉપયોગમાં ન લેવા જોઈએ. કોષ્ટકો કોઠા માહિતી (જેમ કે સ્પ્રેડશીટ્સ) માટે છે, લેઆઉટ માટે નહીં તેના બદલે, તમારે લેઆઉટ માટે CSS નો ઉપયોગ કરવો જોઈએ - સીએસએસ ડિઝાઇન વધુ ઝડપથી રેન્ડર કરે છે અને માન્ય એક્સએચટીએમએલ જાળવી રાખવામાં તમારી મદદ કરે છે.

ઝડપી લોડિંગ કોષ્ટકો ડિઝાઇનિંગ

જો તમે બહુવિધ પંક્તિઓ સાથે કોષ્ટકને ડિઝાઇન કરો છો, તો તે વારંવાર વધુ ઝડપથી લોડ કરી શકે છે જો તમે દરેક પંક્તિને એક અલગ ટેબલ તરીકે લખી શકો છો ઉદાહરણ તરીકે, તમે આના જેવું કોષ્ટક લખી શકો છો:

<ટેબલ શૈલી = "પહોળાઈ: 100%;">

ટોચની પંક્તિ


ડાબી કૉલમ
જમણા કૉલમ

પરંતુ જો તમે બે ટેબલો જેવા જ કોષ્ટક લખી રહ્યા હોવ તો, તે વધુ ઝડપથી લોડ થવાનું દેખાશે, કારણ કે બ્રાઉઝર પ્રથમ વાર રેન્ડર કરશે અને ત્યારબાદ બીજા કોષ્ટકને રેન્ડર કરવાને બદલે બીજાને રેન્ડર કરશે. યુક્તિ એ છે કે દરેક કોષ્ટકની સમાન પહોળાઈ અને અન્ય શૈલીઓ (જેમ કે પેડિંગ, માર્જિન અને બોર્ડર્સ) છે તેની ખાતરી કરવા.

<ટેબલ શૈલી = "પહોળાઈ: 100%;">

ટોચની પંક્તિ


<ટેબલ શૈલી = "પહોળાઈ: 100%;">

ડાબી કૉલમ
જમણા કૉલમ

એક કોષ્ટકમાં નેસ્ટેડ કોષ્ટકોને રૂપાંતરિત કરવું

તમને લાગે છે કે આ બધી સારી માહિતી છે, પરંતુ તમારી પાસે તે કોષ્ટક છે જેમાં તેમાં અન્ય ટેબલ હોવો જોઈએ . જ્યારે આ વાત સાચી હોઈ શકે છે, ઘણીવાર તમે નેસ્ટ કરેલ કોષ્ટકોને તમારા કોષ્ટક કોષો પર અને વિશેષતાઓનો ઉપયોગ કરીને સહેજ વધુ જટિલ સિંગલ કોષ્ટકોમાં રૂપાંતરિત કરી શકો છો. ઉદાહરણ તરીકે, નેસ્ટ ટેબલમાં ટોચ પર, હું તેને એક કોષ્ટકમાં ફક્ત કોલપૅન એટ્રીબ્યુટમાં રૂપાંતરિત કરી શકું છું:

<ટેબલ>

કૉલમ 1
colspan = "2" > કૉલમ 2
કૉલમ 3


કૉલમ 1
પુનરાવર્તિત કોષ્ટક કૉલમ 1
પુનરાવર્તિત કોષ્ટક કૉલમ 2
કૉલમ 3


કૉલમ 1
colspan = "2" > કૉલમ 2
કૉલમ 3

આ કોષ્ટકને નેસ્ટેડ કોષ્ટક કરતા ઓછા પાત્રોના ઉપયોગનો લાભ પણ મળે છે, તેથી તે તે કારણે ઝડપથી પણ ડાઉનલોડ કરશે.