HTML Table Colspan & Rowspan Tutorial

Beginner Friendly Explanation with Examples

📌 What is Colspan?

Colspan is used when you want a table cell to cover multiple columns. Instead of creating many separate cells, one cell can span across columns.

Normal Table

Using Colspan

This cell covers 3 columns


<tr>
    <td colspan="3">This cell covers 3 columns</td>  
</tr>

📌 What is Rowspan?

Rowspan is used when one cell needs to cover multiple rows vertically. This is useful when a category applies to many rows.

Student	HTML
	CSS


    <tr>
        <td rowspan="2">Student</td>  
        <td>HTML</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>

📌 Colspan + Rowspan Together

You can combine both attributes to create complex table layouts. This is commonly used in marksheets, schedules, and reports.

Name	Marks
Name	HTML	CSS
Rahul	80	90


<tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
</tr>
<tr>
    <th>HTML</th>
    <th>CSS</th>
</tr>
<tr>
    <td>Rahul</td>
    <td>80</td>
    <td>90</td>
</tr>

📌 When to Use Them?

Marksheets
School Timetables
Attendance Reports
Invoice Tables
Complex Data Tables

📌 Try to make this table

Name	Details
Alice	Age	25
Alice	Location	New York
Bob	Single Cell for Bob's Info