table with colgroup and col (Interactive Example)

<!DOCTYPE html>
<title>My Example</title>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
  }
  table, td, th {
    border: 1px solid #bbb;
    padding: 10px;
  }
  .left-column {
    background: #ddd;
    border-right: 3px solid #ccc;
  }
  .other-columns {
    background: #eee;
  }
  .right-column {
    border: 3px solid black;
  }
</style>
<table>
  <colgroup class="left-column"></colgroup>
  <colgroup class="other-columns" span="3">
    <col span="2">
    <col class="right-column">
  </colgroup>
  <tr>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
    <th>Header</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

<hr>
<p>More info: <a href="/html/html_table_tutorial.cfm">Table Tutorial</a>, <a href="/html/html_table_generator.cfm">Table Generator</a>.</p>