JavaScript Element ariaColSpan Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIACOLSPAN

Definition

In JavaScript, the ariaColSpan property of Element reflects the aria-colspan attribute, which defines how many columns a cell or gridcell spans in a table, grid, or treegrid (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaColSpan. Start with this line.

JavaScript
el.ariaColSpan
CallWhat it does
el.ariaColSpanPrimary signature.

Built into the browser. Read or assign el.ariaColSpan — no import required.

Library declarations
JavaScript
el.ariaColSpan

Parameters

ParameterDescription
ariaColSpanOptional. Width in columns
Positive integerRequired. Value ≥ 1; default is 1

Return Value

Return ValueDescription
*The current value of el.ariaColSpan.

JavaScript Examples

Example 1 — Read ariaColSpan

MDN-style spanning cell: read the reflected string integer.

JavaScript
const el = document.getElementById("spanning-column");
console.log(el.ariaColSpan); // "2"
Try It Yourself

How It Works

  1. Select the cell. It should declare aria-colspan.
  2. Read ariaColSpan. Returns a string like "2".
  3. Expect a string. Not the number 2.
  4. Meaning: this cell covers two columns.

Example 2 — Get and Set (MDN)

Update the column span from script.

JavaScript
const el = document.getElementById("spanning-column");
console.log(el.ariaColSpan); // "2"
el.ariaColSpan = "3";
console.log(el.ariaColSpan); // "3"
Try It Yourself

How It Works

  1. Log the start value. Matches the HTML attribute.
  2. Assign a string integer. Use "3", not 3.
  3. Read again. Confirms property and attribute updated.
  4. Keep layout valid. Do not overlap the next cell (MDN).

Example 3 — ARIA Grid Column Header

Span a header across two columns in a custom grid (not a native table).

JavaScript
const h = document.getElementById("player");

h.ariaColIndex = "2";
h.ariaColSpan = "2"; // Last Name + First Name

console.log(h.ariaColIndex); // "2"
console.log(h.ariaColSpan);  // "2"
Try It Yourself

How It Works

  1. Set the start. ariaColIndex = "2" is the first column of the span.
  2. Set the width. ariaColSpan = "2" covers two columns.
  3. Use on ARIA headers/cells. This is where aria-colspan shines.
  4. Prefer native tables when a real <table> is enough (MDN).
Compatibility

Browser Support

Element.ariaColSpan is Baseline Widely available (MDN: across browsers since October 2023). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.ariaColSpan

Reflects aria-colspan as a string integer for how many columns a cell covers. Prefer HTML colspan on native tables.

Baseline Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
ariaColSpan Baseline

Bottom line: Safe for modern apps. Use string integers ≥ "1", avoid overlaps, and prefer native colspan when you have a real

.

Frequently Asked Questions

It reflects the aria-colspan attribute as a string integer that defines how many columns a cell or gridcell spans in a table, grid, or treegrid (MDN).
No. MDN marks Element.ariaColSpan as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
A string that contains an integer (for example "2" or "3"), not a Number type. Default assumed span is 1.
On a native <td>/<th>, use the HTML colspan attribute. aria-colspan / ariaColSpan is for ARIA table/grid/treegrid cells that are not native table cells — MDN says aria-colspan on a cell inside a real <table> is ignored.
ariaColIndex is the starting column (1-based). ariaColSpan is how many columns that cell covers from that start.
Yes. Reading and writing ariaColSpan updates the reflected aria-colspan attribute.

Next: ariaControlsElements

Learn the Element property that reflects aria-controls as element references.

ariaControlsElements tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Element ariaColIndexText Property JavaScript Element ariaControlsElements Property