Chapter 9: HTML ടേബിളുകൾ: ഒരു ക്രമീകരണ ഉപാധി (Structuring Data with HTML Tables)

HTML ടേബിളുകൾ എന്താണ്?

HTML-ൽ ടേബിളുകൾ (Tables) ഉപയോഗിച്ച് ഡാറ്റാ ക്രമീകരിക്കുന്നതിനും ആകൃതിപെടുത്തുന്നതിനുമുള്ള ഒരു സവിശേഷ മാർഗമാണ്. ടേബിളുകൾ ഡാറ്റയെ നിരകളിലും കോളങ്ങളിലുമായി ക്രമീകരിക്കാൻ സഹായിക്കുന്നു. ഇത് നിർമാണത്തിനും ഡാറ്റ പ്രദർശിപ്പിക്കുന്നതിനും ഉപയോഗിക്കുന്ന ടാഗുകളുടെ ഒരു കൂട്ടമാണ്.

HTML ടേബിളിന്റെ ഘടന:

HTML ടേബിളുകൾ താഴെപ്പറയുന്ന പ്രധാന ടാഗുകൾ ഉപയോഗിച്ചാണ് നിർമ്മിക്കുന്നത്:

• <table>: ടേബിളിന്റെ ഘടന നിർമിക്കാൻ.
• <tr>: ടേബിളിന്റെ ഓരോ നിരയ്ക്കായി.
• <td>: ടേബിളിലെ ഒരു സെല്ലിനുള്ള ഡാറ്റ.
• <th>: തലക്കെട്ടുകൾ (Headers) സൃഷ്ടിക്കാൻ.

<table>
  <tr>
    <th>പദം</th>
    <th>വിവരണം</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>HyperText Markup Language</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Cascading Style Sheets</td>
  </tr>
</table>

Example Breakdown:

• <table>: ടേബിള്‍ തുടങ്ങുന്നു.
• <tr>: ഒരു നിര സൃഷ്ടിക്കുന്നു.
• <th>: ഒരു കോളത്തിന്റെ തലക്കെട്ട്.
• <td>: ഒരു ടേബിള്‍ സെല്‍ അല്ലെങ്കില്‍ ഡാറ്റാ ഇനം.

Borders ഉള്ള ടേബിളുകൾ:

ടേബിളുകൾക്ക് ബോർഡറുകൾ ചേർക്കാൻ, CSS അല്ലെങ്കിൽ border ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം.

<table border="1">
  <tr>
    <th>Item</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>HyperText Markup Language</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Cascading Style Sheets</td>
  </tr>
</table>

CSS ഉപയോഗിച്ച് ടേബിളുകൾ സ്റ്റൈൽ ചെയ്യുക:

CSS ഉപയോഗിച്ച് ടേബിളുകൾക്ക് കൂടുതൽ രൂപവും ആകൃതിയും നൽകാം. ഉദാഹരണത്തിന്, ബോർഡറുകൾ, നിറം, ആകൃതികൾ എന്നിവ ക്രമീകരിക്കാൻ കഴിയും:

<table style="border-collapse:collapse; width:100%;">
  <tr style="background-color:#f2f2f2;">
    <th style="border: 1px solid #000; padding:10px;">Item</th>
    <th style="border: 1px solid #000; padding:10px;">Description</th>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding:10px;">HTML</td>
    <td style="border: 1px solid #000; padding:10px;">HyperText Markup Language</td>
  </tr>
  <tr>
    <td style="border: 1px solid #000; padding:10px;">CSS</td>
    <td style="border: 1px solid #000; padding:10px;">Cascading Style Sheets</td>
  </tr>
</table>

കോളങ്ങൾ Span ചെയ്യുക (Column Span):

ഒരു സെല്‍ ടേബിളിലെ ഒരേ പാടിനുള്ളിൽ രണ്ടോ അതിലധികമോ കോളങ്ങൾ വ്യാപിപ്പിക്കാനായി colspanആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു:

<table border="1">
  <tr>
    <th colspan="2">Technologies</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
  </tr>
</table>

നിരകൾ Span ചെയ്യുക (Row Span):

ഒരു സെല്‍ നിരകളിലേക്കു വ്യാപിപ്പിക്കാനായി rowspan ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു:

<table border="1">
  <tr>
    <td rowspan="2">HTML</td>
    <td>Introduction</td>
  </tr>
  <tr>
    <td>Advanced Topics</td>
  </tr>
</table>

സാധാരണമായ HTML ടേബിളുകൾ:

<table border="1">
  <tr>
    <th>പേര്</th>
    <th>പദവി</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Designer</td>
  </tr>
</table>

---

സങ്കലനം:

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