HTML span Attribute


The span attribute, when used with the <col> and <colgroup> tags in HTML, serves a specific and useful purpose. It is designed to specify the number of columns a <col> or <colgroup> element should span across in a table. This attribute is particularly helpful in defining column properties for multiple columns at once, without needing to repeat the same tag or style for each individual column.

For the <colgroup> tag, the span attribute determines how many columns in the table the group should span or affect. This is especially useful for applying styles or width settings to a group of columns collectively rather than individually. For instance, if you want three consecutive columns of a table to share the same width and style, you can wrap a <colgroup> element with a span attribute set to 3 around those columns.

Similarly, when applied to a <col> element, the span attribute allows you to state how many columns that single <col> element should affect. This can simplify your markup when multiple adjacent columns are to share the same styling or width but don't necessarily form a logical group that warrants a <colgroup>.

Here's a basic example to illustrate the use of the span attribute with both <colgroup> and <col>:

  <colgroup span="2" style="background-color: #f2f2f2;"></colgroup>
  <col span="2" style="background-color: #e0e0e0;">
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
    <td>Data 4</td>

In this example, the first two columns will have a background color of #f2f2f2 thanks to the <colgroup> with a span of 2, while the next two columns will have a background color of #e0e0e0 due to the <col> element also with a span of 2. This showcases how the span attribute can efficiently apply styles to multiple columns.


<tagname span="number">


  • numberNumber of columns the element should span.

Applies To

The span attribute can be used on the following html elements.


<table border="1">
<colgroup span="2" style="background-color: #DFF0D8;"></colgroup>
<col span="1" style="background-color: lightblue;">
<th>Population (in millions)</th>
<td>Washington D.C.</td>

Browser Support

The following table will show you the current browser support for the HTML span Attribute.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 29th March 2024