آموزش و يادگيري تگ colgroup در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، ياد مي‌گيريم تگ <colgroup> چيست و چطور براي گروه‌بندي و استايل‌دهي به ستون‌هاي جدول در HTML از آن استفاده مي‌شود. اين تگ معمولاً همراه با <col> به کار مي‌رود تا ظاهر جدول‌ها را حرفه‌اي‌تر و مديريت آن‌ها ساده‌تر شود.

تگ colgroup در HTML چيست؟

تگ <colgroup> براي گروه‌بندي يک يا چند ستون در جدول HTML استفاده مي‌شود. اين تگ معمولاً بلافاصله بعد از تگ <table> و قبل از اولين رديف جدول (<tr>) قرار مي‌گيرد. هر تگ <col> درون <colgroup>، نمايانگر يک ستون يا مجموعه‌اي از ستون‌ها است.

ساختار کلي تگ colgroup

<table border="1">
  <colgroup>
    <col style="background-color: #f8bbd0;">
    <col style="background-color: #bbdefb;">
  </colgroup>
  <tr>
    <th>نام</th>
    <th>شهر</th>
  </tr>
  <tr>
    <td>محمد</td>
    <td>تهران</td>
  </tr>
</table>

در اين مثال، با استفاده از <colgroup> دو ستون تعريف شده‌اند که هرکدام رنگ پس‌زمينه متفاوتي دارند.

ويژگي‌هاي مهم تگ colgroup

مثال: استفاده از ويژگي span در colgroup

<table border="1">
  <colgroup span="2" style="background-color: #f0f4c3;"></colgroup>
  <colgroup style="background-color: #c8e6c9;"></colgroup>
  <tr><th>نام</th><th>نام خانوادگي</th><th>شهر</th></tr>
  <tr><td>زهرا</td><td>مرادي</td><td>شيراز</td></tr>
</table>

در اين مثال، اولين گروه شامل دو ستون (نام و نام خانوادگي) است که رنگ پس‌زمينه مشابهي دارند.

تفاوت colgroup و col

• <colgroup> براي گروه‌بندي ستون‌ها به‌صورت کلي استفاده مي‌شود.
• <col> براي استايل‌دهي دقيق‌تر به هر ستون جداگانه کاربرد دارد.
• در يک جدول مي‌توان چندين <colgroup> داشت.
• هر تگ <col> بايد داخل يک <colgroup> قرار گيرد.

نمونه استايل‌دهي با CSS و colgroup

<style>
  colgroup.admin { background-color: #fce4ec; }
  colgroup.user { background-color: #e3f2fd; }
</style>

<table border="1">
  <colgroup class="admin">
    <col span="2">
  </colgroup>
  <colgroup class="user">
    <col>
  </colgroup>
  <tr><th>نام</th><th>سطح</th><th>شهر</th></tr>
  <tr><td>علي</td><td>مدير</td><td>تبريز</td></tr>
</table>

با استفاده از کلاس‌ها، مي‌توانيد چند گروه از ستون‌ها را با رنگ‌ها يا استايل‌هاي متفاوت از هم متمايز کنيد.

نکات مهم درباره تگ colgroup

• اين تگ بايد بلافاصله بعد از تگ <table> و قبل از اولين سطر (<tr>) بيايد.
• در برخي مرورگرها، ويژگي‌هاي خاص ممکن است فقط روي <col> اعمال شوند.
• براي تنظيم عرض ستون‌ها نيز مي‌توان از <colgroup> استفاده کرد.
• در HTML5 تگ <colgroup> همچنان پشتيباني مي‌شود و کاملاً معتبر است.

مثال: تنظيم عرض ستون‌ها

<table border="1">
  <colgroup>
    <col style="width: 40%;">
    <col style="width: 30%;">
    <col style="width: 30%;">
  </colgroup>
  <tr><th>نام</th><th>سن</th><th>شهر</th></tr>
  <tr><td>رضا</td><td>??</td><td>مشهد</td></tr>
</table>

در اين مثال، هر ستون عرض مشخصي دارد و مرورگر به‌صورت خودکار اندازه‌ها را تنظيم مي‌کند.

براي يادگيري کامل مفاهيم HTML و طراحي جدول‌ها، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.