Chapter 2.2☕ 15 min read

Tables

Data ko rows aur columns mein rakho — clean aur clear.

01What are Tables in HTML?

Open Google Sheets. You see a grid — rows go left to right, columns go top to bottom. Each cell holds one piece of data. HTML tables work exactly the same way.

Tables are for displaying data that has a clear row-column relationship. Employee directories, pricing comparisons, schedules — anytime you have structured data, use a table. NOT for page layout.

📊

Spreadsheet Analogy: Think of HTML tables as web-based spreadsheets. Same grid, same row-column logic.

02The 5 Building Blocks of Tables

There are 5 building blocks of tables:

<table> — The spreadsheet itself.
<tr> — One row.
<th> — Header cell. Bold by default.
<td> — Data cell.
<caption> — Table title.

<table>
  <thead>
    <tr>
      <th>Feature</th><th>HTML</th><th>CSS</th><th>JS</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Type</td><td>Markup</td><td>Style</td><td>Program</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="4">Learn all three</td></tr>
  </tfoot>
</table>

03Types of Table Concepts

Just like spreadsheets have different features, HTML tables have different techniques.

ConceptWhat it does

📊 Basic Tabletable, tr, th, tdLearn →🔗 Colspan & Rowspancolspan="2" rowspan="2"Learn →🎨 Table Stylingborder-collapse, striped rowsLearn →♿ Accessible Tablescaption, scope, headersLearn →

04How Tables Work — Flow

Define structureDecide rows and columns

→

Add header rowUse thead with th elements

→

Fill data rowsUse tbody with td elements

CRITICAL RULE: Tables are for DATA, not LAYOUT. Use CSS Grid or Flexbox for layout.

05Exercise — Build a Comparison Table

Build a comparison table comparing 3 programming languages.

Open VS Code. Create file lang-compare.html

Use the starter code below:

<table>
  <thead>
    <tr><th>Feature</th><th>HTML</th><th>CSS</th><th>JS</th></tr>
  </thead>
  <tbody>
    <!-- 4 data rows -->
  </tbody>
  <tfoot>
    <!-- colspan footer -->
  </tfoot>
</table>

Complete these:

4 column headers in thead 4 data rows in tbody Footer with colspan caption for table title

Done — Key Points:

✅ <table> wraps the entire table
✅ <th> = header, <td> = data
✅ colspan merges columns, rowspan merges rows
✅ Tables for DATA only — CSS Grid for layout

Previous2.1 — Lists 📋 All Chapters Next Chapter2.3 — Forms →