HTML - rowspan Attribute

HTML rowspan attribute specifies the number of rows spanned by a cell or grid cell within a table or grid.

If a row spans two rows, it represents it will take up two rows in that table. It is similar to the merge cell in a spreadsheet program such as Excel. And it allows a single table cell to span the height of many cells or rows.

Syntax

<th|td rowspan="2 | 3 | 4, …" >

Applies on

Below-listed element allows the use of the HTML rowspan attribute.

Element	Description
<th>	HTML <th> tag designates the header cell for HTML tables.
<td>	HTML <td> tag designates the data cell for HTML tables.

Examples of HTML rowspan attribute

Below examples will illustrate the HTML rowspan attribute, where and how we should use this attribute!

Using rowspan attribute to merge table header cells

The output window displays a table by merging the three row table cells of first column.

<!DOCTYPE html>
<html>

<head>
   <title>The td rowspan attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h1>The th rowspan attribute</h1>
   <table>
      <tr>
         <th rowspan="3">tutorialspoint</th>
         <th>Employee</th>
         <th>Designation</th>
      </tr>
      <tr>
         <td>Aman Kumar</td>
         <td>technical content writer</td>
      </tr>
      <tr>
         <td>Vivek Kumar</td>
         <td>Developer</td>
      </tr>
   </table>
</body>

</html>

Using rowspan attribute to merge table data cells

The output window displays a table by merging the second and third row table cells of last column.

<!DOCTYPE html>
<html>

<head>
   <title>The td rowspan attribute</title>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h1>The td rowspan attribute</h1>
   <table>
      <tr>
         <th>Company</th>
         <th>Location</th>
         <th>Founder</th>
      </tr>
      <tr>
         <td>tutorialspoint</td>
         <td>hyderabad</td>
         <td rowspan="2">MD.Mohtashim</td>
      </tr>
      <tr>
         <td>tutorix</td>
         <td>Noida</td>
      </tr>
   </table>
</body>

</html>

Supported Browsers

Attribute
rowspan	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page