HTML span Attribute

Description

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>:

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

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.

Syntax

<tagname span="number">

Values

  • numberNumber of columns the element should span.

Applies To

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

Example

<table border="1">
<colgroup span="2" style="background-color: #DFF0D8;"></colgroup>
<col span="1" style="background-color: lightblue;">
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population (in millions)</th>
<th>Language</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>331</td>
<td>English</td>
</tr>
<tr>
<td>France</td>
<td>Paris</td>
<td>67</td>
<td>French</td>
</tr>
<tr>
<td>Germany</td>
<td>Berlin</td>
<td>83</td>
<td>German</td>
</tr>
</table>

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
1211154
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184143.214.4

Last updated by CSSPortal on: 29th March 2024