HTML Table Colgroup

HTML tables show data in rows and columns. You can use <colgroup> and <col> tags to style columns without repeating code. This makes your work simpler and easier to update.

Learning Outcomes

After reading this tutorial, you will be able to:

• Understand the purpose of the <colgroup> and <col> tags in HTML tables.
• Place the <colgroup> tag correctly within a table for proper structure.
• Apply CSS styles to table columns using <colgroup> and <col>.
• Use the span attribute to target multiple columns at once.
• Identify and avoid deprecated HTML attributes in favor of CSS.
• Create structured tables that help search engines index content.
• Build tables that improve accessibility for screen readers.
• Validate HTML structure and test tables for consistent display across browsers.

The HTML <colgroup> Tag

The <colgroup> tag groups columns in a table. It applies a common style to many columns. Place <colgroup> inside the <table> tag after <caption> (if you use one) and before <thead>, <tbody>, <tfoot>, or <tr>. You can leave <colgroup> empty or include one or more <col> tags.

Basic Syntax

<table>
  <colgroup>
    <col span="2" style="background-color: #e0f7fa;">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

In this example, the first two columns get a light-blue background.

The HTML <col> Element

The <col> tag defines a column. It is a void element, so it does not need a closing tag. Use <col> to set styles or attributes for one or more columns. The span attribute lets you apply a style to several columns at once.

Example:

<table style="border: 1px solid black;">
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
  </colgroup>
  <tr>
    <td>30% wide column</td>
    <td>70% wide column</td>
  </tr>
</table>

Output:

30% wide column

70% wide column

The span Attribute

The span attribute tells the browser how many columns a tag applies to. Use it on <colgroup> to cover a group of columns or on <col> to repeat a style.

Example:

<table>
  <colgroup>
    <col span="2" style="background-color: yellow;">
    <col style="background-color: pink;">
  </colgroup>
  <tr>
    <td>Yellow column</td>
    <td>Yellow column</td>
    <td>Pink column</td>
  </tr>
</table>

Output:

Yellow column

Yellow column

Pink column

Styling Columns

You can use CSS to style columns in an HTML table by utilizing the <colgroup> and <col> elements. The <colgroup> tag allows you to group columns together, while the <col> tag is used to apply styles such as background colors, widths, or other properties to specific columns.

Basic Column Styling Example

<table>
  <colgroup>
    <col style="background-color: #ffcc80; width: 40%;">
    <col style="background-color: #a5d6a7; width: 60%;">
  </colgroup>
  <tr>
    <td>Orange column</td>
    <td>Green column</td>
  </tr>
</table>

Output:

Orange column

Green column

Alternating Styles

Use multiple <col> tags for different styles:

<table>
  <colgroup>
    <col style="background-color: #f8bbd0;">
    <col style="background-color: #b2ebf2;">
    <col style="background-color: #f8bbd0;">
  </colgroup>
  <tr>
    <td>Pink</td>
    <td>Blue</td>
    <td>Pink</td>
  </tr>
</table>

Output:

Pink

Blue

Pink

Skipping Columns

Use empty <col> tags to skip columns:

<table>
  <colgroup>
    <col>
    <col style="background-color: #c8e6c9;">
  </colgroup>
  <tr>
    <td>Unstyled</td>
    <td>Green</td>
  </tr>
</table>

Output:

Unstyled

Green

Hiding Columns

Apply the CSS property visibility: collapse to hide a column:

<table>
  <colgroup>
    <col>
    <col style="visibility: collapse;">
  </colgroup>
  <tr>
    <td>Visible Column</td>
    <td>Hidden Column</td>
  </tr>
</table>

Output:

Visible Column

Hidden Column

Allowed and Deprecated Attributes

When using <colgroup> and <col> tags, set styles with CSS. Valid CSS properties include:

• width
• visibility
• background
• border

Do not use deprecated HTML attributes such as:

• align
• bgcolor
• valign
• width (as an HTML attribute)

Using CSS for styling ensures your code is cleaner and easier to maintain. Avoiding outdated HTML attributes promotes better compatibility and performance. This approach also supports responsive design and improves accessibility.

Common Mistakes and Best Practices

• Place <colgroup> directly after the <caption> tag and before any <thead>, <tbody>, <tfoot>, or <tr> tags. This ensures the table is well structured.
• Do not use deprecated attributes. Avoid attributes like align, bgcolor, valign, and HTML width. Use CSS instead.
• Use CSS for styling. Apply styles in an external stylesheet or a <style> block to keep HTML clean.
• Use semantic tags. This practice improves accessibility and helps browsers and search engines process your content.
• Check your HTML structure. Validate your code with online tools to catch errors.
• Test the table across different browsers. This ensures consistent display.
• Document your code. Add clear comments where necessary to guide future developers.

SEO and Accessibility

Structured tables can improve SEO by allowing search engines to index your content accurately. Clean HTML makes it easier for search engines to identify important data within your table. This can help improve your site's ranking.

Semantic tables also aid screen readers by providing clear headers and captions. Developers should:

• Add a <caption> to explain the table's purpose.
• Use <th> for header cells to clarify the data.
• Write clear, valid HTML using <colgroup> and <col> to organize columns.
• Include ARIA labels where necessary.

These practices help search engines and assistive tools process your content correctly, which benefits both your site's visibility and user accessibility.

FAQs on HTML Table Colgroup

Why should I avoid deprecated attributes?

Deprecated attributes can cause compatibility issues and make maintenance harder. CSS is a better option.

Can I use <col> without <colgroup>?

No. Place <col> tags inside a <colgroup>.

How do I use <colgroup> in a table?

Place <colgroup> right after <caption> and before <thead>, <tbody>, <tfoot>, or <tr>.

What is the difference between <colgroup> and <col>?

<colgroup> groups columns. <col> defines an individual column.

Is <colgroup> still valid?

Yes. It is a standard and supported tag.

How do I hide a column?

Apply visibility: collapse to the <col> element in <colgroup>.

This tutorial shows how to use HTML <colgroup> and <col> to style table columns simply and clearly.