Protected Learning Content

AICPE Gurukul content is created for learning purposes. Printing, copying and unauthorized reuse are restricted.

Chapter 7 | Structured Data

HTML Tables

Tables are used to display structured data in rows and columns. In this chapter, you will learn how to create marksheets, timetables, fee charts and comparison tables.

Start Learning Try Table

table

Creates the main table structure.

tr

Creates a table row.

th

Creates a table heading cell.

td

Creates a table data cell.

Learning Objectives

After This Chapter, You Will Understand

This chapter teaches how to present data neatly using rows and columns.

Table Basics

Understand table, tr, th and td tags.

Table Sections

Use caption, thead, tbody and tfoot.

Merge Cells

Use colspan and rowspan correctly.

Projects

Create marksheet, timetable and fee chart.

Basic Table

Creating a Simple HTML Table

A table is created using table, tr, th and td tags.

1 Basic Table Syntax

The <table> tag creates the table, <tr> creates rows, <th> creates heading cells and <td> creates data cells.

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

2 Output Example

Name	Course
Rahul	HTML
Priya	CSS

Important: Tables should be used for tabular data, not for designing full page layouts.

Professional Structure

caption, thead, tbody and tfoot

Professional tables are easier to read when divided into proper sections.

3 Table Sections

<caption> gives a title to the table.
<thead> contains heading rows.
<tbody> contains main data rows.
<tfoot> contains summary/footer rows.

Practice Task: Create a course fee table using caption, thead, tbody and tfoot.

4 Marksheet Example

Student Marksheet
Subject	Marks	Result
HTML	85	Pass
CSS	90	Pass
Project	88	Pass
Total	263	Excellent

Merge Cells

colspan and rowspan

These attributes are used to merge table cells across columns or rows.

5 colspan

The colspan attribute merges a cell across multiple columns.

<td colspan="2">Total Marks</td>

Subject	Marks
HTML	80
Total: 80

6 rowspan

The rowspan attribute merges a cell across multiple rows.

<td rowspan="2">Morning</td>

Batch	Subject
Morning	HTML
Morning	CSS

Remember: Use colspan and rowspan only when needed. Too many merged cells can make tables confusing.

Real Website Uses

Where Tables Are Used

Tables are powerful when data needs clear comparison or structure.

Marksheets

Subject-wise marks, total and result.

Timetables

Batch timings, subjects and trainers.

Fee Charts

Course fees, duration and services.

Comparisons

Plans, features and package comparison.

Try It Yourself

Create a Course Fee Table

Edit the code and click Run Code to see the output.

HTML Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Table Practice</title>
    <style>
        table{
            width:100%;
            border-collapse:collapse;
        }
        th, td{
            border:1px solid #999;
            padding:10px;
            text-align:left;
        }
        th{
            background:#06285f;
            color:white;
        }
        caption{
            font-weight:bold;
            padding:10px;
        }
    </style>
</head>
<body>

<h1>Course Fee Chart</h1>

<table>
        <caption>AICPE Popular Courses</caption>
        <thead>
            <tr>
                <th>Course Name</th>
                <th>Duration</th>
                <th>Mode</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HTML with CSS</td>
                <td>2 Months</td>
                <td>Online / Offline</td>
            </tr>
            <tr>
                <td>MS Excel</td>
                <td>1 Month</td>
                <td>Offline</td>
            </tr>
            <tr>
                <td>Tally</td>
                <td>3 Months</td>
                <td>Offline</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Contact institute for latest details.</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

Output Preview Browser result

Practice Task: Add one more course row, add a fee column and change the caption to “My Institute Course Chart”.

Common Mistakes

Mistakes Students Should Avoid

Correct table structure makes data easy to read and maintain.

Wrong Habits

Using tables for complete page layout
Forgetting tr around th or td
Mixing rows and columns incorrectly
Using colspan or rowspan unnecessarily
Creating tables without headings

Correct Habits

Use tables only for tabular data
Use th for column headings
Use caption for table title
Use thead, tbody and tfoot for large tables
Keep table data clear and simple

Professional Tip: Avoid using tables for website layout. Use CSS Flexbox and Grid for layout, which we will learn later.

Quick Revision

Remember These Points

Revise these before moving to Chapter 8.

table

The table tag creates the main table structure.

tr

The tr tag creates a table row.

th

The th tag creates a table heading cell.

td

The td tag creates a normal table data cell.

colspan

The colspan attribute merges columns.

rowspan

The rowspan attribute merges rows.

Protected Learning Content

HTML Tables

table

tr

th

td

After This Chapter, You Will Understand

Table Basics

Table Sections

Merge Cells

Projects

Creating a Simple HTML Table

1 Basic Table Syntax

2 Output Example

caption, thead, tbody and tfoot

3 Table Sections

4 Marksheet Example

colspan and rowspan

5 colspan

6 rowspan

Where Tables Are Used

Marksheets

Timetables

Fee Charts

Comparisons

Create a Course Fee Table

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Which tag creates the main table?

2. Which tag creates a table row?

3. Which tag is used for table heading cell?

4. Which attribute merges columns?

5. Which tag gives a title to a table?

Remember These Points

table

tr

th

td

colspan

rowspan