Learn Tables in HTML by Building Real Data Table | AI/ML with Champak Roy, Varanasi

Lesson Goal

A table is used when information belongs naturally in rows and columns.

Main idea

Use tables for real tabular data.
Do not use tables only to design page layout.
Use headings so readers understand each column.
Use semantic tags so browsers, screen readers, and search engines understand the table better.

Simple test

Ask: “Can this content be understood as rows and columns?” If yes, a table may be the right element.

Level 0 — Understand the table family

First understand the main tags.

HTML tables are built like a grid. The <table> is the outer box. Each <tr> creates a row. Inside rows, <th> creates a heading cell and <td> creates a normal data cell.

Table tag map

<table>
whole table

<tr>
table row

<th>
heading cell

<td>
data cell

Smallest useful table

<table>
  <tr>
    <th>Name</th>
    <th>Course</th>
  </tr>
  <tr>
    <td>Aarav</td>
    <td>HTML</td>
  </tr>
</table>

Level 1 — Build a marks table

Rows and columns become meaningful data.

In a marks table, each row represents one student. Each column represents one property: name, HTML score, CSS score, and result. This is exactly what a table is made for.

Preview: student marks table

Student	HTML	CSS	Result
Aarav	92	88	Pass
Meera	84	91	Pass
Kabir	71	66	Pass

Marks table HTML

<table>
  <tr>
    <th>Student</th>
    <th>HTML</th>
    <th>CSS</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>Aarav</td>
    <td>92</td>
    <td>88</td>
    <td>Pass</td>
  </tr>
  <tr>
    <td>Meera</td>
    <td>84</td>
    <td>91</td>
    <td>Pass</td>
  </tr>
</table>

Level 2 — Add caption, thead, tbody, and tfoot

Now make the table more meaningful.

A good table is not only visible; it is understandable. Use caption for the table title, thead for header rows, tbody for main data, and tfoot for totals or summary rows.

Useful table parts

caption: table title
thead: heading section
tbody: data section
tfoot: summary section

Why this matters

These tags help structure the table clearly. They also make styling and accessibility easier.

Preview: semantic table

Course Progress Report
Topic	Classes	Status
HTML Basics	3	Completed
HTML Tables	2	Running
Total Topics		2

Semantic table HTML

<table>
  <caption>Course Progress Report</caption>

  <thead>
    <tr>
      <th>Topic</th>
      <th>Classes</th>
      <th>Status</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>HTML Basics</td>
      <td>3</td>
      <td>Completed</td>
    </tr>
    <tr>
      <td>HTML Tables</td>
      <td>2</td>
      <td>Running</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total Topics</td>
      <td>2</td>
    </tr>
  </tfoot>
</table>

Level 3 — Merge cells using colspan and rowspan

Some tables need cells that cover more space.

Use colspan when one cell should stretch across multiple columns. Use rowspan when one cell should stretch across multiple rows.

Visual idea of merging

colspan="2"

Cell

rowspan="2"

Cell

Preview: weekly timetable

Weekly Coding Timetable
Day	Time	Topic
Monday	11:00 AM	HTML Table Basics
Monday	12:00 PM	Practice Questions
Sunday	Test, revision, doubt solving, and mini project

colspan and rowspan example

<table>
  <caption>Weekly Coding Timetable</caption>
  <tr>
    <th>Day</th>
    <th>Time</th>
    <th>Topic</th>
  </tr>
  <tr>
    <td rowspan="2">Monday</td>
    <td>11:00 AM</td>
    <td>HTML Table Basics</td>
  </tr>
  <tr>
    <td>12:00 PM</td>
    <td>Practice Questions</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td colspan="2">Test, revision, doubt solving, and mini project</td>
  </tr>
</table>

Level 4 — Style and make tables responsive

A table must be readable on desktop and mobile.

Good table styling uses readable spacing, clear borders, strong heading colors, and enough contrast. For small screens, wrap the table inside a scroll container so the page does not break.

Final responsive product comparison table

HTML Course Package Comparison
Plan	Best For	Includes	Support
Starter	Beginners	HTML basics, tags, links, images	Email
Builder	Project learners	Tables, forms, layout, mini projects	WhatsApp guidance
Mastery	Serious students	HTML, CSS, JavaScript, deployment	WhatsApp + Zoom
Choose the plan according to your current confidence and practice time.

Good styling

Use border-collapse: collapse.
Add enough padding.
Make th visually different.
Use zebra rows when many rows are present.

Responsive rule

Put the table inside a wrapper with overflow-x:auto. This allows horizontal scrolling on small screens.

Final responsive table code

<div class="table-wrapper">
  <table class="course-table">
    <caption>HTML Course Package Comparison</caption>
    <thead>
      <tr>
        <th>Plan</th>
        <th>Best For</th>
        <th>Includes</th>
        <th>Support</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Starter</td>
        <td>Beginners</td>
        <td>HTML basics, tags, links, images</td>
        <td>Email</td>
      </tr>
      <tr>
        <td>Builder</td>
        <td>Project learners</td>
        <td>Tables, forms, layout, mini projects</td>
        <td>WhatsApp guidance</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
.table-wrapper{
  overflow-x:auto;
  border:1px solid #efdfb2;
  border-radius:16px;
}

.course-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}

.course-table caption{
  text-align:left;
  font-weight:900;
  padding:12px 14px;
  background:#fff7ea;
}

.course-table th,
.course-table td{
  border:1px solid #efdfb2;
  padding:12px 14px;
  text-align:left;
}

.course-table th{
  background:#fff4d6;
}

.course-table tbody tr:nth-child(even){
  background:#fffaf0;
}
</style>

Level 5 — Table accessibility and mistakes to avoid

Readable for humans, meaningful for assistive tools.

Avoid

Using tables to create page layout.
Leaving table headings empty.
Making very wide tables without a scroll wrapper.
Using tiny text or low-contrast colors.

Prefer

Use caption for the table purpose.
Use th for headings.
Use scope="col" or scope="row" where useful.
Keep data consistent in every row.

Accessible heading scope example

<table>
  <caption>Monthly Attendance</caption>
  <tr>
    <th scope="col">Student</th>
    <th scope="col">Present Days</th>
    <th scope="col">Absent Days</th>
  </tr>
  <tr>
    <th scope="row">Aarav</th>
    <td>24</td>
    <td>2</td>
  </tr>
</table>

Practice Challenge

Try building these tables yourself.

Challenge 1: Make a 5-row student marks table with columns: Name, HTML, CSS, JavaScript, Total.

Show idea

Use one header row with th, then five data rows with td.

Challenge 2: Create a weekly class timetable and use rowspan for a day that has two classes.

Show idea

Put rowspan="2" on the day cell and create two time/topic rows.

Challenge 3: Create a product comparison table with a responsive wrapper.

Show idea

Wrap the table in <div class="table-wrapper"> and set overflow-x:auto.

Final Summary

You learned how to create tables that are structured, readable, styled, and mobile-friendly.

What you learned

table creates the table.
tr creates a row.
th creates a heading cell.
td creates a data cell.
caption, thead, tbody, and tfoot make the table semantic.
colspan and rowspan merge cells.
A scroll wrapper keeps wide tables usable on mobile.

Best next step

Build a real course timetable, a fee structure table, and a student result table. Tables become easy only when you create them repeatedly.

Learn Tables in HTML by Building Real Data Tables

Lesson Goal

Main idea

Simple test

Level 0 — Understand the table family

Level 1 — Build a marks table

Level 2 — Add caption, thead, tbody, and tfoot

Useful table parts

Why this matters

Level 3 — Merge cells using colspan and rowspan

Level 4 — Style and make tables responsive

Good styling

Responsive rule

Level 5 — Table accessibility and mistakes to avoid

Avoid

Prefer

Practice Challenge

Final Summary

What you learned

Best next step