We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

What is a Rowspan?

By Archana Khambekar
Updated: May 16, 2024
Views: 7,536
Share

The rowspan attribute is a hypertext markup language (HTML) feature that enables a table cell in a web page to extend over multiple rows. HTML is one of the main ways in which web pages are created. Typically, a web browser decodes HTML sent by a website and displays the results on a computer screen in a readable format. HTML incorporates the concept of a table to organize the contents on a page.

A table has multiple rows and columns that vertically and horizontally organize information. When displaying an HTML table, one often would like a single content item to apply or spread over multiple rows. In a table, rowspan=N – where N is a number such as 2, 3, etc. – indicates that the cell spreads over that many rows.

Consider an example where sales data is shown as a table with three column headings: the sales region, the person heading the region, and the sales amount. The South region had a change of head during the recording period; the respective amounts are to be attributed to both people. The following code achieves this.

<html>
<table border="1">

<tr>
<th>Region</th>
<th>Head</th>
<th>Sales</th>
</tr>

<tr>
<td>East</td>
<td>Lewis</td>
<td>$2,100</td>
</tr>

<tr><td rowspan="2">South</td> <td>Lilian</td><td>$1,180</td></tr>

<tr> <td>Laverne</td><td>$1,300</td></tr>

<tr><td>West</td> <td>Larnoe</td><td>$1,900</td></tr>

</table>
</html>

In this example, a table is created. The headings Region, Head person, and Sales are specified followed by four rows of data. Each cell in the table is indicated by the table data (td) attribute. The data for South goes across two rows, so, by specifying rowspan=2, the word South extends across two rows. The next row has just two td attributes and not three as in all the other rows.

One can copy this code into a text file and bring it up in a browser to view the effect. Blank spaces have been added in this code to easily identify the sales heads, but they are not necessary. The following is a slightly different example where one person, Lilian, heads two regions: South and West.

<html>

<table border="1">

<tr><th>Region</th><th>Head</th><th>Sales</th></tr>

<tr><td>East</td><td>Lewis</td><td>$2,100</td></tr>

<tr><td>South</td><td rowspan="2">Lilian</td><td>$2,480</td></tr>

<tr><td>West</td> <td>$1,900</td></tr>

</table>

</html>

A web page may not need to show data in a tabular form. It could have a header such as the company name and logo, one or more menus on top or at the side, main information in the middle, and so on. In creating such a web page, a table structure often is used underneath without the reader being aware of it. To give a smooth effect, the rowspan attribute is used whenever some of the content spreads over multiple rows.

One may want to create a personal web page, for instance, that includes three columns of information: Family, Career, and Community. Each column can have a brief introduction, a photo, and details. In order to make the page look better, a band of color could be used along the right-hand side. In this case, the rowspan feature can be utilized to indicate that the band of color spans all rows.

Share
EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Discussion Comments
Share
https://www.easytechjunkie.com/what-is-a-rowspan.htm
Copy this link
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.