گروه ستون ها (Table Colgroup)
می خواهیم «گروه ستون ها» را یاد بگیریم. «گروه ستون ها (Colgroup)» ظرف ستون هاست. سپس با «ستون (Col)» هر گروه را استایل می دهیم. مثل رنگ کردن ستون های جدول نمره ها در دفتر مدرسه.
کاربرد گروه ستون ها (Table Colgroup)
با <colgroup> و <col> می توانی چند ستون اول را یک جا استایل بدهی.
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
نکته: مقدار span تعداد ستون های مشمول است. مقدار style هم خود استایل است.
هشدار: تگ <colgroup> بعد از <caption> و قبل از <thead>، <tr> و سلول ها بیاید.
چندین گروه با استایل های متفاوت
می توانی چند <col> جدا بگذاری و هرکدام را متفاوت رنگ کنی.
<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>
<th>FRI</th>
</tr>
</table>
پرش تا میانه با گروه خالی
می خواهی وسط جدول را استایل بدهی؟ اول چند ستون را خالی بگذار.
<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>
<th>FRI</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>
<th>FRI</th>
</tr>
</table>
نکته: در <colgroup> فقط چند ویژگی CSS اثر دارند: width، visibility، خواص background و border.
گام های عملی
- یک
<colgroup>بعد از<caption>بگذار. - با
spanتعداد ستون ها را تعیین کن. - استایل مناسب را روی
<col>تنظیم کن.
لینک های داخلی: استایل دهی جدول، سربرگ های جدول، و گروه ستون ها.
جمع بندی سریع
<colgroup>ظرف تعریف ستون هاست.spanتعداد ستون های هدف را مشخص می کند.- فقط چند ویژگی CSS روی آن اثر دارند.
- محل قرارگیری قبل از ساختار جدول است.