HTML Table Colgroup

एक पूरे table column को style करने का मतलब आम तौर पर हर row में उस column की हर single cell पर एक जैसा rule apply करना होता है, जो repetitive है। <colgroup> और <col> आपको table के top के पास एक single जगह से, individual row markup को बिल्कुल छुए बिना, एक पूरे column को सिर्फ एक बार style या size करने देते हैं।

In this page:

colgroup से Columns को Group करना
col Element से एक Column को Size करना
span से कई Columns को Span करना
किसी Column को Visually Highlight करना
colgroup बनाम Per-Cell Styling कब उपयोग करें

Syntax

markup

<table>
  <colgroup>
    <col span="number" style="background-color: colorvalue;">
  </colgroup>
  <tr><td>Cell</td></tr>
</table>

colgroup से Columns को Group करना

<colgroup> एक structural wrapper है जिसे opening <table> tag के ठीक बाद, किसी भी row से पहले रखा जाता है, जिसमें उस हर column के लिए एक <col> element होता है जिसे आप individually reference या style करना चाहते हैं, बिना किसी single row के markup को छुए।

Note:

colgroup को table का बिल्कुल पहला child रखें, thead या tbody से पहले, वरना ब्राउज़र इसे ignore कर देंगे।
Accepted attributes:
span — positive integer; columns की संख्या (जब कोई col children न हों)
Global attributes (class, id, style)

Warning: markup में किसी भी row content के बाद आने वाला colgroup invalid है और browser इसे बस नजरअंदाज कर देगा।

उदाहरण: Grouping Columns with colgroup

markup

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

col Element से एक Column को Size करना

किसी individual <col> element पर width सेट करना उस पूरे column को एक ही जगह size करता है, न कि हर row में उसी column के नीचे हर single cell पर वही width सेट करना -- wide tables के लिए यह कहीं ज़्यादा maintainable approach है।

Note:

consistent column sizing के लिए col width settings का उपयोग करें जो बाद में rows जोड़े या हटाए जाने पर भी सही बनी रहे।
Accepted attributes:
span — positive integer
style/class — CSS से width सेट करें
width — obsolete

Warning: col पर सभी browsers में reliably सीधे सिर्फ एक limited set of CSS properties, मुख्य रूप से width, ही support होता है।

उदाहरण: Sizing a Column with the col Element

markup

<table>
  <colgroup>
    <col style="width: 70%;">
    <col style="width: 30%;">
  </colgroup>
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
</table>

span से कई Columns को Span करना

किसी single <col> element पर span attribute उसे एक साथ कई consecutive columns represent करने देता है, हर column के लिए एक अलग <col> लिखने के बजाय -- किसी एक col element पर span="3" एक row में तीन plain col elements लिखने के बराबर है।

Note:

जब कई consecutive columns में exact एक जैसी width या styling हो, तो colgroup markup को छोटा करने के लिए span का उपयोग करें।
Accepted values:
span — positive integer (default 1)
col और colgroup पर valid

Warning: table के actual column count से मेल न खाने वाली एक col span value column-specific styling को misalign कर देगी।

उदाहरण: Spanning Multiple Columns with span

markup

<table>
  <colgroup>
    <col span="3" style="width: 33%;">
  </colgroup>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

किसी Column को Visually Highlight करना

width के अलावा, किसी col element को CSS के साथ target करके पूरे column पर एक साथ background color apply किया जा सकता है, जो किसी महत्वपूर्ण column, जैसे "Total" column, को visually highlight करने के लिए उपयोगी है, बिना उसमें हर individual cell में class जोड़े।

Note: किसी एक key column (जैसे total या status column) को हर cell पर manually class लगाने के बजाय colgroup के ज़रिए highlight करें।

Warning: col के जरिए Background-color support width support की तुलना में अलग-अलग browsers में ज्यादा limited और असंगत है, इसलिए हमेशा visually verify करें कि यह expected रूप से render होता है।

उदाहरण: Highlighting a Column Visually

markup

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow;">
  </colgroup>
  <tr>
    <td>Item</td>
    <td>Total</td>
  </tr>
</table>

colgroup बनाम Per-Cell Styling कब उपयोग करें

colgroup को column-wide sizing और simple background highlighting के लिए ही बचाकर रखना बेहतर है; ज़्यादा complex per-column styling (जैसे text-align, borders, या font styling) के लिए, td और th cells पर apply किया गया ज़्यादा व्यापक रूप से supported CSS :nth-child(n) selector आमतौर पर ज़्यादा reliable choice है।

Note: width और simple highlighting के लिए specifically colgroup का उपयोग करें; ज़्यादा visually complex किसी भी चीज़ के लिए cells पर :nth-child selectors का उपयोग करें।

Warning: width और background से आगे properties के लिए colgroup पर भरोसा करना अलग-अलग browsers में असंगत rendering पैदा कर सकता है।

उदाहरण: When to Use colgroup vs Per-Cell Styling

markup

<table>
  <colgroup>
    <col style="width: 50%;">
  </colgroup>
  <tr>
    <td style="text-align: right;">Complex per-cell style</td>
    <td>Simple width</td>
  </tr>
</table>

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Styling Next Lesson → HTML Lists

HTML Table Colgroup

colgroup से Columns को Group करना

col Element से एक Column को Size करना

span से कई Columns को Span करना

किसी Column को Visually Highlight करना

colgroup बनाम Per-Cell Styling कब उपयोग करें

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code