HTML Table Colgroup

0
8K

HTML Table Colgroup

The colgroup element in HTML is used to group columns within a table. It allows you to apply styles or attributes to a group of columns simultaneously, making it easier to manage table layouts and styles.

Basic Usage

HTML
<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col style="background-color: #ddd;">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td>$200</td>
  </tr>
</table>

In this example, the colgroup element groups the two columns. The first col element applies a background color to the first column, while the second col element applies a background color to the second column.

Benefits of Using Colgroup

  • Simplified Styling: You can apply styles to multiple columns at once, reducing the amount of CSS code needed.
  • Improved Structure: It provides a clear visual structure for the table, making it easier to understand and maintain.
  • Accessibility: It can be helpful for screen readers and assistive technologies to understand the table's structure.

Additional Attributes

  • span: Specifies the number of columns that the col element should span.
  • width: Sets the width of the column.

Example with Span and Width

HTML
<table>
  <colgroup>
    <col span="2" style="background-color: #f2f2f2;">
    <col width="100px">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>$100</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td>$200</td>
    <td>20</td>
  </tr>
</table>

In this example, the first col element spans two columns and has a background color, while the second col element has a fixed width.

By using the colgroup element, you can create more efficient and maintainable HTML tables, especially for complex layouts with multiple columns and styles.

Like
2
Search
Categories
Read More
Computer Programming
Branching Basics and Multi-Branch Statements in Python
Branching is a fundamental concept in programming that allows your code to make decisions and...
Other
10 ways to show love
Here are 10 meaningful ways to show love:Quality Time – Spend uninterrupted, focused time...
By Tebtalks Access 2024-09-23 04:45:26 1 6K
Computer Programming
HTML: The Building Blocks of the Web
Definition HTML stands for HyperText Markup Language. It's the standard language used to create...
By HTML PROGRAMMING LANGUAGE 2024-08-13 03:09:45 0 6K
Games
Nulls Brawl Download With All Fighters Open and New Stuff Like Lumi
So here’s the thing, Brawl Stars is good and all, but sometimes it gets tiring when you...
By Wamuu Wamuu 2025-04-14 13:55:53 0 4K
Tebtalks https://tebtalks.com