گروه بندی ستون ها در جداول HTML

گروه‌بندی ستون‌ها در جداول HTML

عنصر <colgroup> برای استایل‌دهی به ستون‌های خاصی از یک جدول استفاده میشه.

HTML Table Colgroup

اگر می‌خواهید دو ستون اول یک جدول را استایل دهید، از عناصر <colgroup> و <col> استفاده کنید.

عنصر <colgroup> باید به عنوان یک container (ظرف) برای مشخصات ستون‌ها استفاده بشه. هر گروه با یک عنصر <col> مشخص میشه. ویژگی span مشخص می‌کنه که استایل روی چند ستون اعمال بشه. ویژگی style استایلی رو که باید به ستون‌ها اعمال بشه، مشخص می‌کنه.

مثال:

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

نکته: تگ <colgroup> باید فرزند یک عنصر <table> باشه و باید قبل از هر عنصر جدول دیگه مثل <thead>، <tr>، <td> و غیره قرار بگیره، اما اگه عنصر <caption> وجود داشت، باید بعد از اون باشه.

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

فقط یک انتخاب بسیار محدود از ویژگی‌های CSS وجود داره که اجازه استفاده در colgroup رو دارن:

• ویژگی width

• ویژگی visibility

• background properties (ویژگی‌های پس‌زمینه)

• border properties (ویژگی‌های حاشیه)

تمام ویژگی‌های CSS دیگه هیچ تأثیری روی جداول شما نخواهند داشت.

عناصر Col چندگانه

اگه می‌خواهید چندین ستون رو با استایل‌های مختلف استایل بدید، می‌تونید از بیش از یک عنصر <col> داخل <colgroup> استفاده کنید:

مثال:

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

Colgroup های خالی

اگر می‌خواهید ستون‌هایی رو در وسط یک جدول استایل بدید، یک عنصر <col> "خالی" (بدون استایل) برای ستون‌های قبلی وارد کنید:

مثال:

<table>
    <colgroup>
        <col span="3">
        <col span="2" style="background-color: pink">
    </colgroup>
    <tr>
        <th>MON</th>
        <th>TUE</th>
        <th>WED</th>
        <th>THU</th>
        ...
    </tr>
</table>

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

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

مثال:

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...