HTML Table Colgroup

HTML Table में <colgroup> element का उपयोग पूरे column को एक साथ style या control करने के लिए किया जाता है।
यह खासतौर पर तब useful होता है जब आपको multiple cells पर same styling apply करनी हो।

Colgroup क्या होता है

<colgroup> table के columns को define करता है।
इसके अंदर <col> elements होते हैं, जो individual columns को represent करते हैं।

Colgroup का effect rows पर नहीं, columns पर पड़ता है।

Colgroup कहाँ लिखा जाता है

<colgroup> हमेशा <table> tag के अंदर और <thead>, <tbody>, <tr> से पहले लिखा जाता है।

Correct order: table
colgroup
thead / tbody
tr

Basic Colgroup Syntax

<colgroup>
  <col>
  <col>
</colgroup>

यह table के पहले दो columns को target करता है।

Simple Colgroup Example

<table border="1">
  <colgroup>
    <col style="background-color: lightblue;">
    <col style="background-color: lightyellow;">
  </colgroup>

  <tr>
    <th>Name</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>Delhi</td>
  </tr>
</table>

यहाँ पूरा पहला column blue और दूसरा yellow हो जाएगा।

Multiple Columns को One Style देना

एक ही <col> से multiple columns cover किए जा सकते हैं।

<colgroup>
  <col span="2" style="background-color: #f2f2f2;">
</colgroup>

span="2" का मतलब है यह style दो columns पर apply होगी।

Colgroup के साथ Width Control

Columns की width भी colgroup से control की जा सकती है।

<colgroup>
  <col style="width: 30%;">
  <col style="width: 70%;">
</colgroup>

यह responsive layout बनाने में मदद करता है।

CSS Class के साथ Colgroup

Inline style की बजाय CSS class use करना better practice है।

<style>
.col1 {
  background-color: #e3f2fd;
}
.col2 {
  background-color: #fff3e0;
}
</style>

<table>
  <colgroup>
    <col class="col1">
    <col class="col2">
  </colgroup>
</table>

Border Styling with Colgroup

Column borders भी colgroup से apply की जा सकती हैं।

<colgroup>
  <col style="border-right: 2px solid black;">
</colgroup>

यह report और comparison tables में useful होता है।

Colgroup और Colspan Relation

<colgroup> actual columns पर काम करता है, colspan से merged cells पर direct control नहीं करता।
Colspan वाले tables में colgroup use करते समय planning जरूरी होती है।

Colgroup से क्या नहीं कर सकते

Text alignment per cell
Individual row styling
Padding per cell

ये सभी <td> और <th> पर apply किए जाते हैं।

Real World Use Cases

Price comparison tables
Report columns highlight करना
Important data columns mark करना
Dashboard tables

Common Mistakes

Colgroup को गलत जगह लिखना
Columns count match न करना
Colspan वाले tables में confusion
Inline style का overuse

Best Practices

Colgroup का use column-based styling के लिए करें
Complex tables पहले plan करें
CSS classes prefer करें
Readability और clarity पर focus रखें

Summary

HTML <colgroup> element पूरे column को style और control करने के लिए use होता है।
यह table design को clean और manageable बनाता है।
Large और structured tables में colgroup का सही use professional layout देता है।