HTML Table Column Span

HTML Table Column Span is used to group one or more columns and apply specific formatting to these columns.

<col> is the tag used to specify column span. span property of <col> tag to used to specify the number of columns in this column span.

Examples

In the following example, we group the first and second columns using <col span="">, and specify a background color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="background:#facfd2">
        <col style="background:#f5e6ab">
      </colgroup>
      <thead>
        <th>Name</th>
        <th>Quantity</th> 
        <th>Available in (Months)</th> 
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
          <td>0.5</td>
        </tr>
        <tr>
          <td>Cherry</td>
          <td>36</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML Column Span, and how to use it to format multiple columns as one, with examples.