WAI-ARIA:aria-colspan(Property)

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Relationship 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
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
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

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>

Reference

• W3C (opens new window)
• MDN Web Docs