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.
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
- cell
Inherits into Roles
- columnheader
- grid-cell
- rowheader
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>