What is colspan Attribute in HTML?
HTML, HTML Attributes 0 CommentsThe 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
Element | |||||
---|---|---|---|---|---|
td | Yes | Yes | Yes | Yes | Yes |
th | Yes | Yes | Yes | Yes | Yes |
some of the information is collected from the mdn.
Leave a Reply