HTML — جداول - گروه جدول (Table Colgroup)

آخرین بروزرسانی: 1404/07/05

قبلی: جداول - استایل دهی (Table Styling) بعدی: لیست ها (Lists)

جداول - گروه جدول (Table Colgroup) در HTML

تگ <colgroup> در HTML برای استایل دهی به ستون های خاص یک جدول استفاده می شود. این تگ همراه با <col> به شما امکان می دهد چند ستون را یکجا یا به صورت جداگانه استایل کنید.

استفاده از Colgroup

برای استایل دهی به ستون های خاص جدول از تگ <colgroup> و <col> استفاده کنید. ویژگی span تعداد ستون هایی که تحت تأثیر قرار می گیرند را مشخص می کند.

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
  </tr>
</table>

نکته: تگ <colgroup> باید مستقیماً زیر تگ <table> قرار گیرد و قبل از <thead>، <tr> و سایر تگ ها نوشته شود.

ویژگی های مجاز CSS

تنها برخی ویژگی های CSS روی <colgroup> اعمال می شوند:

width
visibility
background
border

هشدار: سایر ویژگی های CSS روی <colgroup> بی اثر خواهند بود.

چندین Col در Colgroup

برای استایل دهی متفاوت به ستون ها، می توانید از چند <col> در یک <colgroup> استفاده کنید.

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
</table>

Colgroup خالی

اگر می خواهید تنها بخشی از جدول را استایل دهید، می توانید ستون های قبل از آن بخش را با <col> خالی تعریف کنید.

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
</table>

مخفی کردن ستون ها

می توانید ستون ها را با ویژگی visibility: collapse مخفی کنید.

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
</table>

خلاصه

<colgroup> برای استایل دهی گروهی به ستون ها استفاده می شود.
فقط برخی ویژگی های CSS مانند width و background پشتیبانی می شوند.
می توانید چندین <col> تعریف کنید یا ستون ها را مخفی نمایید.

برای ادامه مطالعه به بخش استایل دهی جدول در HTML و لیست ها در HTML مراجعه کنید.