WAI-ARIA: aria-colspan (Property)
Description
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. See related aria-colindex and aria-rowspan.
This attribute is intended for cells and gridcells which are not contained in a native table. When defining the column span of cells or gridcells in a native table, authors SHOULD use the host language’s attribute instead of aria-colspan. If aria-colspan is used on an element for which the host language provides an equivalent attribute, user agents MUST ignore the value of aria-colspan and instead expose the value of the host language’s attribute to assistive technologies.
Authors MUST set the value of aria-colspan to an integer greater than or equal to 1 and less than the value which would cause the cell or gridcell to overlap the next cell or gridcell in the same row.
Browser Compatibility For aria-colspan
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaColSpan | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
aria-colspan Example
HTML Example
Example of spanned cells in a table having missed column
<div role="table" aria-colcount="4">
<div role="row">
<div role="cell" aria-colindex="1" aria-colspan="2">
cell 1
</div>
<div role="cell" aria-colindex="4">
cell 4
</div>
</div>
<div role="row">
<div role="cell" aria-colindex="1" aria-colspan="2">
cell 1
</div>
<div role="cell" aria-colindex="2">
cell 2
</div>
<div role="cell" aria-colindex="4">
cell 4
</div>
</div>
</div>Characteristics
Used in Roles
Inherits into Roles
Value
- integer
- A numerical value without a fractional component.
Semantic HTML
Use the HTML “colspan” attribute.
<table><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr><tr><td colspan=”2″>Sum: $180</td></tr></table>
Reference
- W3C (opens new window)
- MDN Web Docs
