Colspan to Merge HTML Table Cells Horizontally
Colspan is a HTML attribute which can be assigned to a table cell (<td> and <th>). It takes a number, greater than 0 that shows how many cells are merged together starting from the marked cell.
It's very similar to the rowspan attribute that extends cells towards the bottom.
Syntax
<td colspan="2">Text</td>
<th colspan="2">Text</th>
Colspan Examples
Colspan is often used to mark cell that have the same value or to visualize merged table cells.
<table> <tbody> <tr> <td>1</td><td>2</td><td>3</td><td>4</td> <td>5</td><td>6</td><td>7</td><td>8</td> <td>9</td><td>10</td> </tr> <tr> <td>1</td> <td colspan="2">2-3</td><td>4</td> <td colspan="3">5-7</td><td>8</td> <td>9</td><td>10</td> </tr> <tr> <td colspan="5">1-5</td> <td colspan="5">6-10</td> </tr> <tr> <td colspan="10">10</td> </tr> <tr> <td>1</td> <td colspan="2">2-3</td> <td colspan="3">4-6</td> <td colspan="4">7-10</td> </tr> </tbody> </table>
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 1 | 2-3 | 4 | 5-7 | 8 | 9 | 10 | |||
| 1-5 | 6-10 | ||||||||
| 10 | |||||||||
| 1 | 2-3 | 4-6 | 7-10 | ||||||
Demonstrating rowspan on a 10×5 table.
<table> <colgroup> <col class="candyPinkBack"> <col span="8"> </colgroup> <thead> <tr> <th>Name</th> <th>1</th><th>2</th><th>3</th><th>4</th> <th>5</th><th>6</th><th>7</th><th>8</th> </tr> </thead> <tbody> <tr> <td>John</td> <td colspan="5" bgcolor="#fdc">1-5</td> <td></td><td></td><td></td> </tr> <tr> <td>Bob</td> <td></td><td></td> <td colspan="6" bgcolor="#dfc">3-8</td> </tr> <tr> <td>Mary</td> <td colspan="3" bgcolor="#fdc">1-3</td> <td></td> <td colspan="3" bgcolor="#fdc">5-7</td></td> <td></td> </tr> <tr> <td>Eli</td> <td></td> <td colspan="4" bgcolor="#cdf">2-5</td> <td></td><td></td><td></td> </tr> </tbody> </table>
| Name | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| John | 1-5 | |||||||
| Bob | 3-8 | |||||||
| Mary | 1-3 | 5-7 | ||||||
| Eli | 2-5 | |||||||
Timetable to visualize employer's shifts.
Adding Colspan To An Existing Table
When we increase the size of a cell using the colspan attribute, that will push out some cells to the right. We have to make sure to remove them, otherwise it will render icnorrectly, as shown below.
Colspan pushing="2" out the highlighted cell. It renders differently on desktop and mobile Chrome browsers.
Incorrect:
<table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td colspan="2">E</td> <td class="candyPinkBack">F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </table>
| A | B | C | |
| D | E | F | |
| G | H | I | |
A table with 3 cells per row, in the middle row having a widened E cell which pushes out the highlighted F cell.
W3 Markup Validator showing the error.
Correct:
The highlighted F cell has been removed:
<table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td colspan="2">E</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </table>
| A | B | C |
| D | E | |
| G | H | I |
Colspan In The Last Cell Of A Row
Increasing the colspan of the last cell of a table row would make the cell stick out of the table borders. Doing this is not just a bad practice but it will result an invalid code.
We can only extend a cell as far as the edge of the table allows it to stretch.
<table class="demo"> <tr> <td>A</td> <td colspan="2" class="brick"> B </td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table>
Colspan Combined With Rowspan
Colspan is used to spread out a cell to the right. We need to use rowspan to extend vertically towards the bottom. You can learn more about it on its dedicated page.
<table> <tbody> <tr> <td></td><td></td><td></td>
<td></td><td></td> </tr> <tr> <td></td> <td colspan="3" bgcolor="#fcdddb">
Colspan=3
</td> <td></td> </tr> <tr> <td></td> <td rowspan="3" bgcolor="#fcdddb">
Row<br />span<br />=3
</td> <td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> </tbody> </table>
| Colspan=3 | ||||
| Row span =3 |
||||
Example with a 5×6 table where cells are spanning 3 widths horizontally and vertically
Assigning both rowspan and colspan to a single cell will extend it both down and to the left. The exemple below will create a 2×2 cell.
<table> <tr> <td>A</td><td>B</td> <td>C</td><td>D</td> </tr> <tr> <td>E</td> <td colspan="2" rowspan="2" class="candyPinkBack"> 2x2 </td> <td>F</td> </tr> <tr> <td>G</td><td>H</td> </tr> <tr> <td>I</td><td>J</td> <td>K</td><td>L</td> </tr> </table>
| A | B | C | D |
| E | 2x2 | F | |
| G | H | ||
| I | J | K | L |
Creating a 2 by 2 large cell.
Colspan For Div Tables
HTML tables can be replaced by structured <div> tags. Div tables support responsiveness but their code needs to be tweaked when adding colspans. Just adding colspan="x" to a div tag will not work as it does in a td tag.
W3 Markup Validator throwing an error for assigning colspan attribute to a div element.
When it comes to adding colspan to a div table, we need to consider using nested tables and think about responsiveness too.
Example
Let's start with a 3×3 div table, where we wish to enlarge the highlighted E cell and make it swallow the F cell.
<div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">A</div> <div class="divTableCell">B</div> <div class="divTableCell">C</div> </div> <div class="divTableRow"> <div class="divTableCell">D</div> <div class="divTableCell brick">E</div> <div class="divTableCell">F</div> </div> <div class="divTableRow"> <div class="divTableCell">G</div> <div class="divTableCell">H</div> <div class="divTableCell">I</div> </div> </div> </div>
Removing the F cell and doubling the width of E using inline styles will not work because the width of the cells in the first row sets the width of each indivitual column.
<div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell" style="width:33%">A</div> <div class="divTableCell" style="width:33%">B</div> <div class="divTableCell" style="width:33%">C</div> </div> <div class="divTableRow"> <div class="divTableCell" style="width:33%">D</div> <div class="divTableCell brick" style="width:67%">E</div> </div> <div class="divTableRow"> <div class="divTableCell" style="width:33%">G</div> <div class="divTableCell" style="width:33%">H</div> <div class="divTableCell" style="width:33%">I</div> </div> </div> </div>
A possible solution is to use nested tables
First we generate a table with 2 columns and 3 rows, then we separate each cell with 2×1 tables that share the same column with the wide cell.
<div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">A</div> <div class="divTableCell"> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">B</div> <div class="divTableCell">C</div> </div> </div> </div> </div> </div> <div class="divTableRow"> <div class="divTableCell">D</div> <div class="divTableCell brick">E</div> </div> <div class="divTableRow"> <div class="divTableCell">F</div> <div class="divTableCell"> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell">G</div> <div class="divTableCell">H</div> </div> </div> </div> </div> </div> </div> </div>
Colspan Generator
The online HTML table generator is the easiest tool to create markup with a couple of clicks. Unfortunately there's no option to assign colspan to an element. You need to set them up manually adding colspan="x" attribute to a cell. Then you'll have to remove the cells from the source that have been pushed out.
