HTML - span Attribute

HTML span attribute is used to specifies the number of columns a <col> or <colgroup> element should span.

The span attribute is used to span the column, and when we apply CSS properties to the <col> or <colgroup> element, then span will allow us to apply the same CSS properties to several columns.

Syntax

<tag span="2">

Applies on

Below-listed elements allow the use of the HTML span attribute.

Element	Description
<colgroup>	HTML <colgroup> tag is used to describe the collection of one or more columns in a table for formatting.
<col>	HTML <col> tag is used to offer information about columns.

Examples of HTML span attribute

Below examples will illustrate the HTML span attribute, where and how we should use this attribute!

Implementing Background Colors on <colgroup> Element

In the following example we will use the span attribute to set the background color of the first three columns by selecting the columns using <colgroup> at once..

<!DOCTYPE html>
<html>

<head>
      <!-- Used to set the border on the table -->
      <style>
         table,
         th,
         td {
            border: 1px solid gray;
         }
      </style>
</head>

<body>
      <h3>HRML span Attribute</h3>
      <table>
         <colgroup span="3" 
                   style="background:green">
         </colgroup>
         <tr>
            <th>Course</th>
            <th>Enroll Date</th>
            <th>Status</th>
            <th>Certificate</th>
         </tr>
         <tr>
            <td>HTML</td>
            <td>30th May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
         <tr>
            <td>CSS</td>
            <td>31st May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
      </table>
</body>

</html>

Implementing Background Colors on <col> Element

In the following example we will use the span attribute to set the background color of the first two columns by selecting the columns using <col> indivitually.

<!DOCTYPE html>
<html>

<head>
      <!-- Used to set the border on the table -->
      <style>
         table,
         th,
         td {
            border: 1px solid gray;
         }
      </style>
</head>

<body>
      <h3>HRML span Attribute</h3>
      <table>
         <colgroup> 
            <col span="2" style="background-color:green"> 
            <col style="background-color:yellow">
        </colgroup>
         <tr>
            <th>Course</th>
            <th>Enroll Date</th>
            <th>Status</th>
            <th>Certificate</th>
         </tr>
         <tr>
            <td>HTML</td>
            <td>30th May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
         <tr>
            <td>CSS</td>
            <td>31st May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
      </table>
</body>

</html>

Supported Browsers

Attribute
span	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm