Merging Columns

Usually when you have a table the content of each individual table cell will be separate and can be defined separately within the appropriate th or td container. Where this is the case each row of the table will have exactly the same combined total number of th and td containers within the row. This is obvious since otherwise the table would not have the rectangular shape that tables are required to have (allowing of course for the hiding of some borders where you have empty elements).

There will be occasions where two or more columns within the same row of a table need to display the same value and where rather than displaying that value multiple times you would prefer to merge those table cells so as to display the value once across all of the columns it applied to.

We can easily merge two or more columns within the same row of the table by adding a colspan attribute to the td container. With the colspan in place that td container now extends across the specified number of columns. As such that one td now represents the number of tds that are specified within the rowspan and when you are counting the number of tds (and ths) in your row to make sure that all of the rows have the same number of elements you shoud add the number within the colspan rather than just one since this td actually takes up that many columns and it is the number of columns that are in the table that must always be the same.

Let's look at an example:

<td>row 1, Col 1</td>
<td colspan="2">row 1, Col 2 and 3</td>
<td>row 2, Col 1</td>
<td>row 2, Col 2</td>
<td>row 2, Col 3</td>

As you can see our table still contains three columns of data and in the second row each of these columns is separate. The first row of data in this table onnly contains two entries though as the second entry will fill both the second and third columns of the table as the td spans the two columns.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow