HTML — گروه ستون (colgroup)

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

گروه ستون (colgroup)

تگ «گروه ستون (colgroup)» یک دسته ستون در جدول می سازد. با آن، استایل را یک جا به چند ستون می دهی. این یعنی کد تکراری کمتر و نظم بیشتر؛ مثل جدول نمره های کلاس که ستون هایش یکدست می شوند.

نمونه سریع colgroup با col

&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col span="2" style="background-color:red"&gt;
    &lt;col style="background-color:yellow"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;ISBN&lt;/th&gt;
    &lt;th&gt;Title&lt;/th&gt;
    &lt;th&gt;Price&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3476896&lt;/td&gt;
    &lt;td&gt;My first HTML&lt;/td&gt;
    &lt;td&gt;$53&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

مشاهده در ادیتور

colgroup کجا قرار می گیرد؟

تگ colgroup باید فرزند مستقیم جدول باشد. بعد از caption می آید. سپس قبل از thead، tbody، tfoot و هر tr قرار می گیرد. بنابراین مرورگر ساختار را درست می فهمد.

نکته: برای هر ستون متفاوت، از تگ col داخل colgroup استفاده کن. همچنین ساختار جدول را با تگ table شروع کن.

ویژگی span در colgroup

ویژگی «span» تعداد ستون های پوشش داده شده را تعیین می کند. مثلاً span="3" یعنی این گروه سه ستون پشت سرهم را شامل می شود. این کار تعریف ها را کوتاه و تمیز نگه می دارد.

نمایش پیش فرض مرورگرها

colgroup {
  display: table-column-group;
}

مشاهده در ادیتور

گام های عملی

یک جدول ساده بساز.
بعد از caption، یک colgroup اضافه کن.
داخل آن، چند col با style یا span بگذار.

هشدار: colgroup باید قبل از thead، tbody، tfoot و tr بیاید. جای نادرست، ساختار جدول را به هم می زند.

جمع بندی سریع

colgroup گروهی از ستون ها را تعریف می کند.
استایل ستون ها یک بار و سریع اعمال می شود.
span تعداد ستون های پوشش را مشخص می کند.
جای colgroup در ابتدای ساختار جدول است.

قبلی: ستون (col) بعدی: داده (data)

فهرست سرفصل‌های HTML