HTML ROWSPAN - CSVeda

In HTML Tables in addition to combining columns, rows can also be combined to create common cells for a set of rows. A combined cell over multiple rows can be used to assign collective row value. For example if sales data of a company is to be shown year wise and quarter wise, HTML ROWSPAN can be combined for the range of years. To create such a table ROWSPAN attribute can be used. ROWSPAN means rows span.

HTML ROWSPAN attribute is used in Table TR tag. This attribute is used to span or extend over multiple rows to give a common text for multiple rows.

Syntax HTML ROWSPAN Attribute

HTML ROWSPAN is given in the TR tag as per the need of a table design to span a cell over some specific number of rows. The ROWSPAN attribute makes a cell span multiple rows so the attribute must be given the count of rows to be spanned.

Features of ROWSPAN Attribute

Like COLSPAN, ROWSPAN is also an attribute but for TR tag. ROWSPAN also accepts a numeric value. This value is the count of the rows to be spanned or extended by a single cell spread across multiple rows.
ROWSPAN attribute is always used in Table ROW tag <TR>. It must always be included in the opening tag. The closing tag will not be altered.
The combined rows will use other attributes to render design defined at Table level. These include background color, font style, alignment etc.
When you apply ROWSPAN in <TR> tag with count of rows to be spanned the actual number of rows should be lesser by (n-1) spanned rows. For example a table is to be displayed sales of different products of a country for 5 years and four quarters of each year. You need to set ROWSPAN attribute value 5 for each product.

Example of ROWSPAN

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<BODY >
<H3 ALIGN="CENTER">Using TABLES in Websites</H3>

<TABLE WIDTH="50%" border="1" align="center" >
<CAPTION>Sales Report</CAPTION>
<TR align="center">
<TH >Products</TH>
<TH >Year</TH>
<TH >Quarter-1</TH>
<TH >Quarter-2</TH>
<TH >Quarter-3</TH>
<TH >Quarter-4</TH>
</TR>
<TR align="center">
<TD ROWSPAN=5>Computers</TD>
<TD>2020</TD>
<TD>10</TD>
<TD>12</TD>
<TD>13</TD>
<TD>10</TD>
</TR>
<TR align="center" >
<TD>2019</TD>
<TD>14</TD>
<TD>15</TD>
<TD>17</TD>
<TD>20</TD>
</TR>
<TR align="center">
<TD>2018</TD>
<TD>10</TD>
<TD>10</TD>
<TD>20</TD>
<TD>40</TD>
</TR>
<TR align="center">
<TD>2017</TD>
<TD>35</TD>
<TD>45</TD>
<TD>40</TD>
<TD>21</TD>
</TR>
<TR align="center">
<TD>2018</TD>
<TD>20</TD>
<TD>21</TD>
<TD>25</TD>
<TD>21</TD>
</TR>
<TR align="center" >
<TD ROWSPAN=5 >Printers</TD>
<TD>2020</TD>
<TD>30</TD>
<TD>32</TD>
<TD>14</TD>
<TD>16</TD>
</TR>
<TR align="center">
<TD>2019</TD>
<TD>24</TD>
<TD>35</TD>
<TD>27</TD>
<TD>23</TD>
</TR>
<TR align="center">
<TD>2018</TD>
<TD>14</TD>
<TD>19</TD>
<TD>23</TD>
<TD>20</TD>
</TR>
<TR align="center">
<TD>2017</TD>
<TD>35</TD>
<TD>45</TD>
<TD>40</TD>
<TD>21</TD>
</TR>
<TR align="center" >
<TD>2018</TD>
<TD>10</TD>
<TD>11</TD>
<TD>15</TD>
<TD>11</TD>
</TR>
<TR align="center">
<TD ROWSPAN=5>Laptops</TD>
<TD>2020</TD>
<TD>30</TD>
<TD>42</TD>
<TD>23</TD>
<TD>50</TD>
</TR>
<TR align="center">
<TD>2019</TD>
<TD>24</TD>
<TD>35</TD>
<TD>27</TD>
<TD>26</TD>
</TR>
<TR align="center">
<TD>2018</TD>
<TD>30</TD>
<TD>40</TD>
<TD>24</TD>
<TD>42</TD>
</TR>
<TR align="center">
<TD>2017</TD>
<TD>15</TD>
<TD>25</TD>
<TD>43</TD>
<TD>22</TD>
</TR>
<TR align="center" >
<TD>2018</TD>
<TD>30</TD>
<TD>31</TD>
<TD>35</TD>
<TD>31</TD>
</TR>
</TABLE>
</BODY>
</HTML>

In the above example ROWSPAN is used to combine 5 rows for 5 years and define the product names to these combined cells.