HTML span Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

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