Tables and Rowspan

Rowspan is a feature of HTML that is useful when we want a column in a multiple row table to extend downward into the next row.

When used properly with the colspan attribute, we can create some interesting table layouts for our data.

2 Row 2 Column Table

In this example notice than only one column definition is provided on the second row. The first column on the second row is treated as if it doesn't exist, because column 1 on row 1 occupies its position.

The rain in spain falls mainly on the plain Row 1 Column 1 (Rowspan=2)	The rain in spain falls mainly on the plain Row 1 Column 2 (Rowspan=1)
	The rain in spain falls mainly on the plain Row 2 Column 1 (Rowspan=1)

HTML

CSS

table.demo1 {
max-width: 100%;
margin: 0 auto}
td  {
vertical-align: top; 
padding: 10px;
border: solid #000000 2px
}

2 Row 3 Column Table

This example shows a 2 row 3 column table.

Because the first column on the first row spans into what would be the first column on the second row, only one column definition is used on the second row.

The third column definition on the second row is omitted because we want the one existing column to be 2 columns wide.

Clear as MUD! I know, but check the code.

The rain in spain falls mainly on the plain Row 1 Column 1 Rowsp=2	The rain in spain falls mainly on the plain Row 1 Column 2 Rowsp=1	The rain in spain falls mainly on the plain Row 1 Column 3 Rowsp=1
	The rain in spain falls mainly on the plain Row 2 Column 1 Rowsp=1

The HTML without text same CSS:

Tables and Rowspan

2 Row 2 Column Table

HTML

CSS

2 Row 3 Column Table

The HTML without text same CSS:

Free Tools We Recommend