تگ colgroup در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ colgroup در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

تگ colgroup چیست؟

تگ colgroup برای انتخاب ستون های جدول به کار می رود. با استفاده از این تگ می توانید ستون های جدول را به دلخواه انتخاب کرده و تغییرات مورد نظر را اعمال کنید.

این تگ با <colgroup> شروع شده و با </colgroup> پایان می یابد.

<colgroup></colgroup>

نکات مهم

1- تگ colgroup درون تگ table قرار می گیرد.

2- تگ colgroup یک نوع نگهدارنده است و برای انتخاب ستون های جدول باید از تگ col کمک بگیریم.

3- در صورت وجود تگ caption در جدول باید تگ colgroup را بعد از آن قرار دهیم.

4- تگ colgroup بایستی قبل از تگ های thead ، tbody و tfoot تعریف شود.

مثال تگ colgroup

در مثال زیر تمام ستون ها را انتخاب کرده و رنگ پس زمینه آن را تغییر دادیم.

کد:

<table>
  <caption>لیست دانش آموزان</caption>
  <colgroup>
    <col style="background:red;">
    <col style="background:green;">
    <col style="background:blue;">
  </colgroup>
  <thead>
    <tr>
      <th>ردیف</th>
      <th>کلاس</th>
      <th>دانش آموز</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>الف</td>
      <td>رضا</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ب</td>
      <td>علی</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>جمع</td>
      <td>دو کلاس</td>
      <td>دو دانش آموز</td>
    </tr>
  </tfoot>
</table>

اجرا

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ colgroup در اکثر مرورگرها به صورت زیر است:

colgroup {
  display: table-column-group;
}

سازگاری با مرورگرها

تگ colgroup با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS