HTML ટેબલ એલિમેન્ટ એટ્રીબ્યૂટ્સનો ઉપયોગ કરવો

ટેબલ એટ્રિબ્યુટ્સ શીખવા દ્વારા એચટીએમએલ કોષ્ટકોમાંથી સૌથી વધુ મેળવવું

HTML કોષ્ટક વિશેષતાઓ તમને HTML કોષ્ટકો પર વધુ નિયંત્રણ આપે છે કોષ્ટકોમાં વધુ વિશિષ્ટતાઓ ઉપલબ્ધ કરવા માટે તેમને વધુ રસપ્રદ બનાવવા અને તમારા પૃષ્ઠનું દેખાવ બદલવા માટે છે.

HTML ટેબલ એલિમેન્ટ એટ્રીબ્યૂટ્સ

HTML5 માં તત્વ વૈશ્વિક વિશેષતાઓ અને એક અન્ય લક્ષણનો ઉપયોગ કરે છે: અને તે માત્ર 1 અથવા ખાલી મૂલ્ય (એટલે ​​કે સરહદ = "") માં બદલાઈ ગયો છે. જો તમે સરહદની પહોળાઈ બદલવા માંગો છો, તો તમારે સરહદી-પહોળાઈ CSS પ્રોપર્ટીનો ઉપયોગ કરવો જોઈએ.

માન્ય HTML5 ટેબલ વિશેષતાઓ વિશે જાણવા માટે નીચે જુઓ.

એચટીએમએલ 4.01 સ્પેસિફિકેશનનો ભાગ છે, જે HTML5 માં અપ્રચલિત બની ગયા છે.

અને એક લક્ષણ જે HTML 4.01 માં દૂર કરવામાં આવ્યું હતું અને HTML5 માં પણ અપ્રચલિત છે.

HTML 4.01 કોષ્ટક વિશેષતાઓ વિશે વધુ જાણો.

ત્યાં પણ કેટલાક લક્ષણો છે જે કોઈપણ HTML સ્પષ્ટીકરણનો ભાગ નથી.

આ વિશેષતાઓનો ઉપયોગ કરો જો તમે જાણો છો કે તમે બ્રાઉઝ કરો છો તે બ્રાઉઝર્સ તેમને હેન્ડલ કરી શકે છે અને તમને માન્ય HTML વિશે ચિંતા નથી.

બ્રાઉઝર વિશિષ્ટ કોષ્ટક વિશેષતાઓ વિશે વધુ જાણો

HTML5 ટેબલ એલિમેન્ટ એટ્રીબ્યૂટ્સ

જેમ આપણે ઉપર સૂચવ્યા મુજબ, ત્યાં એક જ લક્ષણ છે, વૈશ્વિક વિશેષતાઓ ઉપરાંત, તે HTML5 ટેબલ ઘટક પર માન્ય છે: સરહદ.

સરહદ એટ્રીબ્યુટનો ઉપયોગ સમગ્ર કોષ્ટકની આસપાસની સરહદ અને તેની અંદરની તમામ કોષોને વ્યાખ્યાયિત કરવા માટે થાય છે. તે HTML5 સ્પષ્ટીકરણમાં શામેલ થશે કે કેમ તે અંગે કેટલાક પ્રશ્ન હતો, પરંતુ તે બાકી રહ્યો છે કારણ કે તે ટેબલ માળખા વિશેની માહિતી, ફક્ત શૈલીની અસરોથી બહાર છે.

સરહદ એટ્રીબ્યુટ ઉમેરવા માટે, જો તમે ત્યાં ન હોય તો સરહદ અને ખાલી (અથવા લક્ષણ છોડી દો) જો મૂલ્ય 1 ને સેટ કરો સરહદની પહોળાઈને પિક્સેલ્સમાં જાહેર કરવા માટે મોટા ભાગના બ્રાઉઝર્સ 0 ની કોઈ સરહદ માટે, અને કોઈપણ અન્ય પૂર્ણાંક મૂલ્ય (2, 3, 30, 500, વગેરે) નું સમર્થન કરશે, પરંતુ આ HTML5 માં અપ્રચલિત છે. તેના બદલે, તમારે સરહદની પહોળાઈ અને અન્ય શૈલીઓ વ્યાખ્યાયિત કરવા માટે CSS સરહદી શૈલી ગુણધર્મોનો ઉપયોગ કરવો જોઈએ.

સરહદ સાથે કોષ્ટક બનાવવા માટે, લખો:

<ટેબલ સીમા = "1" >

આ સરહદ સાથે એક કોષ્ટક છે

એચટીએમએલ 4.01 એટ્રીબ્યૂટ્સ છે જે HTML5 માં અપ્રચલિત છે. જો તમે એચટીએમએલ 4.01 દસ્તાવેજ લખવાનું પ્લાન કરો છો, તો તમે તેમને શીખી શકો છો, અન્યથા, તમે તેમને અવગણી શકો છો. આમાંના મોટા ભાગના લક્ષણોમાં ઉપર વર્ણવેલ વિકલ્પો છે.

અમે એલિમેન્ટનાં લક્ષણોનું વર્ણન કરીએ છીએ જે HTML5 (અને HTML 4.01) માં માન્ય છે. આ ટેબલ વિશેષતાઓ વર્ણવે છે કે જે HTML 4.01 માં માન્ય છે, પરંતુ HTML5 માં અપ્રચલિત છે. જો તમે હજી પણ એચટીએમએલ 4.01 દસ્તાવેજો લખો છો, તો તમે આ લક્ષણોનો ઉપયોગ કરી શકો છો, પરંતુ તેમાંના મોટાભાગના એવા વિકલ્પો છે કે જે તમે તમારા પૃષ્ઠોને HTML5 તરફ આગળ વધવા માટે વધુ ભાવિ-સાબિતી આપશે.

માન્ય HTML 4.01 લક્ષણો

અમે ઉપર વર્ણવેલ લક્ષણ.

એચટીએમએલ 5 દ્વારા એચટીએમએલ 4.01 માં માત્ર એટલો જ તફાવત એ છે કે તમે પિક્સેલ્સની સરહદની પહોળાઇને વ્યાખ્યાયિત કરવા માટે કોઈપણ પૂર્ણ પૂર્ણાંક (0, 1, 2, 15, 20, 200, વગેરે) સ્પષ્ટ કરી શકો છો.

5px સીમા સાથે કોષ્ટક બનાવવા માટે, લખો:

<ટેબલ સીમા = "5" >

આ કોષ્ટકમાં 5px સીમા છે.

સરહદો સાથે બે કોષ્ટકોનું ઉદાહરણ જુઓ.

લક્ષણ એ સેલની કિનારીઓ અને કોષની સામગ્રીઓ વચ્ચેના અવકાશને વ્યાખ્યાયિત કરે છે. ડિફૉલ્ટ બે પિક્સેલ છે સેલપૅડિંગથી 0 પર સેટ કરો જો તમને સમાવિષ્ટો અને સરહદો વચ્ચે કોઈ જગ્યા નથી.

સેલ પેડિંગને 20 પર સેટ કરવા, લખો:

<ટેબલ સેલપેડિંગ = "20" >

આ કોષ્ટકમાં 20 નું સેલપેડિંગ છે.


સેલ બોર્ડર્સ 20 પિક્સેલ્સ દ્વારા અલગ કરવામાં આવશે.

કોષ્ટકનું ઉદાહરણ સેલપાડિંગ સાથે જુઓ

આ લક્ષણ કોષ્ટક કોશિકાઓ અને કોષની સામગ્રી વચ્ચેની જગ્યાનું પ્રમાણ નિર્ધારિત કરે છે. સેલપેડિંગની જેમ, ડિફોલ્ટ બે પિક્સેલ્સ પર સેટ કરેલું છે, તેથી જો તમારે કોઈ સેલ અંતર ન હોય તો તમારે તેને 0 પર સેટ કરવું પડશે.

કોષ અંતરને કોષ્ટકમાં ઉમેરવા, લખો:

<ટેબલ સેલ્સિંગ = "20" >

આ કોષ્ટકમાં 20 નું સેલ્સિંગ છે.


કોશિકાઓ 20 પિક્સેલ્સ દ્વારા અલગ કરવામાં આવશે.

કોશિકાના આસન સાથે કોષ્ટક જુઓ

આ લક્ષણ સૂચવે છે કે કોષ્ટકની બહારની સરહદના ભાગો દેખાશે. તમે તમારા કોષ્ટકને તમામ ચાર બાજુઓ પર, કોઈપણ એક બાજુ, ઉપર અને નીચે, ડાબે અને જમણે, અથવા કોઈ પણ પર ફ્રેમ બનાવી શકો છો.

અહીં માત્ર ડાબી બાજુના સરહદ સાથે કોષ્ટક માટેનું HTML છે:

<ટેબલ સીમા = "1" ફ્રેમ = "એલએચએસ" >

આ કોષ્ટક
<ટીડી> હશે


ફક્ત
ડાબા બાજુની રચના.

નીચે ફ્રેમ સાથેનું બીજું ઉદાહરણ:

<ટેબલ સરહદ = "1" ફ્રેમ = "નીચે" >

આ કોષ્ટકની નીચે એક ફ્રેમ છે.

ફ્રેમ્સ સાથે કેટલાક કોષ્ટકો તપાસો

આ લક્ષણ ફ્રેમ એટ્રીબ્યુટ સમાન છે, માત્ર તે કોષ્ટકની કોશિકાઓની આસપાસ સરહદોને અસર કરે છે. તમે ટીબીઓડીવાય અને ટીફોટ અથવા કોઇ નહીં જેવા જૂથો વચ્ચે કૉલમ વચ્ચે, બધા કોશિકાઓ પર નિયમો સેટ કરી શકો છો.

માત્ર પંક્તિઓ વચ્ચે જ રેખાઓ સાથે કોષ્ટક બનાવવાની, લખો:

<ટેબલ સીમા = "1" નિયમો = "પંક્તિઓ" >

આ 4x4 કોષ્ટકમાં છે
પંક્તિઓ કૉલમ્સ નથી


સાથે દર્શાવેલ છે
નિયમો એટ્રિબ્યૂટ.

અને અન્ય સ્તંભ વચ્ચેની રેખાઓ સાથે:

<ટેબલ સીમા = "1" નિયમો = "કોલ્સ" >

છે
એક કોષ્ટક
જ્યાં


કૉલમ્સ
છે
<ટીડી> પ્રકાશિત

અહીં નિયમો સાથે એ ટેબલનું ઉદાહરણ છે

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

સારાંશ સાથે એક સરળ ટેબલ કેવી રીતે લખવું તે અહીં છે:

<ટેબલ સારાંશ = "આ નમૂનાનું ટેબલ છે કે જે ભરણકાર માહિતી ધરાવે છે. આ કોષ્ટકનો હેતુ સારાંશ દર્શાવે છે." >

કૉલમ 1 પંક્તિ 1
કૉલમ 2 પંક્તિ 1


કૉલમ 1 પંક્તિ 2
કૉલમ 2 પંક્તિ 2

સારાંશ સાથે કોષ્ટક જુઓ

આ લક્ષણ કોષ્ટકની પહોળાઇ ક્યાં પિક્સેલમાં અથવા કન્ટેનર તત્વની ટકાવારી તરીકે વ્યાખ્યાયિત કરે છે. જો પહોળાઈ સેટ કરેલી નથી, તો કોષ્ટક માત્ર એટલું જ જગ્યા લેશે કારણ કે તેને મહત્તમ પહોળાઈ સાથે મુખ્ય ઘટકની પહોળાઈ જેટલું જ સમાવિષ્ટ પ્રદર્શિત કરવાની જરૂર છે.

ચોક્કસ પહોળાઈ સાથે કોષ્ટકને પિક્સેલમાં બનાવવા, લખો:

<ટેબલ પહોળાઈ = "300" >

આ કોષ્ટક તે છે તે કન્ટેનરની પહોળાઇની 80% છે.

અને પેન્ટ તત્વની ટકાવારી ધરાવતી પહોળાઈ સાથે ટેબલ બનાવવા, લખો:

<ટેબલ પહોળાઈ = "80%" >

આ કોષ્ટક તે છે તે કન્ટેનરની પહોળાઇની 80% છે.

પહોળાઈ સાથે કોષ્ટકનું ઉદાહરણ જુઓ

અપ્રગટ એચટીએમએલ 4.01 ટેબલ એટ્રીબ્યુટ

ટેબલ ઘટકનું એક લક્ષણ છે જે HTML 4.01 માં અપ્રચલિત છે અને HTML5 માં અપ્રચલિત છે: સંરેખિત કરો . આ વિશેષતાથી તમે સેટ કરી શકો છો કે જ્યાં ટેબલ તેના બાજુના છે તે ટેક્સ્ટને સંબંધિત પૃષ્ઠ પર સ્થિત હોવું જોઈએ. આ લક્ષણને HTML 4.01 માં દૂર કરવામાં આવ્યું છે, અને તમારે તેનો ઉપયોગ કરવાનું ટાળવું જોઈએ. તેને બદલે, તમારે સીએસએસ પ્રોપર્ટીનો ઉપયોગ કરવો જોઈએ અથવા ગાળો ડાબી બાજુ: ઓટો; અને માર્જિન-જમણે: ઓટો; શૈલીઓ ફ્લોટ પ્રોપર્ટી તમને પરિણામ આપે છે જે સંરેખિત વિશેષતા પ્રદાન કરે છે તેની નજીક છે, પરંતુ તે બાકીના પૃષ્ઠની સામગ્રી પ્રદર્શિત થવાની અસર કરે છે. માર્જિન-જમણે: ઓટો; અને માર્જિન-ડાબે: ઑટો; W3C વૈકલ્પિક તરીકે ભલામણ કરે છે

અલાઈન એટ્રીબ્યુટનો ઉપયોગ કરીને એક અમૂલ્ય ઉદાહરણ છે:

<ટેબલ સંરેખિત કરો = "અધિકાર" >

આ કોષ્ટક જમણા સંરેખિત છે


ટેક્સ્ટ તેની આજુબાજુ ડાબી બાજુએ આવે છે

સંરેખિત વિશેષતાનો ઉપયોગ કરીને એક અમૂલ્ય ઉદાહરણ જુઓ.

અને માન્ય (બિન-અપ્રચલિત) HTML સાથે સમાન અસર મેળવવા માટે, લખો:

<ટેબલ શૈલી = "ફ્લોટ: જમણે;" >

આ કોષ્ટક જમણા સંરેખિત છે


ટેક્સ્ટ તેની આજુબાજુ ડાબી બાજુએ આવે છે

નીચેના કોષ્ટક એટ્રિબ્યુટ્સ સમજાવે છે કે જે કોઈપણ HTML સ્પષ્ટીકરણનો ભાગ નથી.

પહેલાની માહિતી એચટીએમએલ ઘટકના લક્ષણો વર્ણવે છે જે HTML 4.01 માં માન્ય છે પરંતુ HTML5 માં અપ્રચલિત છે.

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

અમે તમારા HTML કોષ્ટકો પર આ લક્ષણોનો ઉપયોગ કરવાની ભલામણ કરીએ છીએ નહીં

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

આ લક્ષણનો વધુ સારો વિકલ્પ શૈલીની મિલકત છે

કોષ્ટકનું પૃષ્ઠભૂમિ રંગ બદલવા માટે, લખો:

<ટેબલ શૈલી = "બેકગ્રાઉન્ડ રંગ: # સીસી;" >

આ કોષ્ટકમાં ગ્રે પૃષ્ઠભૂમિ છે

BGcolor એટ્રીબ્યુટની સમાન, સરહદ રંગનું લક્ષણ તમને લક્ષણનો રંગ બદલવાની સુવિધા આપે છે. આ વિશેષતા ફક્ત Internet Explorer દ્વારા સપોર્ટેડ છે. તેના બદલે, તમારે સરહદ-રંગ શૈલીની મિલકતનો ઉપયોગ કરવો જોઈએ

તમારા કોષ્ટકની સરહદનો રંગ બદલવા માટે, લખો:

<ટેબલ સીમા = "1" શૈલી = "સરહદ રંગ: લાલ;" >

આ કોષ્ટકમાં લાલ સરહદ છે.

તમારી કોષ્ટકની આસપાસ 3D સરહદ બનાવવા માટે પરવાનગી આપવા માટે Internet Explorer માં સરહદ રંગલાઇટ અને સરહદના રંગની વિશેષતા શામેલ કરવામાં આવી હતી. જો કે, IE8 અને અપ પ્રમાણે, આ ફક્ત આઇ 7 સ્ટાન્ડર્ડ્સ મોડ અને ક્વિક્સ મોડમાં સપોર્ટેડ છે. માઈક્રોસોફ્ટ જણાવે છે કે આ ગુણધર્મો હવે સપોર્ટેડ નથી.

ટૂંકા સમય માટે, ટેબલ ઘટક પર કોલ્સ એટ્રીબ્યુટ કરવામાં આવ્યું હતું કે બ્રાઉઝર્સને ખબર પડે કે કોષ્ટકમાં કેટલા કૉલમ્સ હતાં. આ ખાતરીને લીધે મોટા કોષ્ટકોના રેન્ડરિંગમાં ઝડપ વધારવામાં મદદ મળશે. જો કે તે માત્ર ઈન્ટરનેટ એક્સપ્લોરર દ્વારા અમલમાં આવતું હતું, અને IE8 અને તે પછી, આ ફક્ત આઇ 7 સ્ટાન્ડર્ડ્સ મોડ અને ક્વિક્સ મોડમાં જ સપોર્ટેડ છે.

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

CSS ઊંચાઈની સુવિધા સાથે તમે ઊંચાઈને મર્યાદિત કરી શકો છો જો તમે CSS ગુણધર્મનો ઉપયોગ કરો છો તો તે વ્યાખ્યાયિત કરવા માટે કે કોઈપણ અધિક સામગ્રી સાથે શું થાય છે.

કોષ્ટક પર લઘુત્તમ ઊંચાઈ સુયોજિત કરવા માટે, લખો:

<કોષ્ટક શૈલી = "ઊંચાઈ: 30મ;" >

આ કોષ્ટક ઓછામાં ઓછા 30 ઇએમમી ઊંચી છે.

કોષ્ટકની ડાબી / જમણી બાજુ (હસ્પેસ) અને ટોચે / તળિયે (વિપ્લેસ) આસપાસની બે વિશેષતાઓ અને ઉમેરાયેલ જગ્યા તમારે તેના બદલે સ્ટાઇલ પ્રોપર્ટીનો ઉપયોગ કરવો જોઈએ.

ઊભી જગ્યા 20 પિક્સેલ્સ અને આડી જગ્યા 40 પિક્સેલ્સ પર સેટ કરવા, લખો:

<ટેબલ શૈલી = "માર્જિન: 20px 40px;"

આ કોષ્ટકમાં 20 પિક્સેલ્સની વિપરીત જગ્યા અને 40 પિક્સેલ્સની એક હસ્પેસ છે.

આ લક્ષણ બુલિયન એટ્રિબ્યુટ છે કે જે વ્યાખ્યાયિત કરે છે કે કોષ્ટકની સામગ્રી પિતૃ તત્વ અથવા વિંડોની ધાર પર લપેટી છે અથવા આડી સ્ક્રોલિંગને દબાણ કરે છે. તેના બદલે, તમારે CSS ગુણધર્મનો ઉપયોગ કરીને દરેક કોષ્ટક કોષની રેપિંગ લાક્ષણિકતાઓને વ્યાખ્યાયિત કરવી જોઈએ.

ઘણાં બધાં લખાણ સાથે સ્તંભ બનાવવા માટે, લખો:

<ટેબલ>

<ટીડી શૈલી = "સફેદ-જગ્યા: હવે આવો;" > આ એક ટન સામગ્રી સાથે એક કૉલમ છે. પરંતુ જો તે કન્ટેનર કરતાં વધુ પહોળી હોય તો ટેક્સ્ટ આગલા રેખામાં લપેટી ન જોઈએ, પરંતુ તેના બદલે બ્રાઉઝર વિંડોને બધી સામગ્રી જોવા માટે આડા સરકાવવા માટે દબાણ કરો.

છેલ્લે, એટ્રિબ્યુટ વ્યાખ્યાયિત કરે છે કે કેવી રીતે દરેક કોષની સામગ્રીઓ કોશિકામાં ઊભી રીતે સંરેખિત થવી જોઈએ. આ અમાન્ય એટ્રિબ્યૂટને બદલે, તમારે દરેક કોષ પર CSS ગુણધર્મનો ઉપયોગ કરવો જોઈએ જે તમે ગોઠવણીને બદલવા માંગો છો. તમે આ શૈલીની અસરોને જાણ કરશો નહીં જ્યાં સુધી કોષના સમાવિષ્ટો અન્ય, મોટા કોષો દ્વારા ઉપલબ્ધ ઉપલબ્ધ જગ્યા કરતાં ઓછી હોય.

કોષને તળિયે સંરેખિત કરવા માટે દબાણ કરો (મધ્યમ કરતાં, ડિફૉલ્ટ તરીકે), લખો:

<ટેબલ>

આ કોષ બાકીની કરતાં વધુ લાંબી છે અને તેથી ઊંચાઈ ઊંચી થવા માટે દબાણ કરશે. તો તમે જોશો કે ઊભી ગોઠવાયેલ કોષ નીચે તળિયે છે.
<ટીડી શૈલી = "વર્ટિકલ-સંરેખિત: નીચે;" > નીચે સામગ્રી.
મધ્યમાં સામગ્રીઓ.