logo

HTML colspan attribute

HTML colspan attribute allows a cell to contain or span more than one columns. In other words, two or more cells are merged and the resulting cell contains spans two or more columns.

<table border="2">
<caption>Usage Stats of Browsers</caption>
 <tr>
  <th>Browsers</th>
  <th colspan="3">Months(2017)</th>
 </tr>
 <tr>
  <th></th>
  <th>January</th>
  <th>February</th>
 </tr>
 <tr>
  <td>Chrome</td>
  <td>62.07%</td>
  <td>62.97%</td>
 </tr>
 <tr>
  <td>Firefox</td>
  <td>14.87%</td>
  <td>14.83%</td>
 </tr>
</table>
</>
Usage Stats of Browsers
Browsers Months(2017)
January February
Chrome 62.07% 62.97%
Firefox 14.87% 14.83%

In the above example, a cell contains two columns because we have used 2 value of colspan attribute.

Attribute values

All possible values of colspan attribute

The value of colspan attribute is a valid positive integer. And this integer is the number of columns spanned by the cell.


2 value of rowspan attribute allows a cell to contain two rows i.e. it merges two cells.

Example

Usage Stats of Browsers
Browsers Months(2017)
January February March
Chrome 62.07% 62.97% 62.80%
Firefox 14.87% 14.83% 14.99%
Try </>

Related Tags

The tags that support colspan attribute

<th> tag

<th> tag defines a cell of data in the heading section of the table. It supports the colspan attribute.

<td> tag

<td> tag defines a cell of data in the body section of the table. colspan attribute is applicable on the <td> tag

Was this article helpful?