What is Row Span in HTML?

What is Row Span in HTML?

Rowspan is an attribute in HTML that set's the space any cell will take in the table row-wise. One can think of rowspan as an attribute that causes cells to merge vertically. row span in HTML is usually used when you have repetitive content in your table. For example, in the below given example, you can see that the class column has a similar value.

Instead of writing them repeating, rowspan combines all the rows of the repetitive cells into a single cell containing a single value. This way it seems more user-friendly and easy to read. The above-given table becomes much easier to understand now that we are using rowspan.

Elements that Support Rowspan

Row span in HTML is supported by following HTML Tags.

• <th>....</th> Tag
• <td>....</td> Tag

Rowspan is usually associated with cells of a table and therefore used with table elements such as td and th.

So far, only these two elements support rowspan in HTML.

Syntax

Rowspan attribute is quite easy to use. It takes a number which tells the number of rows, a cell should span or cover.

In layman terms, the value indicates, the number of cells to be merged. If you give the value as 2, then the single-cell would take space of 2 cells vertically and so on. This value is usually the repetitive data you have in your columns. The value should greater than 0 for most browsers to comprehend it.

Examples of Using Rowspan

Example 1: Rowspan example for td Tag

Now that we have learned everything about rowspan, it's time to do something exciting. We will now create a table and use rowspan in it.

For this example, we are going to re-create the table you can see above. First, we would create the above-given table in HTML.

Next, we would identify the places where we have repetitive data. As we can see above, the class is the same for all the students. So instead of repetitively writing class for students, we will simply span the row. In the above example, the class cell is getting repeated 4 times continuously. So we can say that value for rowspan in HTML is 4.

Now that we have determined which cell to span and how much value we require, we can simply span it. While If you are performing row span in HTML, then you do not need to provide the data for the cell that you are spanning again and again.

Since we have spanned the cell 4 times, we just need to give the value and data once. This makes the table look neater and easier to read (as you can see below).

Example 2: Rowspan Example for th Tag

Just like we used rowspan for td tag, let's learn how to use it with th tag. For this, we would recreate the below-given table.

As we can see above, the Passed Column is the same for all the students. So instead of repetitively writing Passed for every student, we will simply span the row heading. In the above example, the Passed cell is getting repeated 4 times continuously. In addition to that, we are using row span here in the heading, so we need to consider it as well. So the total cell we need to span or merge is 5 in this case.

Now that we have determined which cell to span and how much value we require, we can simply span it.

Simple, Isn't it?

Browsers Support for Rowspan

The row span in HTML is supported by majorly used browsers such as Chrome, Explorer, Firefox, and Safari.

Out of all the browsers, only Opera supports a value of 0 in row span in HTML. The value 0 in rowspan tells the browser to merge all cells of a column into a single one.

Learn More about Rowspan

We have explained everything about row span in HTML. If you wish to learn more about Tables or HTML Elements, then you can check the below-given links.

• Table Attributes in HTML
• HTML Elements