Tables: Rows, Columns & Data Grids

1. Simple Definition

Jab hume structured data (rows aur columns me) dikhana hota hai, tab hum <table> element ka use karte hain. Isme <tr> row banata hai, <th> header cell banata hai, aur <td> data cell banata hai.

2. Real-Life Analogy

3. Why Do We Need It?

Financial reports, product specifications, pricing comparison tables, aur train schedules bina table ke padhna impossible hota.

4. Syntax

<table>
  <caption>Table Ka Title</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

5. Basic Example (With Colspan & Rowspan)

<div class="table-wrapper">
  <table>
    <caption>Student Exam Report</caption>
    <thead>
      <tr>
        <th>Roll No</th>
        <th>Student Name</th>
        <th>Subject</th>
        <th>Marks</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>101</td>
        <td rowspan="2">Rahul Kumar</td>
        <td>Maths</td>
        <td>95</td>
      </tr>
      <tr>
        <td>101</td>
        <td>Science</td>
        <td>88</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3" style="font-weight: bold;">Total Marks</td>
        <td style="font-weight: bold;">183</td>
      </tr>
    </tfoot>
  </table>
</div>

6. Output / Expected Result

7. Code Explanation

• <caption>: Table ka accessible title.
• <thead>, <tbody>, <tfoot>: Table ko header, main data aur summary footer me divide karte hain.
• colspan="3": Ek cell ko 3 columns ki width me merge karta hai.
• rowspan="2": Ek cell ko 2 vertical rows me merge karta hai.

8. Real-World Example

Flight booking sites (MakeMyTrip, Indigo) par flight timings, fare options aur baggage allowances tables me show kiye jaate hain.

9. Common Mistakes

10. Best Practices

• Mobile screen par table cut na ho, isliye table ko <div class="table-wrapper"> me wrap karke overflow-x: auto; lagayein.
• Hamesha <th scope="col"> ya <th scope="row"> attribute use karein accessibility ke liye.

11. Try It Yourself

Playground me apne college subjects aur marks ki ek 3-row table banayein.

12. Challenge

Ek Gym Workout Plan table banayein jisme Day, Exercise, Sets, aur Reps hon, aur Saturday/Sunday ke liye colspan="3" me "REST DAY" likha ho.

13. Interview Questions

14. Quick Revision

• table -> thead/tbody/tfoot -> tr -> th/td.
• Tabular data ke liye use karein, page layout ke liye nahi.
• colspan horizontally merge karta hai, rowspan vertically.

15. FAQ

Tables & Data Grids (Rows, Columns, Headers)

1. Simple Definition

HTML tables (<table>) structure complex, multi-dimensional relational data into horizontal rows and vertical columns. Semantic tables are composed of <thead> (table header), <tbody> (table data rows), <tr> (table row), <th> (header cell), and <td> (data cell).

2. Real-Life Analogy

3. Why Do We Need It?

• Tabular Data Representation: Financial statements, sports scoreboards, price comparisons, and schedule timetables.
• Cell Spanning: Merging cells across multiple rows or columns using rowspan and colspan.
• Data Accessibility: Associating headers with data cells via scope="col" and scope="row".

4. Syntax

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rahul</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

5. Basic Example

<table style="width:100%; border-collapse: collapse;">
  <caption>Quarterly Employee Performance Matrix</caption>
  <thead>
    <tr style="background: var(--bg-secondary);">
      <th style="padding: 8px; border: 1px solid var(--border-color);">Employee</th>
      <th style="padding: 8px; border: 1px solid var(--border-color);">Department</th>
      <th style="padding: 8px; border: 1px solid var(--border-color);">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px; border: 1px solid var(--border-color);">Aarav Patel</td>
      <td style="padding: 8px; border: 1px solid var(--border-color);">Engineering</td>
      <td style="padding: 8px; border: 1px solid var(--border-color);">Active</td>
    </tr>
    <tr>
      <td style="padding: 8px; border: 1px solid var(--border-color);">Priya Roy</td>
      <td style="padding: 8px; border: 1px solid var(--border-color);">Product Design</td>
      <td style="padding: 8px; border: 1px solid var(--border-color);">Active</td>
    </tr>
  </tbody>
</table>

6. Output / Expected Result

7. Code Explanation

• <caption>: Provides an accessible programmatic title for the table.
• <thead>, <tbody>, <tfoot>: Group header, body, and summary footer rows.
• <th> vs <td>: <th> designates bold, centered header cells; <td> holds standard data.
• colspan & rowspan: Merge cells across multiple horizontal columns or vertical rows.

8. Real-World Example

SaaS pricing tables (comparing Free, Pro, and Enterprise tiers across 20+ feature checks) rely on tables enhanced with colspan and responsive overflow wrappers.

9. Common Mistakes (Beginners Traps)

10. Best Practices

• Always wrap tables in a container with overflow-x: auto; for mobile responsiveness.
• Use scope="col" and scope="row" on <th> elements for screen reader navigation.
• Always declare CSS border-collapse: collapse; to remove double borders.

11. Try It Yourself

Open the Live Playground and create a student grade table using colspan for a merged semester heading!

12. Mini Challenge

Create a weekly class schedule table with Monday through Friday headers and a merged 2-hour lab session using colspan="2".

13. Interview Questions

14. Quick Revision

• <table> is strictly for tabular datasets.
• Structure tables with <thead> and <tbody>.
• Use colspan and rowspan to span cell dimensions.

15. FAQ (Frequently Asked Questions)