Mastering HTML Table Column Grouping

Introduction

The HTML <colgroup> tag is used to apply various styles to one or more columns in a HTML table. The <colgroup> tag eliminates the need for defining styles in every cell of a table. Using the span attribute of this tag, you can apply styles to columns on which you want to apply them.

In this lab, you will learn how to create a table with colored columns using the HTML <colgroup> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TablesGroup(["`Tables`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/basic_elems -.-> lab-70728{{"`HTML Table Column Grouping`"}} html/head_elems -.-> lab-70728{{"`HTML Table Column Grouping`"}} html/tables -.-> lab-70728{{"`HTML Table Column Grouping`"}} html/tbl_access -.-> lab-70728{{"`HTML Table Column Grouping`"}} end

Creating the HTML Table

First, create an HTML table to which you want to apply styles using the <colgroup> tag. Add the following code to your HTML file:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

The above code creates a table with a border of 1 and a caption "Colored Table". The <colgroup> tag contains three <col> tags that apply different colors to three columns respectively. The <thead> tag contains three <th> tags that contain headings of three columns. And, the <tbody> tag contains two rows with three columns each.

Writing CSS for Better Styling

In this step, we will use CSS to apply styles to the table created above.

Add the following CSS code to your HTML file:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Review the completed code in your index.html file. You should be able to see the table of three columns with different colors in each column.

Summary

The HTML <colgroup> tag is used to apply various styles to one or more columns of a table in HTML, eliminating the need to define styles in each cell of a table. In this lab, you learned how to create a table with colored columns using <colgroup> tag and apply styles to it using CSS.

HTML Table Column Grouping

Introduction

Skills Graph

Creating the HTML Table

Writing CSS for Better Styling

Summary

Other HTML Tutorials you may like