HTML Tables, CBSE Class 10 ICT Complete Tutorial with Examples

HTML tables are used to organize data in rows and columns on a web page. Tables are one of the most important topics in CBSE Class 10 ICT and are frequently tested in both theory and practical exams. This tutorial covers everything you need to know.

Basic Table Structure

An HTML table is created using four main tags:

Tag	Purpose
<table>	Creates the table container
<tr>	Creates a table row
<th>	Creates a header cell (bold and centered by default)
<td>	Creates a data cell

Your First Table

<table border="1">
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Aman</td>
        <td>10A</td>
        <td>85</td>
    </tr>
    <tr>
        <td>Priya</td>
        <td>10B</td>
        <td>92</td>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>10A</td>
        <td>78</td>
    </tr>
</table>

Output:

Name	Class	Marks
Aman	10A	85
Priya	10B	92
Rahul	10A	78

Table Tag Attributes

The <table> tag supports several important attributes:

Attribute	Purpose	Example
border	Border thickness in pixels	border="1"
width	Table width in pixels or percentage	width="80%"
height	Table height in pixels	height="300"
cellpadding	Space between cell content and border	cellpadding="10"
cellspacing	Space between cells	cellspacing="5"
bgcolor	Background color of the table	bgcolor="lightyellow"
align	Horizontal alignment of the table	align="center"
background	Background image for the table	background="bg.jpg"

Cellpadding vs Cellspacing

This is a very common exam question. Understanding the difference is important:

• Cellpadding is the space between the cell content and the cell border (inside the cell)
• Cellspacing is the space between two adjacent cells (between cells)

<!-- Table with cellpadding and cellspacing -->
<table border="1" cellpadding="15" cellspacing="5">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Exam tip: Cellpadding = padding inside the cell. Cellspacing = spacing between cells. Think of it as "pad inside, space between."

Row and Cell Attributes

<tr> Tag Attributes

Attribute	Purpose	Values
align	Horizontal alignment of row content	left, center, right
valign	Vertical alignment of row content	top, middle, bottom
bgcolor	Background color of the row	Color name or hex code

<td> and <th> Tag Attributes

Attribute	Purpose	Values
align	Horizontal alignment	left, center, right
valign	Vertical alignment	top, middle, bottom
bgcolor	Background color	Color name or hex code
width	Cell width	Pixels or percentage
height	Cell height	Pixels
colspan	Span across columns	Number
rowspan	Span across rows	Number

Colspan and Rowspan

Colspan (Column Span)

colspan makes a cell span across multiple columns.

<table border="1" cellpadding="8">
    <tr>
        <th colspan="3">Student Report Card</th>
    </tr>
    <tr>
        <th>Subject</th>
        <th>Max Marks</th>
        <th>Marks Obtained</th>
    </tr>
    <tr>
        <td>Mathematics</td>
        <td>100</td>
        <td>85</td>
    </tr>
    <tr>
        <td>Science</td>
        <td>100</td>
        <td>90</td>
    </tr>
    <tr>
        <td colspan="2">Total</td>
        <td>175</td>
    </tr>
</table>

In this example, "Student Report Card" spans all 3 columns, and "Total" spans 2 columns.

Rowspan (Row Span)

rowspan makes a cell span across multiple rows.

<table border="1" cellpadding="8">
    <tr>
        <th>Day</th>
        <th>Period 1</th>
        <th>Period 2</th>
    </tr>
    <tr>
        <td rowspan="2">Monday</td>
        <td>English</td>
        <td>Maths</td>
    </tr>
    <tr>
        <td>Science</td>
        <td>Hindi</td>
    </tr>
    <tr>
        <td rowspan="2">Tuesday</td>
        <td>Maths</td>
        <td>English</td>
    </tr>
    <tr>
        <td>Hindi</td>
        <td>Science</td>
    </tr>
</table>

Here, "Monday" spans 2 rows, and "Tuesday" spans 2 rows.

Combined Colspan and Rowspan

<table border="1" cellpadding="10" width="500">
    <tr>
        <th colspan="4" bgcolor="lightblue">Exam Results 2026-27</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>English</th>
        <th>Maths</th>
        <th>Science</th>
    </tr>
    <tr>
        <td>Aman</td>
        <td>85</td>
        <td>90</td>
        <td rowspan="2">Practical Pending</td>
    </tr>
    <tr>
        <td>Priya</td>
        <td>92</td>
        <td>88</td>
    </tr>
    <tr>
        <td colspan="4" align="center">
            <i>Results are subject to verification</i>
        </td>
    </tr>
</table>

Table Caption

The <caption> tag adds a title above the table:

<table border="1">
    <caption>Student Marks List</caption>
    <tr>
        <th>Name</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Aman</td>
        <td>85</td>
    </tr>
</table>

Nested Tables

You can place a table inside another table:

<table border="1" cellpadding="10">
    <tr>
        <td>
            <h3>Section A</h3>
            <table border="1">
                <tr>
                    <td>Aman</td>
                    <td>85</td>
                </tr>
                <tr>
                    <td>Priya</td>
                    <td>92</td>
                </tr>
            </table>
        </td>
        <td>
            <h3>Section B</h3>
            <table border="1">
                <tr>
                    <td>Rahul</td>
                    <td>78</td>
                </tr>
                <tr>
                    <td>Sneha</td>
                    <td>88</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Complete Example: School Time Table

This is a typical practical exam question:

<!DOCTYPE html>
<html>
<head>
    <title>Class Time Table</title>
</head>
<body>
    <center>
        <h1>Class 10A - Weekly Time Table</h1>

        <table border="2" cellpadding="10" cellspacing="0" width="80%">
            <tr bgcolor="lightblue">
                <th>Day</th>
                <th>Period 1<br>(8:00-8:45)</th>
                <th>Period 2<br>(8:45-9:30)</th>
                <th>Period 3<br>(9:30-10:15)</th>
                <th>Period 4<br>(10:30-11:15)</th>
                <th>Period 5<br>(11:15-12:00)</th>
            </tr>
            <tr>
                <td bgcolor="lightyellow"><b>Monday</b></td>
                <td>English</td>
                <td>Maths</td>
                <td>Science</td>
                <td>Hindi</td>
                <td>ICT</td>
            </tr>
            <tr>
                <td bgcolor="lightyellow"><b>Tuesday</b></td>
                <td>Maths</td>
                <td>Science</td>
                <td>English</td>
                <td>SST</td>
                <td>Hindi</td>
            </tr>
            <tr>
                <td bgcolor="lightyellow"><b>Wednesday</b></td>
                <td>Science</td>
                <td>Hindi</td>
                <td>Maths</td>
                <td colspan="2" align="center">Sports</td>
            </tr>
            <tr>
                <td bgcolor="lightyellow"><b>Thursday</b></td>
                <td>Hindi</td>
                <td>English</td>
                <td>SST</td>
                <td>Science</td>
                <td>Maths</td>
            </tr>
            <tr>
                <td bgcolor="lightyellow"><b>Friday</b></td>
                <td>English</td>
                <td>Maths</td>
                <td>Hindi</td>
                <td>ICT</td>
                <td>SST</td>
            </tr>
            <tr>
                <td bgcolor="lightyellow"><b>Saturday</b></td>
                <td>Maths</td>
                <td>Science</td>
                <td colspan="3" align="center">
                    <b>Co-curricular Activities</b>
                </td>
            </tr>
        </table>
    </center>
</body>
</html>

Important Questions

Q1. Differentiate between cellpadding and cellspacing.

Cellpadding	Cellspacing
Space between cell content and cell border	Space between two adjacent cells
Inside the cell	Between cells
Increases the size of individual cells	Creates gap between cells
cellpadding="10" adds 10px padding inside each cell	cellspacing="5" adds 5px space between cells

Q2. What is the difference between <th> and <td> tags?

The <th> (table header) tag creates a header cell where text is displayed in bold and centered by default. The <td> (table data) tag creates a regular data cell where text is displayed in normal font and left-aligned by default.

Q3. Explain colspan and rowspan with examples.

colspan allows a cell to span across multiple columns horizontally. For example, colspan="3" makes the cell as wide as 3 columns combined. rowspan allows a cell to span across multiple rows vertically. For example, rowspan="2" makes the cell as tall as 2 rows combined.

Q4. Write HTML code to create a 3x3 table with a heading that spans all columns.

<table border="1" cellpadding="8">
    <tr>
        <th colspan="3">My Table</th>
    </tr>
    <tr>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
        <td>Row 1, Col 3</td>
    </tr>
    <tr>
        <td>Row 2, Col 1</td>
        <td>Row 2, Col 2</td>
        <td>Row 2, Col 3</td>
    </tr>
</table>

Quick Revision

• Tables use <table>, <tr>, <th>, <td> tags
• Cellpadding = space inside cells; Cellspacing = space between cells
• Colspan = span across columns; Rowspan = span across rows
• <th> is bold and centered; <td> is normal and left-aligned
• <caption> adds a title above the table, Always include border="1" to see the table borders, Practice the time table example, it is a very common exam question