എങ്ങിനെ ഒരു HTML ടേബിൾ നിർമ്മിക്കാം. നിറങ്ങളുടെ പട്ടിക
പുത്തൻ വെബ്മാസ്റ്റർമാർക്ക് നിരവധി പ്രശ്നങ്ങൾ കൈകാര്യം ചെയ്യേണ്ടതുണ്ട്. ഇന്ന് നിങ്ങളുടെ സ്വന്തം സൈറ്റുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ടെംപ്ലേറ്റുകൾ ഉപയോഗിക്കാൻ കഴിയും, പക്ഷേ ബുദ്ധിമുട്ടാണ്, അവർക്ക് എല്ലായ്പ്പോഴും ആവശ്യമായ പ്രോപ്പർട്ടികൾ ഇല്ല, കൂടാതെ നിങ്ങൾ ആദ്യം മുതൽ ഒരു വെബ്സൈറ്റ് ഡിസൈൻ സൃഷ്ടിക്കേണ്ടതുണ്ട്, അല്ലെങ്കിൽ നിലവിലുള്ള കോഡ് അതിൽ മാറ്റങ്ങൾ വരുത്തണം. ഇവിടെ നിങ്ങൾക്ക് HTML കോഡും പേജിൻറെ പശ്ചാത്തലവും നിറവും എങ്ങിനെ സജ്ജീകരിക്കാം, ഒരു ചിത്രം അല്ലെങ്കിൽ വീഡിയോ തിരുകാൻ എങ്ങിനെ എച്ച്.റ്റി.എം.എല്ലിൽ ഒരു ടേബിൾ നിർമ്മിക്കാം എന്ന അറിവ് ആവശ്യമാണ്.
മേശയിൽ ആരംഭിക്കുക
ഒരു HTML പേജിന്റെ ലേഔട്ടിലുള്ള ഏറ്റവും ബുദ്ധിമുട്ടുള്ള കാര്യങ്ങളിൽ ഒന്ന് പട്ടികകളാണ്. ഒരു പ്രശ്നം കൂടുതൽ എഴുതുക, കോഡുകൾ എഴുതുന്ന സമയത്ത് നിങ്ങൾക്ക് എളുപ്പത്തിൽ തെറ്റ് ചെയ്യാം - ഒരു അധിക വരി അല്ലെങ്കിൽ സെൽ എഴുതാൻ മറക്കുക, നിങ്ങൾക്ക് ആവശ്യമുള്ളിടത്ത് ശരിയായത് എഴുത്ത്, മറ്റ് ചെറിയ കാര്യങ്ങൾ . വലിയ പട്ടിക, വലിയ തെറ്റ് ഒരു അവസരം.
അതുകൊണ്ട് HTML ൽ ഒരു പട്ടിക സൃഷ്ടിക്കാൻ തുടങ്ങുന്പോൾ, കഴിയുന്നത്ര ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.
ഒന്നാമതായി, നിങ്ങൾ ഒരു പേപ്പർ പട്ടികയിൽ ഭാവിയിൽ പട്ടിക വരയ്ക്കണം, നിങ്ങൾ ഏതൊക്കെ സെല്ലിൽ ആയിരിക്കും ഉണ്ടാവുക എന്ന് അടയാളപ്പെടുത്തുകയും ഈ മൂലകത്തിന്റെ അടിസ്ഥാന പാരാമീറ്ററുകളെക്കുറിച്ച് നിങ്ങൾക്കറിയുകയും വേണം.
അടുത്തതായി, പട്ടികയിലെ വരികളുടെ എണ്ണം, ഓരോ നിരയിലെ സെല്ലുകളുടെ എണ്ണവും കണക്കാക്കുക. ടേബിളിലെ ചിത്രങ്ങൾ, പശ്ചാത്തല നിറം, ബോർഡറുകൾ, വാചകം എന്നിവ പോലുള്ള അത്തരം ഇനങ്ങൾ ശ്രദ്ധിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. അതിനുശേഷം മാത്രമേ നിങ്ങൾക്ക് റെക്കോർഡ് ചെയ്ത വിവരങ്ങൾ ഉപയോഗിച്ച് ഒരു HTML പട്ടിക സൃഷ്ടിക്കാൻ തുടങ്ങുകയുള്ളൂ.
എഡിറ്റർ
നിങ്ങൾ ഒരു ടേബിൾ ലേഔട്ട് സൃഷ്ടിച്ചു. ഇപ്പോൾ അത് സൃഷ്ടിക്കാൻ ഉചിതമായ എഡിറ്റർ തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്. നിങ്ങൾക്ക് പ്രത്യേക സൈറ്റ് ഡിസൈനർമാരെ തിരഞ്ഞെടുത്ത് അവയിൽ ഒരു ടേബിൾ നിർമ്മിക്കാം. ഈ സോഫ്റ്റ്വെയര് ഉപയോഗിച്ചു്, ഒരു പട്ടിക തയ്യാറാക്കുന്നതു് വേഡ് ഡോക്യുമെന്റിലുള്ളതിനേക്കാളും ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല. ഫ്രണ്ട്പാേജ് പോലുള്ള ഒരു പ്രോഗ്രാം നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം. പ്രോഗ്രാം വളരെ പഴക്കമുള്ളതാണെങ്കിലും, അതിന്റെ സഹായത്തോടെ നിങ്ങൾക്ക് നല്ല സൈറ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും, കൂടാതെ, അതിൽ ഒരു ട്യൂട്ടോറിയലിലും നിങ്ങൾക്ക് കൂടുതൽ കണ്ടെത്താനാകും.
പ്രത്യേക കോഡുള്ള എച്ച്ടിഎംഎലിൽ ഒരു പട്ടിക സൃഷ്ടിക്കാൻ നിങ്ങൾക്കാഗ്രഹമുണ്ടെങ്കിൽ, ഇത് സാധാരണ നോട്ട്പാഡിലോ സാധാരണ വേഡ് ഡോക്യുമെന്റോ ഉപയോഗിക്കാം. എന്നിരുന്നാലും, ഇവിടെ നിങ്ങൾക്ക് കഠിനാധ്വാനം ചെയ്യേണ്ടിവരും, കാരണം നിങ്ങൾക്ക് ദീർഘനേരം കോഡ് എഴുതേണ്ടിവരും.
സൈറ്റിന്റെ എഞ്ചിന് സ്വയം നിർമ്മിച്ച എഡിറ്റർ ഉപയോഗിക്കാം. അതിനാൽ, പല എൻജിനുകളിലും ഒരു എൻട്രി സൃഷ്ടിക്കുമ്പോൾ, പട്ടികകൾ ഉൾപ്പെടെ വ്യത്യസ്ത ഘടകങ്ങൾ ചേർക്കാൻ കഴിയും. എഡിറ്റർ അടിസ്ഥാന കഴിവുകൾ നിങ്ങളെ തൃപ്തിപ്പെടുത്തുന്നില്ലെങ്കിൽ, കോഡ് മാറ്റുന്നതിലൂടെ ആദ്യം മുതൽ ഇത് എഴുതുന്നത് എളുപ്പമായിരിക്കും.
ടാഗുകൾ
നിങ്ങൾ ഉപയോഗിക്കുന്ന html എഡിറ്ററിൽ തുടങ്ങുന്നതിനു മുമ്പ് നിങ്ങൾ ഏത് എഡിറ്ററാണ് ഉപയോഗിക്കുന്നത്, പ്രധാന ടാഗുകൾ ഓർത്തുവയ്ക്കേണ്ടതാണ്. ഇവയിൽ മൂന്ന് എണ്ണം -
,
,
. എല്ലാ ടാഗുകളും ജോഡിയാകുമെന്നത് ഓർക്കുക. ആദ്യ ടാഗ് പട്ടികയെ മുഴുവനായും സൂചിപ്പിക്കുന്നു, രണ്ടാമൻ സ്ട്രിംഗിനെ വ്യക്തമാക്കുന്നു, മൂന്നാമത്തെ സ്ട്രിംഗിലെ സെൽ വ്യക്തമാക്കുന്നു.
ടാഗുകളുടെ ഓരോ കുറച്ചും കൂടുതൽ. പട്ടിക എപ്പോഴും
ടാഗ് ഉപയോഗിച്ച് ആരംഭിക്കുകയും അവസാനിക്കുകയും ചെയ്യുന്നു table>. ഏതൊരു ബ്രൌസറിനുമുപരിയായി പട്ടികയ്ക്ക് മുമ്പുള്ള പട്ടികയുടെ പ്രതീകമാണിത്. കൂടുതൽ വരികൾ തുറന്ന് tr> ടാഗ് അവസാനിപ്പിക്കാം. ഓരോ വരിയിലും
, td> റ്റാഗുകൾ ഉപയോഗിച്ചു്, സെല്ലുകളുടെ എണ്ണം വ്യക്തമാക്കിയിരിയ്ക്കുന്നു.
അതുകൊണ്ട്, 2x2 എന്ന മേശയുടെ കോഡ് ഇങ്ങനെ ചെയ്യും:
<പട്ടിക>
Td>
td> tr>
td>
td> tr>
Table>
തിരഞ്ഞെടുത്ത എഡിറ്ററിൽ നിന്ന് പകർത്തിയുകൊണ്ട് നിങ്ങൾക്ക് ഒരു പേജിന്റെ HTML പേജിലേക്ക് അത് ഉൾപ്പെടുത്താനാകും.
പട്ടികകൾ, വരികൾ, കളങ്ങൾ എന്നിവയുടെ പാരാമീറ്ററുകൾ
അതിനാൽ ഞങ്ങൾ അടിസ്ഥാന കോഡ് വേർതിരിച്ചെടുത്തു. ഇപ്പോൾ നമുക്ക് മേശ മെച്ചപ്പെടുത്താനും അതിനെ കൂടുതൽ ആകർഷകമാക്കാനും കൂടുതൽ ആകർഷകമാക്കാനും എങ്ങനെ കഴിയുന്നു. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് ടാഗുകളുടെ അടിസ്ഥാന പരാമീറ്ററുകൾ അറിയേണ്ടതുണ്ട്. അവ ഓരോ പരാമീറ്ററിനു ശേഷവും തുല്യ അടയാളത്തോടെ തുറന്നിരിക്കുന്ന ടാഗിനുള്ളിൽ രേഖപ്പെടുത്തും, എന്നിട്ട് അതിന്റെ മൂല്യവും ഉദ്ധരണി ചിഹ്നങ്ങളിൽ എടുത്തു നൽകും. ഉദാഹരണത്തിന്, എച്ച്.റ്റി.എം.എല്ലിലെ പശ്ചാത്തലം ഇങ്ങനെയാണ്:
.
നിങ്ങൾക്ക് വളരെ ഉപയോഗപ്രദമാകുന്ന ചില അടിസ്ഥാന പാരാമീറ്ററുകൾ നമുക്ക് ലിസ്റ്റുചെയ്യാം. നമുക്ക് പട്ടികയിൽത്തന്നെ തുടങ്ങാം.
അതിനൊപ്പം നിങ്ങൾക്ക് ഏതെങ്കിലും മൂല്യനഷ്ടം കണക്കാക്കാൻ കഴിയുന്ന ബോർഡർ ബോർഡർ പരാമീറ്ററിന്റെ വീതി ക്രമീകരിക്കാൻ കഴിയും. ബോർഡർ നിറം ബോർഡർ നിറം സജ്ജമാക്കുന്നു. പശ്ചാത്തലം bgcolor ആയി സജ്ജമാക്കിയിരിക്കുന്നു.
നിങ്ങൾക്ക് പട്ടികയുടെ പശ്ചാത്തലം ഒരു ചിത്രം സൃഷ്ടിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, പശ്ചാത്തലത്തിൽ ഉപയോഗിക്കുക, ചിത്രത്തിന്റെ URL നിർദ്ദേശിക്കേണ്ടതാണ്.
പട്ടികയ്ക്കായുള്ള പേജ് ഉള്ളടക്കം അലൈൻ ചെയ്യാനുള്ള പരാമീറ്ററോടെ വിന്യസിക്കുക, അതിന് മൂല്യങ്ങൾ ഇടത്, മധ്യഭാഗം, വലത് എന്നിവ എടുക്കാം.
സ്ട്രിംഗിന്റെ പാരാമീറ്ററുകളെക്കുറിച്ച് കുറച്ചുമാത്രം. സ്ട്രിംഗിലുള്ള കോശങ്ങളുടെ നിറം bgcolor ഉപയോഗിച്ച് വ്യക്തമാക്കുന്നു. നിങ്ങൾക്ക് align (left, center അല്ലെങ്കിൽ right), ലംബമായി - valign (മൂല്യങ്ങൾ മുകളിൽ, മധ്യഭാഗം അല്ലെങ്കിൽ താഴെ എടുക്കുന്നു) വാചകം തിരശ്ചീനമായി വിന്യസിക്കാൻ കഴിയും.
സെല്ലെക്കുറിച്ച്, മുഴുവൻ ടേബിളിനും അതേ പശ്ചാത്തലങ്ങൾ ഉപയോഗിച്ച് പശ്ചാത്തല നിറവും പശ്ചാത്തല ചിത്രവും സജ്ജമാക്കിയിട്ടുണ്ടെന്ന് ശ്രദ്ധിക്കാവുന്നതാണ്. വിന്യാസവും വാലിയം ഓപ്ഷനുകളും ഉപയോഗിച്ച് ടെക്സ്റ്റ് അലൈൻ ചെയ്യുക.
പ്രത്യേക പരാമീറ്ററുകളും ഉണ്ട് - കോൾസ്പാൻ, റോസ്പാൻ. ആദ്യത്തെ ഒരു സഹായത്തോടെ നിങ്ങൾക്ക് സെല്ലിന്റെ വിപുലമായ വരികൾ സജ്ജമാക്കാം. രണ്ടാമത്തേത്, ഈ സെൽ വിപുലീകരിക്കാൻ കഴിയുന്ന വരികളുടെ എണ്ണം വ്യക്തമാക്കുന്നു.
അതാണ് എല്ലാ ഉപയോഗപ്രദമായ ഓപ്ഷനുകളും.
നിറങ്ങളുടെ പട്ടിക
വർണ്ണ പട്ടിക പോലെ അത്തരമൊരു ഉപയോഗപ്രദമായ കാര്യത്തെക്കുറിച്ച് കുറച്ച് വാക്കുകൾ പറയാം. പേജ് പശ്ചാത്തലം, ടെക്സ്റ്റ്, ലിങ്കുകൾ, മറ്റ് ഘടകങ്ങൾ എന്നിവ ക്രമീകരിക്കുന്നതിന് ഇത് ഉപയോഗിക്കുന്നു. വർണങ്ങളുടെ പട്ടികയിൽ 216 നിറങ്ങളും ഷേഡുകളും അടങ്ങിയിരിക്കുന്നു. ഓരോന്നിനും സ്വന്തമായി ഹെക്സാഡെസിമൽ കോഡുണ്ട്.
കോഡ് സ്വയം ഒരു ജ്യാമിത പ്രതീകത്തോടെ ആരംഭിക്കുന്നു, അതിൽ മൂന്ന് ജോഡി നമ്പറുകളോ അക്ഷരങ്ങളോ ഉണ്ട്. ഉദാഹരണത്തിന്, പട്ടികയിലെ പച്ച നിറത്തിൽ കോഡ് # 007F0 ഉണ്ട്. ചുവപ്പ്, പച്ച, നീല എന്നീ മൂന്നു പ്രാഥമിക വർഗങ്ങളിലൊന്നിന്റെ തീവ്രത ഓരോ ജോഡികളെയും സൂചിപ്പിക്കുന്നു. പട്ടിക ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ആവശ്യമുള്ള നിറം തിരഞ്ഞെടുത്ത് അത് കോഡ് ഉപയോഗിച്ച് സജ്ജമാക്കാം.
നിങ്ങൾക്ക് പട്ടിക ഉപയോഗിക്കാൻ കഴിയുന്നില്ലെങ്കിൽ, അതിന്റെ പേര് ഇംഗ്ലീഷിൽ ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിറം സജ്ജമാക്കാം.
ഉള്ളടക്കം
ഉള്ളടക്കത്തെക്കുറിച്ച് കുറച്ച് വാക്കുകൾ. തീർച്ചയായും മിക്കപ്പോഴും നമുക്ക് HTML ടേബിളിൽ ടെക്സ്റ്റ് കാണാൻ കഴിയും, എന്നാൽ അത് ഞങ്ങൾക്ക് അവിടെ മാത്രമേ നൽകാനാകൂ എന്ന് അർത്ഥമാക്കുന്നില്ല. സെല്ലുകളും വരികളും ചിത്രങ്ങളും ഓഡിയോ വീഡിയോ ഫയലുകളും ലിങ്കുകളും ഉൾക്കൊള്ളുന്നു.
ഒരു കളത്തിൽ (ഒരു ലൈൻ) വാചകമോ മറ്റേതെങ്കിലും വിവരമോ നൽകുക, രണ്ട് ടാഗുകൾക്കിടയിൽ അത് രജിസ്റ്റർ ചെയ്യേണ്ടത് ആവശ്യമാണ്. ഉദാഹരണത്തിന്:
പേര് td>. സെൽ "നെയിം" ഡിസ്പ്ലേ ചെയ്യുന്നു.
നിങ്ങൾക്ക് പ്രത്യേക ടാഗുകൾ - ,
നുറുങ്ങുകൾ
ഒടുവിൽ സങ്കീർണമായ ഒരു HTML പട്ടിക സൃഷ്ടിക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന ചില ഉപയോഗപ്രദമായ നുറുങ്ങുകൾ നൽകുക.
ഒരു ടേബിൾ എഴുതുന്ന സമയത്ത്, പട്ടികയുടെ ടാഗുകളും അതിന്റെ പ്രധാന ഘടകങ്ങളും ആദ്യം രജിസ്റ്റർ ചെയ്യാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. തുടർന്ന് ലൈൻ ടാഗുകൾ എഴുതുക. ഓരോ ജോഡിയും ഒരു പുതിയ വരിയിൽ തുടങ്ങുക. നിങ്ങളുടെ ടേബിളിലെ എത്ര വരികൾ നിങ്ങൾ കാണും. കൂടാതെ, സ്ട്രിങ് അല്ലെങ്കിൽ സ്ട്രിങ് പാരാമീറ്ററുകൾ അടിസ്ഥാന അടിസ്ഥാനത്തിൽ നിന്നും വ്യത്യസ്തമാണെങ്കിൽ അവ എഴുതുക. ഓരോ കളത്തിനും ഒരു പുതിയ ലൈനിൽ നിന്നും രജിസ്റ്റർ ചെയ്യാൻ ഞങ്ങൾ നിർദ്ദേശിക്കുന്നു. Edge ൽ നിന്ന് ഒന്നോ രണ്ടോ ഇൻഡന്റുകൾ ടാബിൽ ഉണ്ടാക്കാൻ അവസരമുണ്ട്. അങ്ങനെ, നിങ്ങൾ കോഡിന്റെ ഘടനയെ വളരെ വ്യക്തമായും കാണും.
ടേബിൾ ഫ്രെയിം തയ്യാറാകുമ്പോൾ സെല്ലുകളുടെയും സ്ട്രിംഗുകളുടെയും ഉള്ളടക്കങ്ങൾ വളരെ അവസാനം എഴുതിയിരിക്കണം.