آموزش و یادگیری تگ col در HTML

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

تگ col در HTML چيست؟

تگ <col> براي مشخص کردن ويژگي‌ها يا استايل‌هاي مربوط به ستون‌هاي يک جدول (<table>) استفاده مي‌شود. اين تگ درون تگ <colgroup> قرار مي‌گيرد و به جاي ويرايش سلول‌هاي تکي، مي‌توانيد کل يک ستون را يکجا تغيير دهيد.

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

<table border="1">
  <colgroup>
    <col style="background-color: #f9f9f9;">
    <col style="background-color: #e3f2fd;">
  </colgroup>
  <tr>
    <th>نام</th>
    <th>نمره</th>
  </tr>
  <tr>
    <td>علي</td>
    <td>??</td>
  </tr>
</table>

در اين مثال، با استفاده از تگ‌هاي <col> رنگ پس‌زمينه هر ستون جداگانه تنظيم شده است.

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

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

<table border="1">
  <colgroup>
    <col span="2" style="background-color: #fff9c4;">
    <col style="background-color: #bbdefb;">
  </colgroup>
  <tr><th>نام</th><th>نام خانوادگي</th><th>شهر</th></tr>
  <tr><td>مريم</td><td>احمدي</td><td>اصفهان</td></tr>
</table>

در اين نمونه، ويژگي span="2" باعث شده است که استايل ستون اول براي دو ستون اول جدول اعمال شود.

تفاوت col و colgroup

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

استايل‌دهي حرفه‌اي به ستون‌ها با CSS

<style>
  col.name-column { background-color: #fce4ec; }
  col.score-column { background-color: #e8f5e9; }
</style>

<table border="1">
  <colgroup>
    <col class="name-column">
    <col class="score-column">
  </colgroup>
  <tr><th>نام</th><th>نمره</th></tr>
  <tr><td>زهرا</td><td>??</td></tr>
</table>

با اين روش، استايل‌ها از طريق CSS مديريت مي‌شوند و کد HTML تميز و خوانا باقي مي‌ماند.

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

• تگ <col> هيچ محتوايي نمايش نمي‌دهد، فقط استايل و ويژگي‌هاي ستون را تعيين مي‌کند.
• فقط مي‌توان از ويژگي‌هاي مربوط به ظاهر (مثل رنگ يا عرض) در آن استفاده کرد.
• اگر مرورگر ويژگي‌اي را در <col> پشتيباني نکند، ناديده گرفته مي‌شود.
• براي ساخت جدول‌هاي واکنش‌گرا بهتر است از CSS Grid يا Flexbox استفاده شود.

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

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