Colspan and Rowspan in HTML

In HTML, many attributes help in developing the web page, including "colspan" and "rowspan", which are HTML attributes used inside the <th> and <td> tags. The "colspan" and "rowspan" are used to control the layout and span of table cells.

Before delving into these HTML attributes, let us first understand HTML tables to properly understand the use of "colspan" and "rowspan".

In HTML, tables are used to organize data on web pages in a structured way in the form of rows and columns. A table is a useful tool for presenting data in a clear and organized manner, which helps in finding or comparing information easily.

We can create a table in HTML using the following table tags:

<table>: This tag is used to define a table.
<th>: This tag is for the table header, which is used to define the header cell of the table.
<tr>: This tag is for table row, which is used to define the row within the table.
<td>: This tag is for table data, which is used to define the cell within the row that holds the data.
<caption>: This tag is used to define what the table is about.

Example to Create a Basic Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creating a table</title>
</head>
<body>
    <h1> Example of creating a table </h1>
    <table border = "1">
        <caption> Student Record Table </caption>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Subject</th>
            <th>Marks</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Krishna</td>
            <td>Sanskrit</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Sanjay</td>
            <td>English</td>
            <td>81</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Prerna</td>
            <td>Hindi</td>
            <td>96</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Anirudh</td>
            <td>Science</td>
            <td>75</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Kavya</td>
            <td>English</td>
            <td>90</td>
        </tr>
</body>
</html>

Output:

As you can see in the output below, the "Student Record" table has been successfully created.

You now know about HTML tables and how to create them. Let us understand the "colspan" and "rowspan" attributes.

The "colspan" and "rowspan" attributes are used to span a table cell. It is essential to know that these attributes are defined inside the <th> and <td> tags.

Need to Use the "Colspan" and "Rowspan" Attributes

The "colspan" and "rowspan" attributes are used to enhance the layout of HTML tables.
You can use these attributes when you need more space for data in rows and columns.
You can use these attributes in grouping similar categories of data in a table for easy understanding.
You can use these attributes in creating complex layouts, for example, grids, calendars, etc.

Colspan:

The "colspan" attribute is used to specify the number of columns a cell should span horizontally, meaning it merges multiple columns in the same row into one cell.

Example 1 to Demonstrate the "Colspan" Attribute:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Example 1 of Colspan Attribute </title>
</head>
<body>
    <h1> Example 1 of "colspan" Attribute </h1>
    <table border="2">
        <caption> Employee Details Table </caption>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th colspan="2">Job Role (Merged Cell)</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>100</td>
            <td>Shakti</td>
            <td colspan="2">Chief Architect (Merged Cell)</td>
            <td>1,00,000</td>
        </tr>
        <tr>
            <td>101</td>
            <td>Reyansh</td>
            <td colspan="2">Product Manager (Merged Cell)</td>
            <td>85,000</td>
        </tr>
        <tr>
            <td>102</td>
            <td>Abhi</td>
            <td colspan="2">Software Engineer (Merged Cell)</td>
            <td>60,000</td>
        </tr>
        <tr>
            <td>103</td>
            <td>Kartik</td>
            <td colspan="2">Senior Software Engineer (Merged Cell)</td>
            <td>80,000</td>
        </tr>
    </table>
</body>
</html>

Output:

Example 2 to Demonstrate the "Colspan" Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Example 2 of Colspan Attribute </title>
</head>
<body>
    <h1> Example 2 of "colspan" Attribute </h1>
    <table border="2">
        <caption> College Student Details Table </caption>
        <tr>
            <th>Id</th>
            <th colspan="3">Full Name (Merged Cell)</th>
            <th>Branch</th>
            <th>Branch Code</th>
        </tr>
        <tr>
            <td>01</td>
            <td colspan="3">Amir (Merged Cell)</td>
            <td >CS</td>
            <td>001</td>
        </tr>
        <tr>
            <td>02</td>
            <td colspan="3">Raj (Merged Cell)</td>
            <td>CS</td>
            <td>001</td>
        </tr>
        <tr>
            <td>03</td>
            <td colspan="3">Shifa (Merged Cell)</td>
            <td>ECE</td>
            <td>002</td>
        </tr>
        <tr>
            <td>04</td>
            <td colspan="3">Heena (Merged Cell)</td>
            <td>IT</td>
            <td>006</td>
        </tr>
    </table>
</body>
</html>

Output:

Rowspan:

The "rowspan" attribute is used to define the number of rows that a cell should span vertically, which means it merges multiple rows into one cell in the same column.

Example 1 to Demonstrate the "Rowspan" Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Example 1 of Rowspan Attribute </title>
</head>
<body>
    <h1> Example 1 of "rowspan" Attribute </h1>
    <table border="1">
        <caption> Electronic Devices Table</caption>
        <tr>
            <th>Device Id</th>
            <th>Device Name</th>
            <th>Device characterstics</th>
            <th>Price per piece</th>
        </tr>
        <tr>
            <td>111</td>
            <td>Refrigerator</td>
            <td rowspan="2">Color = Silver, Quantity = 1 (Merged Cell)</td>
            <td>45,000</td>
        </tr>
        <tr>
            <td>222</td>
            <td>Air Conditioner</td>
            <td>55,000</td>
        </tr>
        <tr>
            <td>333</td>
            <td>Microwave Oven</td>
            <td rowspan="2">Color = Black, Quantity = 2 (Merged Cell)</td>
            <td>27,000</td>
        </tr>
        <tr>
            <td>444</td>
            <td>Clothes Iron</td>
            <td>6,000</td>
        </tr>
    </table>    
</body>
</html>

Output:

Example 2 to Demonstrate the "Rowspan" Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Example 2 of Rowspan Attribute </title>
</head>
<body>
    <h1> Example 2 of "rowspan" Attribute </h1>
    <table border="6">
        <caption> Harry Potter Novel Series Table </caption>
        <tr>
            <th>Book Id</th>
            <th>Book Name</th>
            <th>Book Details</th>
            <th>Book price</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Harry Potter and the Philosopher's Stone</td>
            <td rowspan="7">Author = J.K. Rowling, Publisher = Bloomsbury Publishing (Merged Cell)</td>
            <td rowspan="7">2,400 (Merged Cell)</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Harry Potter and the Chamber of Secrets</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Harry Potter and the Prisoner of Azkaban</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Harry Potter and the Goblet of Fire</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Harry Potter and the Order of the Phoenix</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Harry Potter and the Half-Blood Prince</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Harry Potter and the Deathly Hallow</td>
        </tr>
    </table>    
</body>
</html>

Output:

Conclusion

In this article, you have understood the HTML table, HTML table tags, and how to create an HTML table. You have learned about "colspan" and "rowspan" HTML attributes, their needs, and examples to demonstrate their use.

Next TopicHTML Align Center

← prev next →