What’s a Rowspan?

Print anything with Printful



HTML’s rowspan attribute allows a table cell to span multiple rows. Tables organize information vertically and horizontally. The rowspan=N attribute indicates that the cell spans N rows. It is often used to give a uniform effect when content spans multiple rows.

The rowspan attribute is a hypertext markup language (HTML) feature that allows a table cell in a web page to span multiple rows. HTML is one of the main ways web pages are created. Typically, a web browser decodes the HTML sent from a website and displays the results on a computer screen in a readable format. HTML incorporates the concept of a table for organizing content on a page.

A table has multiple rows and columns that organize information vertically and horizontally. When viewing an HTML table, you often want a single content item to span or span multiple rows. In a table, rowspan=N – where N is a number like 2, 3, etc. – indicates that the cell spans that number of rows.

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

In this example, a table is created. The Region, Manager, and Sales headers are specified followed by four lines of data. Each cell in the table is indicated by the table data attribute (td). The data for South spans two lines, so specifying rowspan=2 causes the word South to span two lines. The next line has only two td attributes and not three as in all other lines.

You can copy this code into a text file and view it in a browser to see the effect. White spaces have been added to this code to easily identify sales managers, but they are not required. The following is a slightly different example where one person, Lilian, is in charge of two regions: South and West.

It may not be necessary for a web page to display data in tabular form. It might have a header like your company name and logo, one or more menus at the top or side, main information in the center, and so on. In creating such a web page, an underlying table structure is often used without the reader being aware of it. To give a uniform effect, the rowspan attribute is used whenever some content spans multiple rows.
You might want to create a personal web page, for example, that includes three columns of information: Family, Career, and Community. Each column can have a short introduction, a photo and details. To enhance the look of the page, you can use a band of color along the right side. In this case, the extend lines function can be used to indicate that the color band extends across all lines.




Protect your devices with Threat Protection by NordVPN


Skip to content