Table Types

🏷️ Table Headers — Column Names

Table headers jaise spreadsheet ka top row — "Name | Age | City | Salary". Yeh data body mein nahi daalte — top pe baitha hota hai, hamesha visible, batata hai ki har column kya matlab hai.

Teen section tags: <thead> header rows ke liye (<td> ki jagah <th> use karte hain), <tbody> main data ke liye, aur <tfoot> footer rows ke liye (totals, summaries). Browser tbody scroll hone pe bhi thead aur tfoot visible rakhte hain.

🛺

Spreadsheet Analogy: Google Sheets mein Row 1 tumhara header hai — bold, frozen, distinct. HTML mein wahi kaam karta hai. Neeche ki data rows hain. Neeche ka sum row hai.

Code Example

HTML — Table Headers — Column Names

<!-- thead, tbody, tfoot ke saath table -->
<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Used For</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Markup</td>
      <td>Structure</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Style</td>
      <td>Presentation</td>
      <td>1996</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Programming</td>
      <td>Behavior</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>TypeScript</td>
      <td>Programming</td>
      <td>Type Safety</td>
      <td>2012</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total Languages Shown</td>
      <td>4</td>
    </tr>
  </tfoot>
</table>

<thead>Header section — column labels, scroll pe visible rehta hai

<th>Header cell — default bold, semantic meaning

<tbody>Body section — main data rows

<tfoot>Footer section — totals, summaries

colspan="3"3 columns ko ek mein merge karo (tfoot row mein)

✅ When to Use

HAR data table pe — headers optional nahi hai
Jab scroll pe sticky headers chahiye
Jab footer rows chahiye totals/summaries ke liye
Accessibility ke liye — screen readers th ko alag announce karte hain

❌ When NOT to Use

Layout tables ke liye (CSS grid use karo — semantic meaning nahi)
Single-row tables bina body data ke

💡

Screen readers ko se alag announce karte hain. Woh kehte hain "column header: Name" th ke liye aur sirf "cell: John" td ke liye. Yehi hai headers accessibility ke liye matter karte hain — sirf visual bold text nahi.

← Back to Tables Chapter