COURSE SYLLABUS

1. Introduction to HTML

Introduction to HTML HTML Document Structure How HTML Works HTML vs CSS vs JavaScript

2. Basic HTML

Basic HTML HTML Elements HTML Attributes Headings Paragraphs Comments Line Breaks Horizontal Rules

3. HTML Tags

4. Text Formatting

Text Formatting Text Formatting Elements Bold & Strong Italic & Emphasis Underline & Highlight Subscript & Superscript Quotations Abbreviations Special Characters

5. Links & Media

Links & Media Hyperlinks Link Attributes Images Image Attributes Audio Video Iframes

6. Lists & Tables

Lists & Tables Unordered Lists Ordered Lists Description Lists Nested Lists Tables Table Headers Colspan & Rowspan

7. HTML Forms

Forms Form Basics Form Attributes Input Types Labels Text Area Select & Option Radio Buttons Check Boxes Buttons Form Validation

8. Semantic HTML

Semantic HTML Semantic Elements Header Nav Main Section Article Aside Footer HTML Page Layout

9. HTML5 Features

HTML5 Features HTML5 Introduction New Input Types Audio & Video Canvas SVG Progress & Meter Details & Summary Data Attributes

10. Advanced HTML

Advanced HTML Global Attributes Meta Tags Viewport HTML Accessibility ARIA Basics HTML Best Practices SEO-Friendly HTML

HTML Colspan and Rowspan

The colspan and rowspan attributes allow HTML table cells to span across multiple columns or rows.

1. Introduction

Normally, one table cell occupies one column and one row. Sometimes a table requires a cell to cover multiple columns or multiple rows.

HTML provides two important attributes for this purpose:

Attribute	Purpose
`colspan`	Allows a cell to span across multiple columns.
`rowspan`	Allows a cell to span across multiple rows.

2. What is colspan?

The colspan attribute specifies how many columns a table cell should occupy.

<td colspan="2">
    Combined Cell
</td>

In this example, the cell occupies the space of two columns.

3. Basic colspan Example

<table>

    <tr>
        <th colspan="2">
            Student Information
        </th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
    </tr>

</table>

Output:

Student Information
John	HTML

4. colspan="3"

A cell can span across three columns by using colspan="3".

<table>

    <tr>
        <th colspan="3">
            Course Details
        </th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>2 Months</td>
        <td>Beginner</td>
    </tr>

</table>

Output:

Course Details
HTML	2 Months	Beginner

5. colspan with Table Headers

The colspan attribute can be used with <th> elements.

<tr>
    <th colspan="3">
        Student Performance
    </th>
</tr>

6. colspan with Table Data Cells

The colspan attribute can also be used with <td> elements.

<tr>

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

    <td>
        50000
    </td>

</tr>

7. Practical colspan Example

<table>

    <tr>
        <th colspan="3">
            Product Information
        </th>
    </tr>

    <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>2</td>
        <td>100000</td>
    </tr>

</table>

Result:

Product Information
Product	Quantity	Price
Laptop	2	100000

8. What is rowspan?

The rowspan attribute specifies how many rows a table cell should occupy.

<td rowspan="2">
    Combined Cell
</td>

In this example, the cell occupies the space of two rows.

9. Basic rowspan Example

<table>

    <tr>
        <th rowspan="2">
            Course
        </th>

        <td>HTML</td>
    </tr>

    <tr>
        <td>CSS</td>
    </tr>

</table>

Output:

Course	HTML
Course	CSS

10. rowspan="3"

A cell can span across three rows using rowspan="3".

<table>

    <tr>
        <th rowspan="3">
            Frontend
        </th>

        <td>HTML</td>
    </tr>

    <tr>
        <td>CSS</td>
    </tr>

    <tr>
        <td>JavaScript</td>
    </tr>

</table>

Output:

Frontend	HTML
	CSS
	JavaScript

11. rowspan with th

The rowspan attribute can be used with a header cell.

<tr>

    <th rowspan="2">
        Student
    </th>

    <th>Theory</th>
    <th>Practical</th>

</tr>

12. rowspan with td

The rowspan attribute can also be used with a normal data cell.

<tr>

    <td rowspan="2">
        C# Course
    </td>

    <td>Beginner</td>

</tr>

<tr>

    <td>Advanced</td>

</tr>

13. Combining colspan and rowspan

Both attributes can be used in the same table when a complex header structure is required.

<table>

    <tr>

        <th rowspan="2">
            Course
        </th>

        <th colspan="2">
            Performance
        </th>

    </tr>

    <tr>

        <th>Theory</th>
        <th>Practical</th>

    </tr>

    <tr>

        <td>HTML</td>
        <td>85</td>
        <td>90</td>

    </tr>

</table>

Output:

Course	Performance
Course	Theory	Practical
HTML	85	90

14. Student Performance Table

This is a common real-world example of using both rowspan and colspan.

<table>

    <tr>

        <th rowspan="2">
            Student
        </th>

        <th colspan="2">
            Marks
        </th>

        <th rowspan="2">
            Result
        </th>

    </tr>

    <tr>

        <th>Theory</th>
        <th>Practical</th>

    </tr>

    <tr>

        <td>John</td>
        <td>85</td>
        <td>90</td>
        <td>Pass</td>

    </tr>

</table>

15. colspan in Footer

The colspan attribute is frequently used in table summary or footer rows.

<tfoot>

    <tr>

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

        <td>
            105000
        </td>

    </tr>

</tfoot>

16. colspan with thead and tbody

<table>

    <thead>

        <tr>
            <th colspan="3">
                Employee Details
            </th>
        </tr>

        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>John</td>
            <td>Development</td>
            <td>60000</td>
        </tr>

    </tbody>

</table>

17. rowspan in Employee Data

<table>

    <tr>

        <th>Department</th>
        <th>Employee</th>
        <th>Role</th>

    </tr>

    <tr>

        <th rowspan="2">
            Development
        </th>

        <td>John</td>
        <td>Developer</td>

    </tr>

    <tr>

        <td>David</td>
        <td>Senior Developer</td>

    </tr>

</table>

18. colspan with Pricing Table

<table>

    <tr>

        <th colspan="4">
            Course Pricing
        </th>

    </tr>

    <tr>

        <th>Course</th>
        <th>Duration</th>
        <th>Mode</th>
        <th>Price</th>

    </tr>

    <tr>

        <td>HTML</td>
        <td>2 Months</td>
        <td>Online</td>
        <td>15000</td>

    </tr>

</table>

19. Complex Table Example

<table>

    <thead>

        <tr>

            <th rowspan="2">
                Course
            </th>

            <th colspan="3">
                Performance
            </th>

            <th rowspan="2">
                Result
            </th>

        </tr>

        <tr>

            <th>Theory</th>
            <th>Practical</th>
            <th>Project</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th scope="row">
                HTML
            </th>

            <td>85</td>
            <td>90</td>
            <td>95</td>
            <td>Pass</td>

        </tr>

        <tr>

            <th scope="row">
                CSS
            </th>

            <td>80</td>
            <td>88</td>
            <td>92</td>
            <td>Pass</td>

        </tr>

    </tbody>

</table>

Output:

Course	Performance			Result
Course	Theory	Practical	Project	Result
HTML	85	90	95	Pass
CSS	80	88	92	Pass

20. How colspan Works

When you use colspan="3", the cell takes the horizontal space of three normal cells.

<tr>

    <td colspan="3">
        One cell across three columns
    </td>

</tr>

Concept:

One Cell Across Three Columns

21. How rowspan Works

When you use rowspan="3", the cell takes the vertical space of three normal cells.

<tr>

    <td rowspan="3">
        One cell across three rows
    </td>

    <td>Row 1</td>

</tr>

<tr>
    <td>Row 2</td>
</tr>

<tr>
    <td>Row 3</td>
</tr>

22. Important Rule for colspan and rowspan

When using colspan or rowspan, the number of cells in the affected rows must be planned carefully. Otherwise, the table structure may become incorrect.

Example: If one cell uses colspan="3", that cell already occupies three columns. Do not add three more cells in the same row expecting the table to have the same original column count.

23. Common Mistakes

Using an incorrect colspan value.
Using an incorrect rowspan value.
Adding too many cells after a spanning cell.
Removing required cells from other rows.
Creating a table with inconsistent column structure.
Using spans when a simple table would be clearer.

24. Best Practices

Use colspan for horizontal grouping.
Use rowspan for vertical grouping.
Use clear header structures for complex tables.
Use scope where appropriate for header relationships.
Keep spanning structures easy to understand.
Test complex tables carefully before using them in production.

25. Practice Task

Create an HTML table containing:

A heading spanning three columns.
A header spanning two rows.
A student performance section using both attributes.
A footer using colspan.
A department column using rowspan.
A table with thead, tbody, and tfoot.
Proper column and row headers.

26. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>Colspan and Rowspan Example</title>

    <style>

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 10px;
        }

        th {
            background-color: #f2f2f2;
        }

    </style>

</head>

<body>

    <h1>Student Performance</h1>

    <table>

        <thead>

            <tr>

                <th rowspan="2">
                    Student
                </th>

                <th colspan="3">
                    Performance
                </th>

                <th rowspan="2">
                    Result
                </th>

            </tr>

            <tr>

                <th>Theory</th>
                <th>Practical</th>
                <th>Project</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <th scope="row">
                    John
                </th>

                <td>85</td>
                <td>90</td>
                <td>95</td>
                <td>Pass</td>

            </tr>

            <tr>

                <th scope="row">
                    David
                </th>

                <td>80</td>
                <td>88</td>
                <td>92</td>
                <td>Pass</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="4">
                    Overall Status
                </td>

                <td>
                    Completed
                </td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

Summary

The colspan attribute makes a table cell span across multiple columns, while rowspan makes a cell span across multiple rows. They can be used with both <th> and <td>. These attributes are especially useful for grouped headers, reports, schedules, student results, and other complex tabular structures. Careful planning is required to keep the number of cells consistent across the table.

← Previous: Table Headers Next: HTML Forms →