HTML Table Colgroup

The <colgroup> element styles specific columns of a table. It is a container for column specifications, and each group is set with a <col> element. On a <col>, the span attribute says how many columns to style and the style attribute gives the style.

Note: Only a very limited set of CSS properties work on colgroups. The <colgroup> must be a child of <table> and come before any rows or cells, but after a <caption> if there is one.

Example

The first two columns of a calendar styled with a colgroup.

A calendar table (MON to SUN headers, four weeks of dates) where the first two columns are styled with a light blue background using a colgroup containing one col with span=2.

> Output: complete HTML page

Prompt

A calendar table (MON to SUN headers, four weeks of dates) where the first two columns are styled with a light blue background using a colgroup containing one col with span=2.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Basic</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>

Legal CSS Properties

Only a few CSS properties are allowed on a colgroup: the width property, the visibility property, the background properties, and the border properties. All other CSS properties have no effect on the table.

Multiple Col Elements

To style several columns differently, use more than one <col> element inside the <colgroup>.

Example

Two column groups with different background colors.

A calendar table where the first two columns are light blue and the next three are pink, using a colgroup with two col elements (span=2 and span=3) with different background colors.

> Output: complete HTML page

Prompt

A calendar table where the first two columns are light blue and the next three are pink, using a colgroup with two col elements (span=2 and span=3) with different background colors.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Multiple</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>

Empty Colgroups

To style columns in the middle of a table, add an empty <col> element (with no style) for the columns before them.

Example

An empty col used to skip the first columns before styling later ones.

A calendar table where columns in the middle are styled by first adding an empty col with span=3 (no style), then a col with span=2 and a pink background.

> Output: complete HTML page

Prompt

A calendar table where columns in the middle are styled by first adding an empty col with span=3 (no style), then a col with span=2 and a pink background.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Empty</title>
</head>
<body>

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>

Hide Columns

You can hide columns with the visibility: collapse property on a <col>.

Example

The last three columns hidden with visibility: collapse.

A calendar table where the last three columns are hidden using a col with span=3 and visibility: collapse, after a col with span=2.

> Output: complete HTML page

Prompt

A calendar table where the last three columns are hidden using a col with span=3 and visibility: collapse, after a col with span=2.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colgroup Hide</title>
</head>
<body>

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
  </tr>
  <tr>
    <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td>
  </tr>
  <tr>
    <td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
  </tr>
  <tr>
    <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
  </tr>
</table>

</body>
</html>