പട്ടിക ആട്രിബ്യൂട്ടുകൾ പഠിച്ചുകൊണ്ട് HTML പട്ടികകളിൽ നിന്ന് പരമാവധി പ്രയോജനപ്പെടുത്തൽ
എച്ച്ടിഎംഎൽ ആട്രിബ്യൂട്ടുകൾ HTML പട്ടികകളിൽ നിങ്ങൾക്ക് കൂടുതൽ നിയന്ത്രണം നൽകും. അവ കൂടുതൽ രസകരമാക്കുന്നതിനും നിങ്ങളുടെ പേജിന്റെ രൂപമാറ്റം മാറ്റുന്നതിനും ധാരാളം ആട്രിബ്യൂട്ടുകൾ പട്ടികകളിലുണ്ട്.
HTML TABLE എലമെൻറ് ആട്രിബ്യൂട്ടുകൾ
HTML5- ൽ, ഗ്ലോബൽ ആട്രിബ്യൂട്ടുകൾക്കും മറ്റൊരു ആട്രിബ്യൂട്ടും ഉപയോഗിക്കുന്നു. കൂടാതെ അതിന്റെ മൂല്യം 1 അല്ലെങ്കിൽ ശൂന്യമാണ് (അതായത് border = ""). ബോർഡിന്റെ വീതി മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ ബോർഡർ-വിഡ്ത്ത് CSS പ്രോപ്പർട്ടി ഉപയോഗിക്കണം.
സാധുവായ HTML5 പട്ടിക ആട്രിബ്യൂട്ടുകൾ അറിയാൻ താഴെ നോക്കുക.
HTML5 ൽ കാലഹരണപ്പെട്ട HTML 4.01 സ്പെസിഫിക്കേഷന്റെ ഭാഗമായ നിരവധി ആട്രിബ്യൂട്ടുകൾ ഉണ്ട്:
- പട്ടികയുടെ TD, TH ഘടകങ്ങൾ എന്നിവയിലെ CSS പാഡിംഗ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുക.
- പട്ടികയിൽ Css പ്രോപ്പർട്ടി ബോർഡർ സ്പെയ്സിംഗ് ഉപയോഗിക്കുക.
- -Use CSS ശൈലികൾ-ബോർഡർ-നിറം: കറുപ്പ്; പട്ടികയിൽ ബോർഡർ-സ്റ്റൈൽ.
- -Use CSS ശൈലികൾ-ബോർഡർ-നിറം: കറുപ്പ്; പട്ടികയുടെ ഉചിതമായ ഘടകങ്ങളിൽ ബോർഡർ-ശൈലി.
- പകരം, പട്ടികയുടെ രൂപത്തിൽ ഒരു ക്യാപ്ച്ചറിൽ നിങ്ങൾ വിവരിക്കേണ്ടതാണ് അല്ലെങ്കിൽ മുഴുവൻ പട്ടികയും ഒരു പിണ്ഡത്തിൽ നൽകുക, കൂടാതെ അതിനെ FIGCAPTION ൽ വിവരിക്കുക. മറ്റൊരുവിധത്തിൽ, നിങ്ങൾക്ക് പട്ടികയുടെ ഘടന ലഘൂകരിക്കാനാകും, അതിലൊരു വിശദീകരണവും ആവശ്യമില്ല.
- -വിൻലൈസ് വെയിറ്റ് ഉപയോഗിക്കുക.
കൂടാതെ HTML 4.01 ൽ ഒഴിവാക്കിയ ഒരു ആട്രിബ്യൂട്ട് HTML5- ലും കാലഹരണപ്പെട്ടതാണ്.
HTML 4.01 TABLE ഗുണവിശേഷങ്ങളെക്കുറിച്ച് കൂടുതലറിയുക.
- align- പകരം CSS മാർജിൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക.
ഏതെങ്കിലും HTML സ്പെസിഫിക്കേഷന്റെ ഭാഗമല്ലാത്ത നിരവധി ആട്രിബ്യൂട്ടുകൾ ഉണ്ട്.
നിങ്ങൾ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്ക് അവ കൈകാര്യം ചെയ്യാനാകുമെന്നും സാധുവായ HTML- നെക്കുറിച്ച് നിങ്ങൾക്ക് താത്പര്യമില്ലെന്നും നിങ്ങൾ അറിഞ്ഞിട്ടുണ്ടെങ്കിൽ ഈ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക.
- പകരം CSS വസ്തു പശ്ചാത്തല വർണ്ണം ഉപയോഗിക്കുക.
- bordercolor- പകരം CSS വസ്തുവിന്റെ ബോർഡർ-നിറം ഉപയോഗിക്കുക.
- bordercolor lightlight- പകരം CSS വസ്തുവിന്റെ ബോർഡർ-നിറം ഉപയോഗിക്കുക.
- bordercolordark- പകരം CSS വസ്തുവിന്റെ ബോർഡർ-നിറം ഉപയോഗിക്കുക.
- cols - ഈ ആട്രിബ്യൂട്ടിന് ഒരു ബദലും ഇല്ല.
- ഉയരം - പകരം CSS വസ്തു ഉയരം ഉപയോഗിക്കുക.
- പകരം CSS വസ്തു മാർജിൻ ഉപയോഗിക്കുക.
- പകരം CSS വസ്തു മാർജിൻ ഉപയോഗിക്കുക.
- പകരം CSS വസ്തു വെളുത്ത-സ്പേസ് ഉപയോഗിക്കുക.
- പകരം CSS വസ്തു ലംബ വിന്യാസം ഉപയോഗിക്കുക.
ബ്രൗസർ നിർദ്ദിഷ്ട ടേബിൾ ആട്രിബ്യൂട്ടുകൾ സംബന്ധിച്ച് കൂടുതലറിയുക.
HTML5 TABLE എലമെൻറ് ആട്രിബ്യൂട്ടുകൾ
മുകളിൽ സൂചിപ്പിച്ചതു പോലെ, ആഗോള ആട്രിബ്യൂട്ടുകൾക്കപ്പുറം ഒരു ആട്രിബ്യൂട്ട്, ഒരു HTML5 TABLE element: border ൽ സാധുവാണ്.
ബോർഡർ ആട്രിബ്യൂട്ട് മുഴുവൻ ടേബിളിനും അതിനടുത്തുള്ള എല്ലാ സെല്ലുകളിലേക്കും ഒരു ബോർഡർ നിർവ്വചിക്കാൻ ഉപയോഗിക്കുന്നു. Html5 സ്പെസിഫിക്കേഷനിൽ ഇത് ഉൾപ്പെടുത്തുമോ എന്ന് ചില ചോദ്യങ്ങളുണ്ടായിരുന്നു. പക്ഷേ, അത് സ്റ്റൈൽ സ്വാധീനം എന്നതിനപ്പുറം പട്ടിക ഘടനയെക്കുറിച്ചുള്ള വിവരങ്ങൾ നൽകിയിരുന്നു.
ബോർഡർ ആട്രിബ്യൂട്ട് ചേർക്കുന്നതിന്, ബോർഡർ ശൂന്യമാണെങ്കിൽ (അല്ലെങ്കിൽ ആട്രിബ്യൂട്ട് ഒഴിവാക്കുകയാണെങ്കിൽ) നിങ്ങൾ മൂല്യം 1 ആയി ക്രമീകരിക്കുക. മിക്ക ബ്രൌസറുകൾക്കും ബോർഡറില്ലാത്ത 0, അതിനടുത്ത പൂർണ്ണ മൂല്യങ്ങൾ (2, 3, 30, 500, മുതലായവ) പിക്സലുകളുടെ വീതി പിക്സലായി പിന്തുണയ്ക്കാം, പക്ഷേ ഇത് HTML5 ൽ കാലഹരണപ്പെട്ടതായിരിക്കും. പകരം, ബോർഡർ വീതിയും മറ്റ് ശൈലികളും നിർവ്വചിക്കുന്നതിന് നിങ്ങൾ CSS ബോർഡർ ശൈലി ഉപയോഗിക്കേണ്ടതാണ്.
ഒരു ബോർഡറുമായി ഒരു പട്ടിക സൃഷ്ടിക്കാൻ എഴുതുക:
border = "1" >
ഇതൊരു ബോർഡർ ഉള്ള ഒരു പട്ടികയാണ്
HTML5 ൽ കാലഹരണപ്പെട്ട HTML 4.01 ആട്രിബ്യൂട്ടുകൾ ഉണ്ട്. നിങ്ങൾ HTML 4.01 പ്രമാണങ്ങൾ എഴുതുകയാണെങ്കിൽ, നിങ്ങൾക്കത് മനസ്സിലാക്കാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് അവ അവഗണിക്കാം. ഈ ആട്രിബ്യൂട്ടുകൾക്ക് പലതും മുകളിൽ വിശദീകരിച്ചിട്ടുള്ള ഇതര മാർഗങ്ങളുള്ളവയാണ്.
HTML5 ൽ (സാധുവായ HTML 4.01) സാധുതയുള്ള ഘടകത്തിന്റെ ആട്രിബ്യൂട്ടുകൾ ഞങ്ങൾ വിവരിക്കുന്നു. ഇത് HTML 4.01 ൽ സാധുതയുള്ള TABLE ആട്രിബ്യൂട്ടുകൾ വിവരിക്കുന്നു, പക്ഷേ HTML5 ൽ കാലഹരണപ്പെട്ടവയാണ്. നിങ്ങൾ ഇപ്പോഴും HTML 4.01 പ്രമാണങ്ങൾ എഴുതുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ഈ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കാം, പക്ഷെ അവയിൽ മിക്കതും നിങ്ങൾക്ക് HTML5- ലേക്ക് നീങ്ങുമ്പോൾ നിങ്ങളുടെ പേജുകൾ കൂടുതൽ ഭാവിയിൽ തെളിയിക്കുന്ന മറ്റ് മാർഗ്ഗങ്ങൾ ഉണ്ട്.
സാധുവായ HTML 4.01 ഗുണവിശേഷതകൾ
ഞങ്ങൾ മുകളിൽ വിശദീകരിച്ചിരിക്കുന്ന ആട്രിബ്യൂട്ട്.
HTML5 ൽ നിന്ന് HTML 4.01 ലെ വ്യത്യാസം മാത്രമാണ് ബോർഡറിലെ വീതിയുടെ വീതി നിർവചിക്കാൻ നിങ്ങൾക്ക് മുഴുവൻ പൂർണ്ണസംഖ്യയും (0, 1, 2, 15, 20, 200, മുതലായവ) വ്യക്തമാക്കാൻ കഴിയും.
5px ബോർഡർ ഉള്ള ഒരു പട്ടിക നിർമ്മിക്കാൻ ഇങ്ങനെ എഴുതുക:
border = "5" >
ഈ പട്ടികക്ക് ഒരു 5px ബോർഡർ ഉണ്ട്.
അതിരുകളുള്ള രണ്ട് ടേബിളുകളുടെ ഉദാഹരണം കാണുക.
സെൽ ബോർഡറുകളും സെല്ലിന്റെ ഉള്ളടക്കവും തമ്മിലുള്ള സ്പേസ് അളക്കുന്നത് ആട്രിബ്യൂട്ട് നിർവ്വചിക്കുന്നു. സ്വതവേ രണ്ടു പിക്സലുകൾ ആണ്. ഉള്ളടക്കം കൂടാതെ അതിരുകൾ തമ്മിലുള്ള സ്പേസ് വേണ്ടത്ര ആവശ്യമില്ലെങ്കിൽ സെൽപാഡിങ് 0 ആയി സജ്ജമാക്കുക.
സെൽപാഡിങ് 20 ആയി സജ്ജമാക്കുന്നതിന്, ഇങ്ങനെ എഴുതുക:
cellpadding = "20" >
ഈ പട്ടികയ്ക്ക് 20 സെൽ പാഡിംഗ് ഉണ്ട്.
സെൽ ബോർഡറുകൾ 20 പിക്സൽ ഉപയോഗിച്ച് വേർതിരിക്കും.
സെൽപാഡിംഗ് ഉപയോഗിച്ച് ഒരു പട്ടികയുടെ ഒരു ഉദാഹരണം കാണുക
പട്ടികയിലുള്ള സെല്ലുകളും സെൽ ഉള്ളടക്കവും തമ്മിലുള്ള ഇടത്തിന്റെ അളവ് ആട്രിബ്യൂട്ട് നിർവ്വചിക്കുന്നു. സെൽ പാഡിംഗിനെ പോലെ, സ്വതവേയുള്ളത് രണ്ട് പിക്സലുകളായി സജ്ജമാക്കിയിരിക്കണം, അതിനാൽ നിങ്ങൾക്ക് സെൽ സ്പെയ്സിംഗ് ആവശ്യമില്ലെങ്കിൽ നിങ്ങൾ 0 ആയി സജ്ജമാക്കണം.
സെൽ സ്പേസിംഗ് ഒരു മേശയിലേക്ക് ചേർക്കാൻ എഴുതുക:
cellspacing = "20" >
ഈ പട്ടികയിൽ 20 ന്റെ സെൽ സ്പേസിംഗ് ഉണ്ട്.
സെല്ലുകളെ 20 പിക്സലുകൾ കൊണ്ട് വേർതിരിക്കും.
സെൽ സ്പേസിംഗ് ഉപയോഗിച്ച് ഒരു പട്ടിക കാണുക
ഒരു പട്ടികയുടെ പുറമെയുള്ള അതിർത്തിയിലെ ഏത് ഭാഗങ്ങൾ ദൃശ്യമാകും എന്ന് ആട്രിബ്യൂട്ട് തിരിച്ചറിയുന്നു. നിങ്ങളുടെ പട്ടികയുടെ നാലു വശത്തും നിങ്ങൾക്ക് ഒരു ഫ്രെയിം, മുകളിൽ നിന്ന്, മുകളിൽ, ഇടത്, വലത് അല്ലെങ്കിൽ none.
ഇടത് വശത്തെ ബോർഡിലുള്ള പട്ടികയുടെ HTML ഇവിടെയുണ്ട്:
ഫ്രെയിം = "lhs" >
ഈ പട്ടിക
ഉണ്ടാകും
മാത്രം
ഇടത് വശത്തു ഫ്രെയിം.
താഴെ ഫ്രെയിം ഉള്ള മറ്റൊരു ഉദാഹരണം:
ഫ്രെയിം = "താഴെ" >
ഈ പട്ടികയ്ക്ക് താഴെ ഒരു ഫ്രെയിം ഉണ്ട്
ഫ്രെയിമുകൾ ഉള്ള ചില ടേബിളുകൾ പരിശോധിക്കുക
ആട്രിബ്യൂട്ട് ഫ്രെയിം ആട്രിബ്യൂട്ടിന് സമാനമാണ്, ഇത് പട്ടികയുടെ കളങ്ങൾക്ക് ചുറ്റുമുള്ള ബോർഡറുകളെ മാത്രമേ ബാധിക്കുകയുള്ളൂ. നിങ്ങൾക്ക് TBODY, TFOOT, അല്ലെങ്കിൽ ഒന്നുപോലുള്ള ഗ്രൂപ്പുകളിൽ അല്ലെങ്കിൽ എല്ലാ ഗ്രൂപ്പുകൾക്കും ഇടയിലുള്ള എല്ലാ സെല്ലുകളിലും കോളങ്ങൾ ക്രമീകരിക്കാം.
വരികൾക്കിടയിൽ വരിയിൽ മാത്രം ഒരു പട്ടിക നിർമ്മിക്കാൻ ഇങ്ങനെ എഴുതുക:
rules = "row" >
ഈ 4x4 പട്ടികയിൽ ഉണ്ട്
നിരകൾ നിരകളല്ല
ഉപയോഗിച്ച് സൂചിപ്പിച്ചിരിക്കുന്നു
റൂട്ട് ആട്രിബ്യൂട്ട്.
മറ്റൊന്ന് നിരകൾക്കിടയിലുള്ള ലൈനുകൾ:
rules = "cols" >
ഇത് ആണ്
ഒരു പട്ടിക
എവിടെയാണ്
നിരകൾ
ആകുന്നു
ഹൈലൈറ്റുചെയ്തു
ഒരു പട്ടികയുടെ ഒരു ഉദാഹരണം ഇതാ: നിയമങ്ങൾ
ആട്രിബ്യൂട്ട് പട്ടിക വായനക്കാർക്കും മറ്റ് ഉപയോക്തൃ ഏജന്റുമാർക്കും പട്ടികകൾ വായിക്കുന്നതിനുള്ള ബുദ്ധിമുട്ടുകൾക്ക് പട്ടിക ലഭ്യമാക്കുന്നു. ചുരുക്കം ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ പട്ടികയുടെ ഒരു സംക്ഷിപ്ത വിവരണം എഴുതുകയും ആട്രിബ്യൂട്ടിന്റെ മൂല്യം ആക്കുകയും ചെയ്യുക. ഏറ്റവും സാധാരണ വെബ് ബ്രൌസറുകളിലെ വെബ് പേജിൽ സംഗ്രഹം പ്രദർശിപ്പിക്കില്ല.
സംഗ്രഹത്തോടെ ഒരു ലളിത പട്ടിക എങ്ങനെ എഴുതാം:
summary = "ഇത് ഫില്ലർ വിവരങ്ങൾ ഉൾക്കൊള്ളുന്ന ഒരു സാമ്പിൾ പട്ടികയാണ്, ഈ പട്ടികയുടെ ഉദ്ദേശ്യം ഒരു സംഗ്രഹം തെളിയിക്കുകയാണ്." >
നിര 1 വരി 1
നിര 2 വരി 1
നിര 1 വരി 2
നിര 2 വരി 2
ഒരു സംഗ്രഹം ഉപയോഗിച്ച് ഒരു പട്ടിക കാണുക
ആട്രിബ്യൂട്ട് പട്ടികയുടെ വീതി ഒന്നുകിലോ പിക്സലിലോ അല്ലെങ്കിൽ കണ്ടെയ്നർ ഘടകത്തിന്റെ ശതമാനമായി നിർവ്വചിക്കുന്നു. വീതി ക്രമീകരിച്ചിട്ടില്ലെങ്കിൽ, ഉള്ളടക്കത്തെ പ്രദർശിപ്പിക്കുന്നതിന് ആവശ്യമായത്രയും സ്ഥലം മാത്രമേ എടുക്കുകയുള്ളൂ, പരമാവധി വീതിയും പാരന്റ് ഘടകത്തിന്റെ വീതി പോലെ തന്നെ.
പിക്സലിൽ ഒരു നിശ്ചിത വീതിയുള്ള ഒരു പട്ടിക നിർമ്മിക്കാൻ, എഴുതുക:
width = "300" >
ഇത് സൂചിപ്പിച്ചിരിക്കുന്ന കണ്ടെയ്നർ വീതിയുടെ 80% ആണ് ഇത്.
പാരന്റ് ഘടകത്തിലെ ഒരു ശതമാനം വീതി കൂടി ഒരു പട്ടിക നിർമ്മിക്കാൻ ഇങ്ങനെ എഴുതുക:
width = "80%" >
ഇത് സൂചിപ്പിച്ചിരിക്കുന്ന കണ്ടെയ്നർ വീതിയുടെ 80% ആണ് ഇത്.
വീതിയുള്ള ഒരു പട്ടികയുടെ ഉദാഹരണം കാണുക
ഒഴിവാക്കിയ HTML 4.01 TABLE ആട്രിബ്യൂട്ട്
HTML 4.01 ൽ ഇല്ലാതാക്കി HTML5- ൽ കാലഹരണപ്പെട്ട TABLE ഘടകം ഒരു ആട്രിബ്യൂട്ട് ഉണ്ട്: വിന്യസിക്കുക . ഈ ആട്രിബ്യൂട്ട് അതിനടുത്തുള്ള വാചകവുമായി ബന്ധപ്പെട്ട താളിലുള്ള പട്ടിക എവിടെ സ്ഥാപിക്കണം എന്ന് സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ ആട്രിബ്യൂട്ട് HTML 4.01 ൽ ഒഴിവാക്കിയിരിക്കുന്നു, കൂടാതെ നിങ്ങൾ അത് ഉപയോഗിക്കുന്നത് ഒഴിവാക്കണം. പകരം, നിങ്ങൾ CSS വസ്തു അല്ലെങ്കിൽ മാർജിൻ-ഇടത്: auto; മാർജിൻ വലത്: ഓട്ടോ; ശൈലികൾ. ഫ്ലോട്ട് പ്രോപ്പർട്ടി നിങ്ങൾക്ക് അസൈൻ ആട്രിബ്യൂട്ട് നൽകിയിരിക്കുന്നവയ്ക്ക് വളരെ അടുത്തുള്ള ഒരു ഫലം നൽകുന്നു, എന്നാൽ പേജ് ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്ന രീതിയെ ഇത് ബാധിക്കുന്നു. മാർജിൻ വലത്: ഓട്ടോ; മാർജിൻ-ഇടത്: ഓട്ടോ; W3C ഒരു ബദലായി ശുപാർശ ചെയ്യുന്നു.
അലൈൻ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഒഴിവാക്കിയ ഉദാഹരണം ഇതാ:
align = "right" >
ഈ പട്ടിക ശരിയായി വിന്യസിച്ചിരിക്കുന്ന ആണ്
വാചകം അതിനെ ചുറ്റുമുള്ള ഇടത്തേക്ക് ഒഴുകുന്നു
അലൈൻ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഒഴിവാക്കിയ ഉദാഹരണം കാണുക.
കൂടാതെ സാധുതയുള്ള (നോൺ-ഡിസ്രേക്റ്റഡ്) എച്ച്.റ്റി.എം.എൽ ഉള്ള അതേ പ്രതീതി നേടാൻ, എഴുതുക:
style = "float: right;" >
ഈ പട്ടിക ശരിയായി വിന്യസിച്ചിരിക്കുന്ന ആണ്
വാചകം അതിനെ ചുറ്റുമുള്ള ഇടത്തേക്ക് ഒഴുകുന്നു
ഏതെങ്കിലും എച്ച്.റ്റി.എം.എൽ. സവിശേഷതയുടെ ഭാഗമല്ലാത്ത TABLE ആട്രിബ്യൂട്ടുകൾ താഴെ പറയുന്നു.
HTML 4.01 ൽ സാധുതയുള്ള HTML ഘടകത്തിന്റെ ആട്രിബ്യൂട്ടുകളെ മുൻവിവരങ്ങളെ വിവരിക്കുന്നു, പക്ഷേ HTML5 ൽ കാലഹരണപ്പെട്ടതാണ്.
നിലവിലെ സ്പെസിഫിക്കേഷനിൽ സാധുവല്ലാത്ത TABLE ആട്രിബ്യൂട്ടുകൾ ഇനിപ്പറയുന്നത് വിശദീകരിക്കുന്നു. നിങ്ങളുടെ പേജുകൾ മൂല്യനിർണയം നടത്തിയോ നിങ്ങളുടെ ഉപയോക്താക്കൾ ഈ ഘടകങ്ങളെ പിന്തുണയ്ക്കുന്ന ഒരു ബ്രൗസറാണോ ഉപയോഗിക്കുന്നത് എന്നതിനെക്കുറിച്ച് നിങ്ങൾ ശ്രദ്ധിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾക്ക് ഈ ഘടകങ്ങൾ ഉപയോഗിക്കാം. പക്ഷെ അവരിൽ അധികവും ഒന്നുകിൽ ആധുനിക ബ്രൌസറുകളിൽ പിന്തുണയ്ക്കില്ല അല്ലെങ്കിൽ കൂടുതൽ സ്റ്റാൻഡേർഡുകൾ-കംപ്ലൈന്റ് ആയ ഇതരമാർഗ്ഗങ്ങൾ ഉണ്ട്.
നിങ്ങളുടെ HTML പട്ടികകളിൽ ഈ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നത് ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നില്ല .
ആട്രിബ്യൂട്ട് എന്നത് ഒരു പഴയ ആട്രിബ്യൂട്ട് ആണ്, അത് CSS ൽ വിപുലമായി പിന്തുണയ്ക്കുന്നതിന് മുമ്പ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. പട്ടികയുടെ പശ്ചാത്തല വർണ്ണം മാറ്റാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു. നിങ്ങൾക്ക് ഒരു വർണ്ണത്തിന്റെ പേര് അല്ലെങ്കിൽ ഒരു ഹെക്സാഡെസിമൽ കോഡ് സജ്ജമാക്കാൻ കഴിയും. ഈ ആട്രിബ്യൂട്ട് ഇപ്പോഴും ധാരാളം ബ്രൌസറുകളിൽ പ്രവർത്തിക്കുന്നുണ്ട്, എന്നാൽ ഭാവിയിൽ തെളിയിക്കപ്പെട്ട HTML- നായി നിങ്ങൾ ഇത് ഉപയോഗിക്കരുത്, പകരം CSS ഉപയോഗിക്കുക.
ഈ ആട്രിബ്യൂട്ടിന് മികച്ച ബദലാണ് സ്റ്റൈൽ പ്രോപ്പർട്ടി.
ഒരു പട്ടികയുടെ പശ്ചാത്തല വർണ്ണം മാറ്റുന്നതിന്, ഇങ്ങനെ എഴുതുക:
style = "പശ്ചാത്തല വർണം: #ccc;" >
ഈ പട്ടികയിൽ ചാരനിറത്തിലുള്ള പശ്ചാത്തലം ഉണ്ട്
Bgcolor ആട്രിബ്യൂട്ടിന് സമാനമായ, ബോർഡർ കോർണർ ആട്രിബ്യൂട്ടിന്റെ നിറം മാറ്റാൻ അനുവദിക്കുന്നു. ഈ ആട്രിബ്യൂട്ട് മാത്രമേ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ പിന്തുണയ്ക്കുന്നുള്ളൂ. പകരം, നിങ്ങൾ ബോർഡർ-വർണ മാതൃകയിൽ ഉപയോഗിയ്ക്കണം.
നിങ്ങളുടെ പട്ടികയുടെ ബോർഡിന്റെ വർണ്ണം മാറ്റുന്നതിന്, ഇങ്ങനെ എഴുതുക:
style = "border-color: red;" >
ഈ പട്ടികയ്ക്ക് ചുവന്ന അതിർത്തിയുണ്ട്.
നിങ്ങളുടെ ടേബിളിന് ചുറ്റും ഒരു 3D ബോർഡർ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിനായി ബോർഡർ വർണ്ണമണലും ബോർഡർക്ലോർക്കർ ആട്രിബ്യൂട്ടുകളും ഇൻറർനെറ്റ് എക്സ്പ്ലോററിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. എന്നിരുന്നാലും, IE8 ന്റെയും മുകളിലേയും പോലെ, ഇത് IE7 സ്റ്റാൻഡേർഡ് മോഡിലും ക്വിർക്കുകൾ മോഡിലും മാത്രമേ പിന്തുണയ്ക്കൂ. ഈ പ്രോപ്പർട്ടികൾ മേലിൽ പിന്തുണയ്ക്കില്ല എന്ന് Microsoft പ്രസ്താവിക്കുന്നു.
ഒരു ചെറിയ സമയം, ടേബിൾ മൂലത്തിലെ കോൾസ് ആട്രിബ്യൂട്ട് ബ്രൗസറുകൾക്ക് എത്ര ടേബിളുകൾ ഉണ്ടായിരുന്നു എന്ന് അറിയാൻ നിർദ്ദേശിക്കപ്പെട്ടു. ഇത് വലിയ ടേബിളുകളുടെ റെൻഡറിങ് വേഗത്തിലാക്കാൻ സഹായിക്കുമെന്നതാണ് ആ പരിപാടി. എന്നിരുന്നാലും ഇന്റർനെറ്റ് എക്സ്പ്ലോററാണ് ഇത് നടപ്പിലാക്കിയത്. IE8 ന്റെയും മുകളിലേറെയും ഇത് IE7 സ്റ്റാൻഡേർഡ് മോഡ്, ക്വിർക്കുകൾ മോഡ് എന്നിവയിൽ മാത്രമേ പിന്തുണയ്ക്കപ്പെട്ടിട്ടുള്ളൂ.
കാരണം ഒരു വീതി ആട്രിബ്യൂട്ട് (HTML5 ൽ കാലഹരണപ്പെട്ടതാണ്) പലരും കരുതി, പട്ടികകൾക്കുള്ള ഒരു ഉയര്ന്ന ആട്രിബ്യൂട്ടും ഉണ്ടായിരുന്നു. ടേബിളുകൾ അവയുടെ ഉള്ളടക്കത്തിന്റെ വീതിയോ അല്ലെങ്കിൽ സി.എസ്.എസ് അല്ലെങ്കിൽ വീതി ആട്രിബ്യൂട്ടിലെ നിശ്ചിത വീതിയോട് യോജിപ്പില്ലാത്തതിനാൽ ഉയരം തടസ്സപ്പെടുത്തുന്നതല്ല. അതിനാൽ, ബ്രൗസറുകൾക്ക് മുകളിലെ ഉയരം നിർവചിക്കാൻ ഉയരമുള്ള എലമെൻറിനെ അനുവദിക്കുന്നു. മേശ ഉയരം ഉയരമുണ്ടായിരുന്നെങ്കിൽ, അത് വളരെ വലുതായി കാണിക്കും. എന്നാൽ നിങ്ങൾ വസ്തുവിനെ ഉപയോഗിക്കേണ്ടതാണ്
സി.എസ്.എസ്. ഉയരം കൊണ്ട് നിങ്ങൾ എങ്ങനെയാണ് സിഎസ്എസ് ആസ്തി ഉപയോഗിക്കുന്നത് എന്നതിനെ കുറിച്ചാണ് ഉയരുന്നത്.
ഒരു പട്ടികയിലെ ഏറ്റവും കുറഞ്ഞ ഉയരം സെറ്റ് ചെയ്യുന്നതിനായി, എഴുതുക:
style = "height: 30"; >
ഈ പട്ടിക കുറഞ്ഞത് 30 ഇമ്മാസ്തിൽ കൂടുതലാണ്.
രണ്ട് ആട്രിബ്യൂട്ടുകൾ ചേർക്കുകയും ഇടത് / വലത് വശങ്ങളിലും (ഹബ്സ്), മുകൾ ഭാഗത്ത് (മുകളിൽ സ്പെയ്സ്) എന്നിവയും ചേർക്കുകയും ചെയ്യും. പകരം സ്റ്റൈൽ പ്രോപ്പർട്ടി ഉപയോഗിക്കണം.
ലംബമായ സ്ഥലം 20 പിക്സലിലും തിരശ്ചീനമായ ഇടം 40 പിക്സലുകളിലും സജ്ജമാക്കാൻ, എഴുതുക:
style = "margin: 20px 40px;"
ഈ പട്ടികയിൽ 20 പിക്സലുകളുടെ ഒരു സ്പെയ്സ് ഉണ്ട്, 40 പിക്സൽസിന്റെ ഒരു സ്പേസ് ഉണ്ട്.
ആട്രിബ്യൂട്ട് ഒരു ബൂളിയൻ ആട്രിബ്യൂട്ട് ആണ്, അത് പട്ടികയുടെ ഉള്ളടക്കങ്ങൾ പാരന്റ് മൂലകത്തിന്റെയോ വിൻഡോയുടെയോ അരികിൽ പൊതിയുകയോ അല്ലെങ്കിൽ തിരശ്ചീന സ്ക്രോളിംഗ് നിർബന്ധമാക്കുമോ എന്ന് നിർവ്വചിക്കുന്നു. പകരം, ഓരോ പട്ടികയുടെ സെല്ലിന്റെയും ആവരണ വിശേഷതകൾ CSS പ്രോപ്പർട്ടി ഉപയോഗിച്ച് നിങ്ങൾ നിർവ്വചിക്കണം.
വളരെയധികം എഴുത്ത് കൊണ്ടുള്ള ഒരു നിര നിർമ്മിക്കാൻ എഴുതുക:
style = "white-space: nowrap;" > ഇത് ഒരു ടൺ ഉള്ളടക്കമുള്ള ഒരു നിരയാണ്. എന്നാൽ ഇത് കണ്ടെയ്നർ എന്നതിലുപരി, ടെക്സ്റ്റ് അടുത്ത വരിയിലേക്ക് പൊതിഞ്ഞേക്കില്ല, പകരം എല്ലാ ഉള്ളടക്കവും കാണാൻ തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യാൻ ബ്രൌസർ വിൻഡോയെ നിർബന്ധിക്കുക.
അവസാനമായി, ഓരോ സെല്ലിന്റെ ഉള്ളടക്കവും സെല്ലിൽ ലംബമായി എങ്ങനെ വിന്യസിക്കണം എന്ന് ആട്രിബ്യൂട്ട് നിർവ്വചിക്കുന്നു. ഈ അസാധുവായ ആട്രിബ്യൂട്ടിനുപകരം, നിങ്ങൾ ഓരോ സെല്ലിലും CSS അസൈൻ ഉപയോഗിക്കേണ്ടതാണ്, അസൈൻമെന്റ് മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. സെല്ലിന്റെ ഉള്ളടക്കങ്ങൾ മറ്റ് വലിയ സെല്ലുകൾ സൃഷ്ടിക്കുന്ന ലഭ്യമായ സ്ഥലത്തേക്കാൾ കുറവാണെങ്കിൽ ഈ ശൈലിയുടെ ഫലങ്ങൾ നിങ്ങൾ ശ്രദ്ധിക്കില്ല.
ചുവടെ വിന്യസിക്കാൻ സെൽ (സ്ഥിരമായി മധ്യഭാഗത്ത്) എഴുതുക, എഴുതുക:
ഈ സെൽ ബാക്കിയുള്ളതിനേക്കാൾ ദൈർഘ്യമേറിയതാണ്, അതിനാൽ ഉയരം ഉയരം ഉറപ്പിക്കാൻ കഴിയും. ലംബമായി വിന്യസിച്ചിരിക്കുന്ന സെൽ അടിയിൽ വിന്യസിച്ചിരിക്കുന്നതായി നിങ്ങൾ കാണും.
style = "ലംബ അലൈൻ: താഴെ;" > താഴെയുള്ള ഉള്ളടക്കം.
മദ്ധ്യത്തിലുള്ള ഉള്ളടക്കങ്ങൾ.