HTML Table Column

Introduction

HTML <col> tag is used to define the properties of each column of a table separately. In this lab, you will learn how to use the <col> tag to style columns of an HTML table.

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

Creating an HTML table

In the index.html file of your project, add the following code to create a basic HTML table:

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>Product Name</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>$10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>$20</td>
    <td>10</td>
  </tr>
</table>

Styling columns with <col> tag

Now, let's add the <col> tag to style the columns of the table. Replace the <colgroup> tag in the above code with the following code:

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

In the code above, we have added the <col> tag with the style attribute to apply different background colors to each column of the table.

Using the span attribute

You can use the span attribute of the <col> tag to target multiple columns at once. For example:

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

In this example, the second <col> tag targets two columns at once by using the span attribute with the value of 2.

Using Global and Event Attributes

The <col> tag supports Global attributes and Event attributes to add additional styling and functionality to the table columns. For example, you can use the class attribute to add a CSS class to the columns:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

Now, you can apply CSS styles to the table columns using the .product-name and .price-quantity classes.

Adding Units to Table Columns

You can add units to table columns, such as currency or percentage values, using the ::before and ::after pseudo-elements and CSS. For example:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

In the code above, the ::before pseudo-element adds a dollar sign before the values in the first two columns, while the ::after pseudo-element adds a percentage sign after the values in the last column.

Summary

In this lab, you learned how to use the HTML <col> tag to style columns of an HTML table. You also learned how to use the span attribute, Global attributes, and Event attributes to add additional styling and functionality to the table columns. Finally, you learned how to add units to table columns using CSS and pseudo-elements.