عنصر <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 وجود داره که اجازه استفاده در 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>
...
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/