Specific columns in a table can be styled using the
<colgroup> element.

Table Colgroup in HTML

Use the <colgroup> and
<col> elements to style the top six
columns of a table.


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML table – colgroup</title>
    <style>
        table, th, td {
          border: 1px solid green;
          border-collapse: collapse;
        }
        tr {
            text-align: center;
        }
  </style>
</head>
<body>

    <h2>HTML table – colgroup</h2>
    <p>To establish a style for the six columns, add a colgroup with a col element that spans six columns:</p>
    <table style=“width: 100%;”>
        <colgroup>
            <col span=“6” style=“background-color: ORANGE”>
      </colgroup>
      <tr>
        <th>January</th>
        <th>February</th>
        <th>March</th>
        <th>April</th>
        <th>May</th>
        <th>June</th>
        <th>July</th>
        <th>August</th>
        <th>September</th>
        <th>October</th>
        <th>November</th>
        <th>December</th>
    </tr>
    <tr>
        <td>31</td>
        <td>28 or 29</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
    </tr>
</table>


</body>

</html>
HTML in Table - colgroup

The column requirements should be contained within the
<colgroup> element.

The <col> element specifies each
group.

The span element defines the number of columns that will receive the style.

The columns’ desired style is specified by the style attribute.

The <colgroup> tag must be a child of a
<table> element and must come after the
<caption> element, if one is present, but before any other
table elements like <thead>, <tr>,
<td>, etc.

MR STAR CREATOR

CSS Properties

The colgroup only permits the
usage of a very small number of CSS properties, including:

  • width
  • visibility
  • background
  • border

The tables you create will not be affected by any other CSS
properties.

Use multiple <col> elements

Use multiple <col> elements inside the <colgroup>
if you want to style more columns in a variety of ways:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML table – colgroup</title>
    <style>
        table, th, td {
          border: 1px solid green;
          border-collapse: collapse;
        }
        tr {
            text-align: center;
        }
  </style>
</head>
<body>

    <h2>Multiple Col Elements</h2>
    <table style=“width: 100%;”>
        <colgroup>
            <col span=“6” style=“background-color: ORANGE”>
            <col span=“6” style=“background-color: limegreen;”>
      </colgroup>
      <tr>
        <th>January</th>
        <th>February</th>
        <th>March</th>
        <th>April</th>
        <th>May</th>
        <th>June</th>
        <th>July</th>
        <th>August</th>
        <th>September</th>
        <th>October</th>
        <th>November</th>
        <th>December</th>
    </tr>
    <tr>
        <td>31</td>
        <td>28 or 29</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
        <td>30</td>
        <td>31</td>
    </tr>
</table>


</body>

</html>

Multiple Col Elements
MR STAR EDIT
Rate this post

Categorized in: