گروه‌بندی ستون‌ها (colgroup و col)

colgroup و col: وقتی می‌خوای کل یه ستون رو یه‌جا استایل بدی

تا اینجا هر چیزی که درباره‌ی جدول یاد گرفتیم، بر اساس سطر بود؛ یعنی thead، tbody، tfoot و حتی colspan/rowspan همه از دید سطرها به جدول نگاه می‌کردن. اما گاهی نیاز داری کل یه ستون رو، فارغ از اینکه تو کدوم سطره، به‌طور یکجا هدف بگیری؛ مثلاً بخوای پس‌زمینه‌ی کل یه ستون خاص رو تغییر بدی. برای این کار HTML5 دو تگ داره: colgroup و col.

تگ colgroup چیه؟

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>محصول</th>
    <th>قیمت</th>
  </tr>
</table>

تگ colgroup یه گروه از ستون‌های جدول رو تعریف می‌کنه، و هر تگ col داخلش، دقیقاً به یه ستون خاص از جدول اشاره می‌کنه. تو این مثال، دو تا col داریم که به ترتیب به ستون اول (محصول) و ستون دوم (قیمت) اشاره می‌کنن.

چرا این تگ‌ها لازمن؟ نگاه ستونی به جدول

مشکلی که colgroup و col حل می‌کنن اینه که HTML به‌طور طبیعی جدول رو سطر به سطر می‌سازه (هر tr یه سطر جدید)، و هیچ راه مستقیمی برای اشاره‌ی مستقل به «کل یه ستون» وجود نداره؛ چون از نظر ساختاری، ستون فقط یه مفهوم انتزاعیه که از کنار هم قرارگرفتن سلول‌های سطرهای مختلف به‌وجود میاد. colgroup و col این امکان رو می‌دن که مستقیم به همون مفهوم انتزاعی «ستون» اشاره کنیم.

استفاده از col برای استایل‌دهی به کل یک ستون

<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col>
    <col style="background-color: #fff8e1;">
  </colgroup>
  <tr>
    <th>محصول</th>
    <th>تعداد</th>
    <th>قیمت</th>
  </tr>
  <tr>
    <td>کفش ورزشی</td>
    <td>۲</td>
    <td>۵۰۰,۰۰۰ تومان</td>
  </tr>
</table>

تو این مثال، بدون اینکه لازم باشه به‌طور جداگانه هر td ستون اول و سوم رو استایل بدیم، فقط با یه‌بار تعریف col برای هر ستون، رنگ پس‌زمینه‌ی کل اون ستون (تو تمام سطرها) تنظیم می‌شه. این خیلی کاربردی‌تر و مرتب‌تر از اینه که تک‌تک سلول‌های یه ستون رو دستی استایل بدی.

ویژگی span روی col: پوشش چند ستون با یه col

<table>
  <colgroup>
    <col span="2" style="background-color: #f0f0f0;">
    <col style="background-color: #fff8e1;">
  </colgroup>
  <tr>
    <th>نام</th>
    <th>نام‌خانوادگی</th>
    <th>امتیاز</th>
  </tr>
</table>

ویژگی span روی تگ col، مشخص می‌کنه اون یه col، در واقع نماینده‌ی چند ستون پشت‌سرهمه، نه فقط یکی. تو این مثال، اولین col با span="2"، همزمان هم ستون «نام» و هم ستون «نام‌خانوادگی» رو پوشش می‌ده و هر دو رو خاکستری رنگ می‌کنه، بدون اینکه لازم باشه دو تا col جدا بنویسیم.

یه مثال کامل و واقعی

<table>
  <caption>کارنامه‌ی تحصیلی دانش‌آموز</caption>
  <colgroup>
    <col>
    <col span="3" style="background-color: #e8f5e9;">
  </colgroup>
  <thead>
    <tr>
      <th>درس</th>
      <th>نیم‌سال اول</th>
      <th>نیم‌سال دوم</th>
      <th>میانگین</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ریاضی</td>
      <td>۱۸</td>
      <td>۱۹</td>
      <td>۱۸.۵</td>
    </tr>
  </tbody>
</table>

تو این مثال، ستون اول (درس) بدون رنگ خاصی می‌مونه، اما سه ستون بعدی (نیم‌سال اول، نیم‌سال دوم، میانگین) که همگی مربوط به نمرات هستن، با یه col و span="3" با پس‌زمینه‌ی سبز کم‌رنگ مشخص شدن؛ این کار بصری کمک می‌کنه کاربر سریع‌تر بفهمه کدوم بخش از جدول به «نمرات» مربوطه.

ترتیب و محل قرارگیری colgroup

مثل caption، تگ colgroup هم باید زود، یعنی بلافاصله بعد از caption (اگه وجود داشته باشه) یا در غیر این صورت بلافاصله بعد از تگ باز table، و قبل از thead بیاد:

<table>
  <caption>گزارش فروش</caption>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <!-- ... -->
  </thead>
</table>

آیا colgroup و col امروزه پرکاربردن؟

باید صادق باشیم: امروزه با وجود CSS مدرن و انتخابگرهای پیشرفته‌تر (که تو دوره‌های CSS باهاشون آشنا می‌شی)، خیلی از توسعه‌دهنده‌ها ترجیح می‌دن استایل‌دهی ستون‌ها رو با روش‌های دیگه‌ی CSS انجام بدن. با این حال، colgroup و col هنوزم برای مواردی مثل مشخص‌کردن عرض ثابت یه سری ستون خاص، یا پروژه‌هایی که نیاز به ساختار HTML خیلی صریح و معنایی دارن، کاربرد دارن.

چند اشتباه رایج

• قراردادن colgroup در جای اشتباه، مثلاً بعد از thead یا tbody، به‌جای در ابتدای جدول.
• تعداد اشتباه col ها که با تعداد واقعی ستون‌های جدول هم‌خوانی نداره.
• فراموش‌کردن ویژگی span وقتی چند ستون پشت‌سرهم باید یه رفتار مشترک داشته باشن، و به‌جاش نوشتن چند تا col تکراری.

بهترین روش‌ها

• colgroup و col رو بلافاصله بعد از caption (یا تگ باز table) و قبل از thead بنویس.
• وقتی چند ستون پشت‌سرهم رفتار یکسانی دارن، از ویژگی span برای کوتاه‌کردن کد استفاده کن.
• برای پروژه‌های ساده و کوچیک، لازم نیست حتماً از colgroup استفاده کنی؛ این تگ بیشتر برای جدول‌های بزرگ و ساختاریافته کاربرد داره.

نکته‌ی سئو

colgroup و col تأثیر مستقیمی روی سئو ندارند، چون بیشتر جنبه‌ی ساختاری و استایل‌دهی دارند تا معنای محتوایی؛ اما ساختار کلی و منظم جدول (که این تگ‌ها بخشی از آن هستند) می‌تواند به فهم بهتر گوگل از داده‌های جدولی کمک کند.

نکته‌ی دسترسی‌پذیری

colgroup و col معمولاً تأثیر مستقیمی بر نحوه‌ی خواندن جدول توسط صفحه‌خوان‌ها ندارند، چون این ابزارها بیشتر بر پایه‌ی th، scope و caption عمل می‌کنند؛ colgroup بیشتر برای استایل‌دهی بصری و گروه‌بندی منطقی ستون‌ها کاربرد دارد.

جمع‌بندی

تگ colgroup به همراه تگ‌های col امکان می‌دهد کل یک ستون یا گروهی از ستون‌های پشت‌سرهم، مستقل از سطرها، هدف قرار گیرد و استایل‌دهی شود. ویژگی span روی col امکان پوشش چند ستون با یک تگ واحد را فراهم می‌کند، و این ساختار باید همیشه در ابتدای جدول (بعد از caption و قبل از thead) نوشته شود.