What is the “rowspan” Attribute and How to Use With the “td” Element in HTML?

In HTML, the “rowspan” is an attribute that can be utilized while making tables. It is commonly used to merge multiple adjacent cells in a vertical direction. It can be used to create complex table designs while adding visual interest for the user. By using it, the developer can reduce HTML code and improve table readability. Moreover, the “rowspan” attribute can help organize a table by grouping multiple cells.

This guide demonstrates what is the “rowspan” attribute and how to use it with the “td” element.

What is a “rowspan” Attribute?

The “rowspan” attribute is utilized to merge multiple cells in a vertical direction. It can be accessed as “rowspan = value”, where the “value” is the number of rows that needs to be merged in a vertical direction. It is beneficial for enhancing user readability and displaying complex data in a more user-appealing manner.

What is a “td” Element?

The “td” or table data element is used to define a cell within an HTML table. It is mostly used in conjunction with other table HTML elements like “<tr>”, “<th>”, “<table> to create table content. It can also be utilized with attributes like “colspan” and “rowspan” to add extra designing features, reduce complexity and improve readability factor, etc. It is utilized in the HTML file using the “<td>” tag.

How to Use the “rowspan” Attribute With the “td” Element?

For a better demonstration of the relation between the “rowspan” attribute and the “td” element. Let us walk through a practical example by following the below step-by-step guide:

Step 1: Creation of Table in HTML

First, create a table with the help of the “<table>” tag. Inside it add multiple “<tr>” tags that insert the rows in the table and utilize the “<td>” tag to create cells:

In the above code snippet:

First, the five rows have been created and some dummy data is provided to each cell.
Next, the “table” element is selected and set the “collapse” value to the CSS “border-collapse” property.
After that, the “border” and “padding” properties are utilized to enhance user visibility and create a user-appealing effect.

After the execution of the code, the table appears like this:

The above output displays that the table is created and styled.

Step 2: Using the “rowspan” Attribute with the “td” Element

The “rowspan” attribute merges adjacent cells in the vertical direction. It is utilized with the “<td>” element/tag. The attribute takes a number as a value and tells how many cells get merged in a vertical direction. The upcoming adjacent cell must have one cell less in quantity, and that space gets filled by the “rowspan” attribute as shown below:

<body>

<table>

<tr>

<th>Emp.id</th>

<th>Employee Name</th>

<th>Salary</th>

</tr>

<tr>

<td>1</td>

<td>John</td>

<td>160,000</td>

</tr>

<tr>

<td>2</td>

<td>Joseph</td>

<td rowspan="2">120,000</td>

</tr>

<tr>

<td>3</td>

<td>Angela</td>

</tr>

<tr>

<td>4</td>

<td>Scarlet</td>

<td>80,000</td>

</tr>

</table>

</body>

In the above code:

The “rowspan” is attached with the employee having a “Salary” td element.
The value of “2” is provided to the “rowspan” attribute that sets the same data in both adjacent cells as shown below:

The output illustrates that the two cells are merged and the readability for the user is now enhanced.

Conclusion

The “rowspan” attribute works with the “td” element to merge multiple adjacent cells in the vertical direction. The attribute takes a number as a value and tells how many cells get merged. It is utilized where the same data is provided to multiple cells. This blog has demonstrated what “rowspan” is and how to use it with the “td” element in HTML.