Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

HTML span Attribute

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

This is useful when the same style needs to be applied to multiple columns.

Example

#

A span attribute on a <col> element.
Two spanned columns are styled with the same 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.


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



Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides