Back to: HTML Tutorials
Table Colspan and Rowspan in HTML with Examples
In this article, I am going to discuss Table Colspan and Rowspan in HTML with Examples. Please read our previous article where we discussed Table Headers in HTML with Examples. At the end of this article, you will learn everything about HTML Table Colspan and Rowspan with Examples.
Table Colspan and Rowspan in HTML
The table Colspan allows a single table cell to span the width of multiple cells or columns. Rowspan allows a single table cell to span the height of multiple cells or rows. It is sometimes necessary for a cell to span multiple columns or rows. This could be used for a header cell to title a group of columns.
Table Colspan in HTML
We can use the colspan attribute to make a cell span multiple cols. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<p>Colspan attribute</p>
<table style="width:100%">
<tr>
<th colspan="2">Full Name</th>
<th>Age</th>
</tr>
<tr>
<td>Obama</td>
<td> Lincoln</td>
<td>28</td>
</tr>
<tr>
<td>Mark</td>
<td>Henry</td>
<td>45</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Table Rowspan in HTML
We can use the rowspan attribute to make a cell span multiple rows. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<p>Rowspan attribute</p>
<table style="width:100%">
<tr>
<th>Name</th>
<td>Obama Lincoln</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>9588444545</td>
</tr>
<tr>
<td>9744458266</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss Table Padding and Spacing in HTML with Examples. Here, in this article, I try to explain Table Colspan and Rowspan in HTML with Examples and I hope you enjoy this HTML Table Colspan and Rowspan with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.