Table of contents

HTML <colgroup> Tag

What is HTML <colgroup> Tag?

The HTML colgroup tag is used to group one or more columns inside a table for styling and structural purposes. It helps apply common styles or attributes to entire columns instead of repeating them for each table cell. The colgroup tag is placed right after the table tag and before the table rows begin. Inside it, the col tag is used to define individual columns or groups of columns.

This tag is useful for managing consistent column widths, background colors, or borders in large tables. It keeps the HTML table cleaner, easier to maintain, and more accessible for both developers and browsers.

Syntax of the HTML <colgroup> Tag

plaintext
<table>
  <colgroup>
    <col span="2" style="background-color: #f0f0f0">
    <col style="background-color: #d0e0f0">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
</table>

The colgroup tag starts with <colgroup> and ends with </colgroup>. It contains one or more <col> tags that specify properties for columns in the table.

Examples of HTML <colgroup> Tag

Example 1: Basic HTML Colgroup Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <colgroup>
    <col style="background-color: #f9f9f9">
    <col style="background-color: #e0f7fa">
  </colgroup>
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>HTML Basics</td>
    <td>3 Weeks</td>
  </tr>
  <tr>
    <td>CSS Fundamentals</td>
    <td>4 Weeks</td>
  </tr>
</table>

</body>
</html>

In this example, the colgroup tag applies different background colors to the first and second columns. It helps visually separate columns without styling each cell individually.

Example 2: SEO-Optimized HTML Colgroup Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <colgroup>
    <col span="2" style="background-color: #f0f0f0; width: 200px;">
    <col style="background-color: #d0f0d0;">
  </colgroup>
  <tr>
    <th>Service</th>
    <th>Category</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Web Design by Scholar247</td>
    <td>Development</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>SEO Optimization</td>
    <td>Marketing</td>
    <td>$200</td>
  </tr>
</table>

</body>
</html>

This SEO-friendly example groups two columns and assigns them a shared style, making the table clean and structured. It uses a brand name like "Scholar247" naturally, and defines specific widths and background colors for better visual balance.

Attributes of the HTML <colgroup> Tag

The HTML colgroup tag supports the following attributes:

• span: Defines how many columns the styling should apply to.
• style: Used to apply inline CSS properties like background-color or width.
• class: Adds a class name to target the column group with external CSS.
• id: Adds a unique identifier for scripting or styling purposes.

Best Practices for HTML <colgroup> Tag

• Always use the colgroup tag right after the table tag.
• Keep table structure clean by applying column styles through colgroup instead of inline cell styles.
• Use CSS classes instead of inline styles for better maintainability.
• Avoid using too many nested col or colgroup tags to keep HTML simple.
• Define consistent column widths for better alignment across rows.

FAQs About HTML <colgroup> Tag

Q1: What is the purpose of the HTML colgroup tag?

The colgroup tag groups one or more columns in a table so that shared styles or attributes can be applied easily to those columns.

Q2: Can I use multiple colgroup tags in one table?

Yes, you can use more than one colgroup tag in a single table if you need to style different column groups separately.

Q3: Is the colgroup tag required in every table?

No, it is optional. It is used mainly for styling or formatting purposes when you want to control the appearance of entire columns.

Q4: What is the difference between colgroup and col?

The colgroup tag defines a group of columns, while the col tag defines individual columns within that group.

Q5: Does the colgroup tag affect SEO?

Indirectly, yes. It improves table readability and accessibility, which helps search engines understand table data structure better.

HTML

Related Articles