MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 8: Tables in HTML!
Look at the classroom wall or your school diary. What is pinned on the softboard?
All of these are real-world examples of Tabular Data!
When information is arranged into clean horizontal rows and vertical columns, our eyes can compare numbers and read facts in a split second.
In this lesson, you will learn how to build clean, professional data tables using HTML!
Before writing code, let's understand how a table is constructed:
To build any basic table in HTML, you only need four core tags:
| Tag | Full Name | What It Does |
|---|---|---|
<table> | Table Container | The outer box that holds the entire table together. |
<tr> | Table Row | Creates a new horizontal row from left to right. |
<th> | Table Header | A special cell for column titles. Text is automatically bold and centered! |
<td> | Table Data | A normal cell holding regular information. Text is regular and left-aligned. |
Let's build a simple student report card table:
<tr> and ends with </tr>.<th> tags because they are column headings.<td> tags for regular numbers and text.border-collapse: collapse? 🪄By default, old HTML tables put a tiny annoying double gap between cell borders (it looks like two parallel lines around every box).
To fix this and make your table look clean and modern like a real school marksheet, developers always add this magic CSS line:
<thead>, <tbody>, <tfoot> & <caption> 🏛️When professional developers and school examination portals build large tables, they divide them into three logical sections—just like a human body has a Head, a Body, and Feet:
<caption> (The Table Title)A caption is the official title of the table. It must be placed immediately after the opening <table> tag. Screen readers for visually impaired students read the caption first so they know what the table is about!
<thead> (Table Head)Encloses the header row containing your <th> elements. If your table is printed on paper across 5 pages, modern browsers repeat <thead> at the top of every printed page!
<tbody> (Table Body)Wraps all the main rows of your data.
<tfoot> (Table Footer)Wraps the bottom row showing totals, averages, overall percentages, or remarks.
In the late 1990s (when web design was brand new), developers used <table> tags to arrange headers, sidebars, and footers on websites.
<table> when you have real tabular data (numbers, schedules, timetables, comparison lists)!<td> directly inside <table> without a <tr>You cannot drop data cells floating inside a table! They must always live inside a row (<tr>).
<th> with <thead><th> is a single cell tag (replaces <td> for headers).<thead> is a section wrapper tag that wraps an entire header <tr>.If your top header row has 4 columns (<th>), every data row underneath should also have 4 cells (<td>). If one row has only 2 cells, your table will look broken and misaligned!
<table> container tag.<tr> (Table Row) tags.<th> (Table Header) for column titles (automatically bold and centered).<td> (Table Data) for regular data cells (regular left-aligned text).border-collapse: collapse; in CSS to merge double borders into neat single lines.<caption> for the title, <thead> for headings, <tbody> for data rows, and <tfoot> for summary/totals.Test your understanding with these multiple-choice questions:
<th> and <td>?<table> to provide an accessible title?<table> tags to design a website's overall page layout?Open VS Code and create a file named my-report-card.html.
Create your own professional School Annual Examination Marksheet:
<caption> with: "Class 10 Annual Examination Marksheet 2026".<thead> with columns: Subject, Max Marks, Marks Scored, and Result.<tbody> (e.g. Maths, Science, English, Social Science).<tfoot> row calculating the Total Marks (e.g. 400) and Grand Total Scored.border-collapse: collapse; and add nice padding so the marksheet looks crisp and clean!Next Up: In Topic 8.2, we will explore Colspan & Rowspan — how to merge cells horizontally and vertically like a spreadsheet master!
In the next lesson, we will continue your web development journey with Colspan & Rowspan (Table).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Description Lists | Colspan & Rowspan |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.