Table Colspan And Rowspan In HTML - Dot Net Tutorials

Trang chủ » Html Table Rowspan Colspan Examples » Table Colspan And Rowspan In HTML - Dot Net Tutorials

Có thể bạn quan tâm

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 Colspan and Rowspan in HTML with Examples

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.

Table Colspan and Rowspan in HTML with Examples

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.

dotnettutorials 1280x720Dot Net Tutorials

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.

Từ khóa » Html Table Rowspan Colspan Examples