HTML col tag & colgroup tag

The HTML <col> element defines column properties for each column within a <colgroup> tag.

The HTML <colgroup> element defines a group of one or more columns in a table for formatting.

The HTML <col> element like the <colgroup> element can be used to apply styles to entire columns (instead of repeating the styles for each cell, or a row).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 3px solid #333;
}
table {
  border-collapse: collapse;
}
</style>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color:#e9c46a">
    <col style="background-color:#2a9d8f">
  </colgroup>
  <tr>
    <th>Number</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>25</td>
    <td>HTML course</td>
    <td>£45</td>
  </tr>
  <tr>
    <td>27</td>
    <td>CSS course</td>
    <td>£69</td>
  </tr>
</table>

</body>
</html>

Output:

Number	Title	Price
25	HTML course	£45
27	CSS course	£69

Enjoy coding!

Share this: