How to Combine Cells Horizontally in an HTML Table: Colspan

When making tables in HTML, it is sometimes necessary to combine cells horizontally across two or more columns.
When making tables in HTML, it is sometimes necessary to combine cells horizontally across two or more columns.

In an HTML table, each cell is delimited by a set of <td> and </td> tags, with the cell's contents between. If you do not add extra attributes or CSS styles within the <td> tag, the default structure is to have each cell span exactly one column.

If you need to make one or more cells span across several columns, you must (1) populate the row with fewer cells than the other rows, and (2) add the colspan=" " attribute within the <td> tag of the cell you wish to elongate.

To begin, let us take the simple example of a table with two rows and two columns (four cells). The html code looks like this:

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


Next, if you want to merge the two cells in the top row, use the colspan=" " attribute like this:

<table>
<tr><td colspan="2">stuff</td></tr>
<tr><td>stuff</td><td>stuff</td></tr>
</table>

The cell in the top row now spans two columns. Because it spans the space of two cells, there is only one td element in the first row.

You can merge cells in any area of the table, over any number of columns. One of the most useful applications of combining cells horizontally is making table headings. If your finished table has n columns, put the colspan="n" attribute in the first cell of the top row, and delete the other cells in the top row.

More by this Author


Comments 2 comments

soniacharan 5 years ago from Mumbai,INDIA

technical hub!!!

recommended for software and web developers...


smilingjimdickson profile image

smilingjimdickson 5 years ago from Too close to the moon

That's a very useful piece of info paxwill, thanx!!!

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working