Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Span Table Rows and Columns

So far we’ve only worked with simple tables, but tables can get very complicated. One column can span more than one row, or one row can span more than one column. Look at a complex table.

A Big, Bad Complex Table

The dotted lines aren’t part of the table. They are there to help you see how the table is still made up of grids even though some cells span more than one row or one column.

Notice the first table cell with this this background color. Notice how that table cell spans the first two columns. The dotted line shows where the two individual columns are located.

When spanning two columns like this, the end of the cell must always stop where the other cells align. In other words, I couldn’t have stopped the first cell from spanning the two columns in the middle of the second column, it must go to the end of the column. The same applies to spanning rows.

Below is the same table image again, with explanations to the right. I’m repeating the table image so you can view it all on one screen (unless you're viewing this page on a small screen, of course). No extra charge for my thoughtfulness!

The first table cell spans two columns.

The next table cell, in the third column, spans all four rows of the table.

In the second row, we have two cells that span no other columns or rows, but since column three spans all four rows we no longer have to code a cell in the third column (it’s already coded in).

In the third row, we have single cell again, and then a cell that spans two rows.

Finally, in the fourth row, there is only one table cell left to code because the middle cell in the third row spans two rows, and the third column spans all four rows.

Clear as mud?

Hopefully, the color coding I added for each cell in the explanation matches the cell colors in the table image on your device like it does mine. If not, go stand in the corner until a spider crawls up your leg, then run outside and holler catfish.

The HTML

Here's the code to that table in case you want to download it to study or play around with it.

<table>

<tr>

<td colspan="2">

Columns 1 & 2, Row 1

</td>

<td rowspan="4">

Column 3, Rows 1, 2, 3, & 4

</td></tr>

<tr><td>

Column 1, Row 2

</td><td>

Column 2, Row 2

</td></tr>

<tr><td>

Column 1, Row 3

</td><td rowspan="2">

Column 2, Rows 3 & 4

</td></tr>

<tr><td>

Column 1, Row 4

</td></tr></table>

You probably won’t have to build a table that complex. The main thing to note is how the rowspan and colspan attributes work. Unless you have some experience building tables, you may want to practice with some simple tables and first.

Briefly though, a rowspan attribute is used to have a column span more than one row; and a colspan attribute is used to have a row span more than one column. You can see how they’re coded in the code for the above table.

When making complex tables (or even simple tables) sometimes things go wrong, even for well-oiled webmasters. It can be hard to find what went wrong, even for extra-greasy webmasters. Adding a temporary border to the table can help identify where our code has gone wrong. Here's how...

If your page is written in HTML prior to HTML5, just add:

border="2"

…to the table tag. You may have to temporarily remove any table style code for the border to show.

If your page is written in HTML5, add:

.borderTest td {border-collapse: collapse; border: 2px solid black;}

…to an embedded or external style sheet, then add:

class="borderTest"

…to your opening table tag.

And with that, I’m going to "table" this tutorial.