تعریف و کاربرد
تگ <colgroup> مخفف کلمه column group به معنی گروه ستون ها است و برای افزودن ویژگی ظاهری CSS به ستون های جدول به صورت گروهی استفاده می شود.
با این تگ می توانیم یک یا چند ستون را به صورت یک گروه انتخاب کنیم و ویژگی ظاهری CSS را روی گروه اعمال کنیم. و از چندبار نوشته شدن کد CSS جلوگیری می کند.
این تگ شامل یک ویژگی به نام span می باشد که به واسطه این ویژگی می توانیم تعداد ستون های هر گروه را انتخاب کنیم.
از این تگ باید درون تگ <table> و بعد از تگ <caption> و قبل از تگ <thead>, <tbody>, <tfoot> و <tr> نوشته شود.
اگر بخواهیم چند گروه متفاوت درست کنیم، می توانیم از تگ <col> داخل تگ <colgroup> استفاده می شود.
برای فهم بهتر به مثال زیر توجه کنید:
<table>
<colgroup>
<col style="background-color:blue">
<col span="3" style="background-color:black">
<col style="background-color:pink">
<col span="5" style="background-color:red">
</colgroup>
<table>در مثال بالا:
- در خط 3: ستون اول با رنگ پس زمینه آبی (یک گروه با یک ستون)
- در خط 4: ستون دوم، سوم و چهارم با رنگ پس زمینه مشکی (یک گروه با سه ستون)
- در خط 5: ستون پنجم با رنگ پس زمینه صورتی(یک گروه با یک ستون)
- در خط 4: ستون ششم، هفتم، هشتم و نهم و دهم با رنگ پس زمینه قرمز (یک گروه با پنج ستون)
سازگاری با مرورگر
| # | کروم | ادج | فایرفاکس | سافاری | اپرا |
|---|---|---|---|---|---|
| <colgroup> |
ویژگی ها
| ویژگی ها | مقادیر | توضیحات |
|---|---|---|
| span |
number
|
تعیین می کند که چه تعداد ستون در تگ های مربوطه در سمت راست، باید باز شوند. |
ویژگی های سراسری
تگ <colgroup> از ویژگی های سراسری HTML پشتیبانی می کند.
ویژگی های رویداد
تگ <colgroup> از ویژگی های رویداد HTML پشتیبانی می کند.
استایل css پیش فرض
بیشتر مرورگر ها تگ <colgroup> را با استایل پیشفرض زیر نمایش می دهند:
