HTML span Attribute

The span attribute on a <col> or <colgroup> element specifies the number of columns the element spans, i.e. extends.

Example

#

A span attribute on a <col> element.
Two spanned columns are styled with a background color.

Name Age Country
Christina Berglund 35 Sweden
Maria Larsson 27 Sweden
<style>
  table.tb { width: 350px; border-collapse: collapse; }
  .tb th, .tb td { padding:5px; border: 1px solid #777; }
</style>

<table class="tb">
  <colgroup>
    <col span="2" style="background-color:aliceblue;">
  </colgroup>
   <tr> 
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>Christina Berglund</td>
      <td>35</td>
      <td>Sweden</td>
   </tr>
   <tr> 
      <td>Maria Larsson</td>
      <td>27</td>
      <td>Sweden</td>
   </tr>
</table>

For additional details see our HTML col span Reference.


Using span

The span attribute specifies the number of columns the element spans, i.e. extends.

This setting is useful for applying a style to multiple columns.


Syntax

<tagname span="number">

Values

#

Value Description
number Number of columns the element should span.

Elements that accept span

The following elements accept the span attribute.

Elements Description
<col> Groups and styles table columns -- see example above
<colgroup> Serves as a container for col elements.

<colgroup> with span

A <colgroup> tag with a span attribute.
The colgroup spans two columns that are styled with a background color.

Id First Name Last Name Country
ART-303 Vincent Van Gogh Netherlands
ART-877 Paul C├ęzanne France
<style>
  table.tbl { width:450px; border-collapse: collapse; }
  .tbl th, .tbl td { padding:3px; border: 1px solid #777; }
</style>

<table class="tbl">
  <colgroup span="2" style="background-color:aliceblue;">
  </colgroup>
  <tr> 
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Country</th>
   </tr>
   <tr> 
      <td>ART-303</td>
      <td>Vincent</td>
      <td>Van Gogh</td>
      <td>Netherlands</td>
   </tr>
   <tr> 
      <td>ART-877</td>
      <td>Paul</td>
      <td>Cézanne</td>
      <td>France</td>
   </tr>
</table>

For additional details see our HTML colgroup span Reference.


Browser support

Here is when span support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like



Guides