What is colspan Attribute in HTML?

The colspan Attribute in HTML is simply to define how many numbers of columns a cell should take/span in a table. Basically using colspan attribute in HTML tables you are merging the multiple cells.

AS MDN docs say: The default value of colspan is 1 and the value must be in non-negative integer. The limitation of the value is 1000. And the value above 1000 will be considered as incorrect value and will be set to the default value 1.

But the tag really doesn’t care about the maximum limit of value because I tried the insane value of 10000000000000000000000000 and it worked well, It doesn’t change to the default value 1 in chrome version 78.0.3904.97 (Official Build) (64-bit) I don’t know about other browsers may be the limits exists in other or old version of browsers.

Tag Support

You can use colspan attribute in HTML with <td> and <th> tags. For example below:-

td example

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$100</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

In the above example the last row td tag will take both of month and savings columns because we defined the colspan attribute and set the value 2. If you want to cover 3 columns set the value as 3 and 4 for 4 columns and so on.

th example

<table>
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

In the above example of th tag the Monthly Savings heading will expand in 2 cells of the table and everything will be remain the same.

Browser Support

some of the information is collected from the mdn.