How to Combine Cells Horizontally in an HTML Table: Colspan
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:
Next, if you want to merge the two cells in the top row, use the colspan=" " attribute like this:
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 HTML Table Resources
- HTML Table Generator | Code Generator and Preview
Online HTML Table Generator: Enter the number of rows and columns and the tool will output the HTML code for your table...
- How to Combine Cells Vertically in an HTML Table: Rowspan
How to combine cells in an HTML table using the rowspan=" " method.
- How to Convert an Excel Spreadsheet to an HTML Table
Two step-by-step methods for converting an Excel spreadsheet into an HTML table.
More by this Author
Embedding a calculator on your website or blog is a great way to keep visitors on your pages longer. Rather than going off-site to make a computation, your visitors can make quick calculations right on your website,...
In HTML, the cells of a tables are delimited by and tags, with the cell's contents between. Without extra attributes or CSS styles within the tag, the default table structure makes each cell span exactly one row. ...
Haripriya -- yes, it's all one word! Have you heard of Haripriya? The mononymous (single-named) film star is one of the hottest dancers and actresses working in South India, having appeared in over 20 movie productions...