The span attribute is specifically used on the <col> and <colgroup> elements to specify how many columns should be covered for formatting.
Definition and Usage
➔ The span attribute accepts a positive integer representing the number of columns to span.
➔ The span attribute uses the default of 1 if not specified.
Syntax
<style>
.student {
background-color: #aafafa;
width: 40%;
}
.country {
background-color: #edfdfd;
width: 20%;
}
</style>
<colgroup>
<col span="2" class="student">
<col class="country">
</colgroup>
//Or
<colgroup>
<col span="2" class="student">
<col style="background-color: #edfdfd;">
</colgroup>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| span | <col>, <colgroup> |
Example
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
text-align: center;
}
caption {
border: 1px solid black;
padding: 10px;
margin-bottom: 1px;
text-align: center;
}
.student {
background-color: #aafafa;
width: 40%;
}
.country {
background-color: #edfdfd;
width: 20%;
}
</style>
</head>
<body>
<table>
<caption>Student Information</caption>
<colgroup>
<col span="2" class="student">
<col class="country">
</colgroup>
<tr>
<th>ID</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>S001</td>
<td>Yoshi Chang</td>
<td>Germany</td>
</tr>
<tr>
<td>S002</td>
<td>Giovanni Anders</td>
<td>Mexico</td>
</tr>
<tr>
<td>S003</td>
<td>Bennett Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>S004</td>
<td>Mendel Helen</td>
<td>UK</td>
</tr>
<tr>
<td>S005</td>
<td>Maria Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>S006</td>
<td>Francisco Tannamuri</td>
<td>Canada</td>
</tr>
</table>
</body>
</html>
Click on the "Try it Now" button to see how it works.