HTML span Attribute

HTML span Attribute

The HTML span attribute specifies the number of consecutive table columns represented by a <col> or <colgroup> element. It allows one element to represent multiple adjacent columns instead of defining each column separately.

Elements That Use the span Attribute

The span attribute is used with the <col> and <colgroup> elements.

span Attribute Value

The span attribute must contain a valid integer greater than zero and no greater than 1000.

<col span="2">

In this example, the <col> element represents two consecutive columns in the table.

Using span with <col>

On a <col> element, the span attribute specifies how many consecutive columns the element represents.

<table>
  <colgroup>
    <col>
    <col span="2" class="price">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Regular Price</th>
    <th>Sale Price</th>
  </tr>
  <tr>
    <td>Notebook</td>
    <td>$10.00</td>
    <td>$8.00</td>
  </tr>
</table>

The first <col> represents one column. The second <col> uses span="2" and represents the next two columns.

Using span with <colgroup>

On a <colgroup> element, the span attribute specifies how many consecutive columns belong to that column group.

<table>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>City</th>
    <th>State</th>
  </tr>
</table>

Each <colgroup> in this example represents two consecutive table columns.

When a <colgroup> has a span attribute, it must not contain <col> elements. If individual <col> elements are used inside the group, omit the span attribute from the <colgroup>.

Default Value

When the span attribute is omitted from a <col> element, the element represents one column.

<col>

This is equivalent to using a column span of 1.

An empty <colgroup> can also use span to specify how many columns it represents. When no span is specified and the <colgroup> contains <col> elements, the group's columns are established by those child elements.

Maximum Value

The span value must be greater than zero and no greater than 1000. Values outside this range are not conforming HTML.

<col span="3">

For ordinary tables, relatively small values are normally used because the number represents actual consecutive columns in the table structure.

Common Mistakes

Do not confuse the span attribute with the <span> element. The attribute controls how many table columns a <col> or <colgroup> represents, while the <span> element is a generic inline container for phrasing content.

Do not use span="0" or a negative value. The value must be an integer greater than zero.

Do not use a value greater than 1000. The HTML standard limits the span value to a maximum of 1000.

Do not place <col> elements inside a <colgroup> that has a span attribute. Use either the group's span attribute or child <col> elements to establish the columns.

Do not confuse span with colspan. The span attribute applies to <col> and <colgroup>, while colspan specifies how many columns a table cell spans.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The span attribute is widely supported on both <col> and <colgroup> elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the span Attribute

The example uses span="2" on a <col> element so one column definition represents both price columns. A background color makes the two represented columns easy to identify.

Summary

The HTML span attribute specifies the number of consecutive table columns represented by a <col> or <colgroup> element. The value must be greater than zero and no greater than 1000. A <col> without an explicit span represents one column, while a <colgroup> with a span attribute must not contain child <col> elements.