ഒരു പട്ടിക സെല്ലിൽ എങ്ങനെയാണ് കേന്ദ്ര പാഠം ലഭിക്കുക

നിങ്ങൾ ഒരു പുതിയ വെബ് ഡിസൈനർ ആണെങ്കിൽ, ഒരു പട്ടിക സെല്ലിനുള്ളിൽ ടെക്സ്റ്റിന്റെ എങ്ങനെയാണ് കേന്ദ്രീകരിക്കേണ്ടത് എന്ന് നിങ്ങൾക്ക് സംശയമുണ്ടാകാം. ഈ ഗൈഡ് ഉപയോഗിച്ച്, കുറച്ച് മിനുട്ടിൽ ഈ സാങ്കേതികവിദ്യ കൈകാര്യം ചെയ്യുക. എളുപ്പമല്ല - നിങ്ങൾ മുമ്പൊരിക്കലും ശ്രമിച്ചിട്ടില്ലെങ്കിലും.

ആമുഖം

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

കൂടാതെ, നിങ്ങളുടെ പ്രമാണ തലത്തിൽ ഒരു ആന്തരിക ശൈലി ഷീറ്റ് സൃഷ്ടിച്ചിരിക്കണം അല്ലെങ്കിൽ ബാഹ്യ ശൈലി ഷീറ്റായി പ്രമാണത്തിൽ അറ്റാച്ചുചെയ്തിരിക്കണം. സ്റ്റൈൽ ഷീറ്റിൽ നിങ്ങളുടെ പട്ടിക സെല്ലുകളെ കേന്ദ്രീകരിക്കുന്ന ശൈലികൾ നിങ്ങൾ വെച്ചുതരും.

എങ്ങനെ പട്ടികയിൽ ഓരോ സെല്ലും കേന്ദ്രീകരിക്കാം

നിങ്ങളുടെ ശൈലി ഷീറ്റിലേക്ക് ഇനിപ്പറയുന്ന വരികൾ ചേർക്കുക:

td, th {text-align: center; }

എങ്ങനെ പട്ടികയിൽ ഓരോ ഹെഡ്ഡർ സെല്ലും കേന്ദ്രീകരിക്കാം

നിങ്ങളുടെ ശൈലി ഷീറ്റിലേക്ക് ഇനിപ്പറയുന്ന വരികൾ ചേർക്കുക:

th {text-align: center; }

പട്ടികയുടെ തലയോ, ശരീരമോ, കാൽയുള്ളതോ ആയ ഓരോ കളത്തിനും മദ്ധ്യത്തിൽ

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

thead th, thead td {text-align: center; } tbody th, tbody td {text-align: center; } tfoot th, tfoot td {text-align: center; }

നിങ്ങൾ കേന്ദ്രീകരിക്കാൻ ആഗ്രഹിക്കാത്ത ഏരിയകൾക്കായി ശൈലികൾ നീക്കംചെയ്യുക.

ഒരു പട്ടികയിൽ ഒരു നിർദ്ദിഷ്ട സെൽ അല്ലെങ്കിൽ സെല്ലുകളെ എങ്ങനെ കേന്ദ്രീകരിക്കാം

ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ സെന്റർ ചെയ്യേണ്ട സെല്ലുകളിൽ ഒരു ക്ലാസ് സെറ്റ് ചെയ്യണം.

നിങ്ങൾ കേന്ദ്രീകരിക്കാൻ ആഗ്രഹിക്കുന്ന പട്ടിക സെല്ലുകളിൽ ഇനിപ്പറയുന്ന ആട്രിബ്യൂട്ട് ചേർക്കുക:

class = "centered-cell" >

തുടർന്ന് നിങ്ങളുടെ ശൈലി ഷീറ്റിലേക്ക് ഇനിപ്പറയുന്നത് ചേർക്കുക:

. centcented-cell {text-align: center; }

നിങ്ങളുടെ ക്ലാസിലെ ഏതൊരു സെല്ലിലേക്കും ഈ ക്ലാസ് ചേർക്കാൻ കഴിയും.

പൊതിയുക

നിങ്ങളുടെ പട്ടികയ്ക്കുള്ള സെല്ലുകളിൽ ഈ ശൈലികൾ ഉപയോഗിക്കുവാൻ മടിക്കേണ്ടതില്ല. നിങ്ങൾ അവയെ ലയിപ്പിച്ച സെല്ലുകളിൽ അല്ലെങ്കിൽ ഒറ്റ സെല്ലുകളിൽ ഉപയോഗിക്കാൻ കഴിയും, അതിനുള്ളിൽ ടെക്സ്റ്റ് കേന്ദ്രീകരിക്കും.