അഞ്ച് മിനിറ്റിനുള്ളിൽ CSS പട്ടികയുടെ ബോർഡ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് അറിയുക
നിങ്ങൾക്ക് സി.എൽ.എൽ, എച്ച്.ആർ. ടേബിൾസ് മിക്സ് പാടില്ല എന്ന് നിങ്ങൾ കേട്ടിരിക്കാം. ഇത് കേവലം ശരിയല്ല. അതെ, ലേഔട്ടിനായി HTML ടേബിളുകൾ ഉപയോഗിക്കുന്നത് ഒരു വെബ് ഡിസൈൻ മികച്ച രീതി അല്ല, പകരം സി.എസ്.എസ് ലേഔട്ട് ശൈലികളാണ്, പക്ഷേ പട്ടികകൾ ഒരു വെബ്പേജിലേക്ക് ടാബ്ലറ്റ് ഡാറ്റ ചേർക്കുന്നതിന് ഉപയോഗിക്കാൻ ഇപ്പോഴും ശരിയായ മാർക്ക്അപ്പ് ആണ്.
നിർഭാഗ്യവശാൽ, പല വെബ് പ്രൊഫഷണലുകളും അവർക്ക് വിഷം തോന്നിയെന്ന് കരുതുന്ന മേശകളിൽ നിന്ന് മാറിപ്പോകുന്നതിനാൽ, ആ പ്രൊഫഷണലുകളിൽ പലരും ഈ പൊതുവായ HTML ഘടകം കൂടാതെ ഒരു വെബ്പേജിൽ അവ കൈകാര്യം ചെയ്യേണ്ടിവരുന്ന സമരത്തിലും പ്രവർത്തിക്കാൻ അൽപ്പം പരിചയമുണ്ട്. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരു പേജിൽ ഒരു മേശ ഉണ്ടെങ്കിൽ, പട്ടിക സെല്ലുകളിൽ ആന്തരിക വരികൾ ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു.
CSS ടേബിൾ ബോർഡറുകൾ
ബോർഡറുകൾ ബോർഡറുകൾക്ക് ചേർക്കുന്നതിന് നിങ്ങൾ CSS ഉപയോഗിക്കുമ്പോൾ, അത് പട്ടികയുടെ പുറത്തുള്ള ബോർഡർ ചേർക്കുന്നു. ആ പട്ടികയിലെ ഓരോ കളറുകളിലേക്കും ആന്തരിക വരികൾ ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ആന്തരിക CSS ഘടകങ്ങളിലേക്ക് ബോർഡറുകൾ ചേർക്കേണ്ടതുണ്ട്. വ്യക്തിഗത സെല്ലുകളിൽ വരികൾ ചേർക്കാൻ നിങ്ങൾക്ക് എച്ച്ആർ ടാഗ് ഉപയോഗിക്കാനും കഴിയും.
ഈ ലേഖനത്തിൽ ഉൾപ്പെടുത്തിയിട്ടുള്ള ശൈലികൾ പ്രയോഗിക്കുന്നതിനായി നിങ്ങളുടെ വെബ്പേജിൽ ഒരു പട്ടിക ഉണ്ടായിരിക്കണം. നിങ്ങളുടെ പ്രമാണത്തിന്റെ തലയിലെ ഒരു ആന്തരിക ശൈലി ഷീറ്റായി നിങ്ങൾ ഒരു ശൈലി ഷീറ്റ് സൃഷ്ടിക്കണം (നിങ്ങളുടെ സൈറ്റ് "ഒരൊറ്റ പേജ്" ആണെങ്കിൽ) അല്ലെങ്കിൽ ബാഹ്യ ശൈലി ഷീറ്റായി പ്രമാണത്തിൽ അറ്റാച്ചുചെയ്തിട്ടുണ്ടെങ്കിൽ നിങ്ങളുടെ സൈറ്റ് ഒന്നിലധികം പേജുകൾ ആണെങ്കിൽ - ഒരു ബാഹ്യ ഷീറ്റിലെ എല്ലാ പേജുകളും സ്റ്റൈൽ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു). ആ ശൈലി ഷീറ്റിലേക്ക് ഇൻറീരിയൽ ലൈനുകൾ ചേർക്കുന്നതിന് നിങ്ങൾ ശൈലികൾ ചേർക്കും.
നിങ്ങൾ ആരംഭിക്കുന്നതിനു മുൻപ്
ആദ്യം നിങ്ങളുടെ പട്ടികയിൽ വരികൾ കാണണമെന്ന് നിങ്ങൾ തീരുമാനിക്കേണ്ടതുണ്ട്. നിങ്ങൾക്ക് നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്:
- ഒരു ഗ്രിഡ് ഉണ്ടാക്കുവാൻ എല്ലാ കോശങ്ങളും ചുറ്റുന്നു;
- നിരകൾ തമ്മിലുള്ള വ്യത്യാസം;
- വെറും വരികൾക്കിടയിൽ; അഥവാ
- നിശ്ചിത നിരകൾ അല്ലെങ്കിൽ വരികൾക്കിടയിൽ.
നിങ്ങൾക്ക് വ്യക്തിഗത സെല്ലുകളിൽ അല്ലെങ്കിൽ ഓരോ സെല്ലുകളിൽ നിന്നുമുള്ള ലൈനുകൾ സ്ഥാപിക്കാൻ കഴിയും.
ഒരു പട്ടികയിലെ എല്ലാ കളങ്ങളും എങ്ങിനെയാണ് ലൈനുകൾ ചേർക്കുന്നത്
നിങ്ങളുടെ പട്ടികയിലെ എല്ലാ സെല്ലുകളിലേക്കും ലൈനുകൾ ചേർക്കാൻ, ആ ഗ്രിഡ്-പോലുള്ള ഇഫക്റ്റ് സൃഷ്ടിക്കുന്നതിനായി, നിങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിൽ ഇനിപ്പറയുന്നവ ചേർക്കുക:
td, th {
അതിർത്തി: കട്ടിയുള്ള 1px കറുപ്പ്;
}
ഒരു പട്ടികയിൽ വെറും നിരകൾ തമ്മിലുള്ള വ്യത്യാസം എങ്ങനെ ചേർക്കാം
നിരകൾക്കിടയിൽ വരികൾ ചേർക്കാൻ (ഇത് പട്ടികയിൽ നിരകളുടെ മുകളിൽ നിന്നും താഴേയ്ക്കെത്തി നിൽക്കുന്ന ലംബ ലൈനുകൾ സൃഷ്ടിക്കുന്നു), നിങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിൽ ഇനിപ്പറയുന്നവ ചേർക്കുക:
td, th {
ബോർഡർ-ഇടത്: കനം 1px കറുപ്പ്;
}
അവ ആദ്യ നിരയിൽ ദൃശ്യമാകാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾ ആ, td സെല്ലുകളിൽ ഒരു ക്ലാസ് കൂട്ടിച്ചേർക്കേണ്ടതുണ്ട്. ഈ ഉദാഹരണത്തിൽ, നമ്മൾ ആ സെല്ലുകളിൽ നോൺ-ബോർഡർ ഉള്ള ഒരു ക്ലാസ് ഉണ്ടെന്ന് കരുതുന്നു, കൂടാതെ ഈ കൂടുതൽ വ്യക്തമായ CSS റൂളിലെ അതിർത്തി ഞങ്ങൾ നീക്കം ചെയ്യുന്നു. അതുകൊണ്ട് നമ്മൾ ഉപയോഗിക്കുന്ന HTML ക്ലാസ് ഇതാണ്:
class = "നോ-ബോർഡർ">
തുടർന്ന് നമുക്ക് ഇനിപ്പറയുന്ന സ്റ്റൈൽ ഞങ്ങളുടെ ശൈലി ഷീറ്റിലേക്ക് ചേർക്കാൻ കഴിയും:
.no- ബോർഡർ {
ബോർഡർ-ഇടത്: ഒന്നുമില്ല;
}
ഒരു പട്ടികയിൽ വരികളിലൂടെ എങ്ങനെ വരികൾ തമ്മിൽ ചേർക്കാം
നിരകൾക്കിടയിലുള്ള വരികൾ ചേർക്കുന്നതുപോലെ, നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റിൽ ചേർന്ന ലളിതമായ സ്റ്റൈൽ ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ കഴിയും. താഴെയുള്ള CSS ഞങ്ങളുടെ ടേബിളിൽ ഓരോ വരിയിലും തമ്മിൽ ലംബ വരികൾ ചേർക്കും:
tr {
ബോർഡർ-അടിയിൽ: കട്ടിയുള്ള 1px കറുപ്പ്;
}
പട്ടികയുടെ താഴെയായി അതിർത്തി നീക്കം ചെയ്യണമെങ്കിൽ ആ പട്ടികയിൽ വീണ്ടും ഒരു ക്ലാസ്സ് കൂട്ടിച്ചേർക്കും:
class = "നോ-ബോർഡർ">
നിങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിലെ ഇനിപ്പറയുന്ന സ്റ്റൈൽ ചേർക്കുക:
.no- ബോർഡർ {
ബോർഡർ-അടിയിൽ: ഒന്നുമില്ല;
}
ഒരു പട്ടികയിലെ നിർദ്ദിഷ്ട നിരകളും വരികളും തമ്മിലുള്ള ലൈനുകൾ എങ്ങനെ ചേർക്കാം
നിർദ്ദിഷ്ട വരികളോ നിരകളോ വേണമെന്ന് നിങ്ങൾ ആവശ്യപ്പെടുന്നെങ്കിൽ, ആ കളികളിലോ വരികളിലോ നിങ്ങൾ ഒരു ക്ലാസ് ഉപയോഗിക്കണം. നിരകൾക്കിടയിലുള്ള ഒരു വരി ചേർക്കുന്നത് നിരകളുടെ ഇടയിലുള്ളതിനേക്കാൾ അല്പം ബുദ്ധിമുട്ടുള്ളതാണ്, കാരണം ആ കോളത്തിലെ എല്ലാ സെല്ലിലേക്കും ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്. നിങ്ങളുടെ പട്ടിക ഒരു സി എം എസ്യിൽ നിന്ന് സ്വപ്രേരിതമായി ഉൽപ്പെടുത്തിയാൽ, ഇത് സാധ്യമാകില്ല, മറിച്ച് നിങ്ങൾ പേജ് കോഡുചെയ്താൽ, അത് ഫലപ്രദമാകുന്നതിന് ഉചിതമായ ക്ലാസുകൾ ചേർക്കാൻ കഴിയും.
class = "side-border">
വരികൾക്കിടയിൽ വരികൾ ചേർക്കുന്നത് വളരെ ലളിതമാണ്, കാരണം ലൈൻ നിങ്ങൾക്കാവശ്യമുള്ള വരിയിലേക്ക് നിങ്ങൾക്ക് ചേർക്കാൻ കഴിയും.
class = "border-bottom">
നിങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിലേക്ക് CSS ചേർക്കൂ:
. ബോർഡർ-സൈഡ് {
ബോർഡർ-ഇടത്: കനം 1px കറുപ്പ്;
}
. border-bottom {
ബോർഡർ-അടിയിൽ: കട്ടിയുള്ള 1px കറുപ്പ്;
}
ഒരു പട്ടികയിൽ ഓരോ വ്യക്തിഗത സെല്ലുകളെയും ലൈനുകൾ ചേർക്കാൻ എങ്ങനെ
ഓരോ സെല്ലുകളിലേക്കും വരികൾ ചേർക്കാൻ, നിങ്ങൾക്ക് ഒരു ബോർഡർ ചുറ്റുമുള്ള സെല്ലുകളിൽ ക്ലാസ്സ് ചേർക്കുക:
class = "border">
തുടർന്ന് നിങ്ങളുടെ CSS- ന്റെ സ്റ്റൈൽ ഷീറ്റിൽ ചേർക്കുക:
.അതിർത്തി {
അതിർത്തി: കട്ടിയുള്ള 1px കറുപ്പ്;
}
ഒരു പട്ടികയിൽ വ്യക്തിഗത സെല്ലുകൾ ഉള്ളിൽ വരികൾ ചേർക്കുന്നതെങ്ങനെ
ഒരു സെല്ലിന്റെ ഉള്ളടക്കത്തിനുള്ളിൽ വരികൾ ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഇത് ചെയ്യാൻ എളുപ്പമുള്ള മാർഗ്ഗം തിരശ്ചീന റൂൾ ടാഗ് (
) ആണ്.
പ്രയോജനകരമായ നുറുങ്ങുകൾ
നിങ്ങളുടെ ബോർഡറുകളിൽ വിടവുകൾ ശ്രദ്ധയിൽപ്പെട്ടാൽ, നിങ്ങളുടെ പട്ടികയിൽ ബോർഡർ-കൊഴിഞ്ഞുപോയ ശൈലി സജ്ജമാക്കിയിട്ടുണ്ടെന്ന് ഉറപ്പുവരുത്തുക. നിങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിൽ ഇനിപ്പറയുന്നവ ചേർക്കുക:
മേശ {
ബോർഡർ-ചുരുക്കുക: ചുരുക്കുക;
}
മുകളിൽ തന്നിരിക്കുന്ന എല്ലാ CSS ലും നിങ്ങളുടെ ടേബിൾ ടാഗിൽ ബോർഡർ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം. എന്നിരുന്നാലും, അവന്റെ ആട്രിബ്യൂട്ട് ഒഴിവാക്കിയാൽ, സിഎസ്വെയേക്കാൾ അല്പം അയവുള്ളതാണ്, നിങ്ങൾക്ക് ബോർഡർ വീതിയെ മാത്രം നിർവചിക്കാനാകൂ, മാത്രമല്ല പട്ടികയുടെ എല്ലാ സെല്ലുകളിൽനിന്നും മാത്രമേ അത് സാധ്യമാകൂ.