تگ col در HTML

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

تگ col چیست؟

تگ col اشاره به کلمه column دارد و ترجمه آن به زبان فارسی ستون می شود. این تگ، درون تگ colgroup قرار می گیرد و برای انتخاب ستون های جدول به کار می رود.

پیشنهاد می شود مطلب تگ colgroup را مطالعه بفرمایید.

تگ col نیاز به بستن ندارد و ساختار آن به شکل زیر است:

<col>

صفت span

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

با استفاده از این صفت می توانیم با تعریف یک تگ col چند ستون را انتخاب کنیم.

<col span="Number">

مثال های تگ col

مثال 1:

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

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

اجرا

مثال 2:

در مثال زیر با استفاده دو تگ col سه ستون جدول را انتخاب کردیم.

چطور؟ با استفاده از صفت span و با مقدار عدد 2.

پس زمینه ستون هایی که با صفت span انتخاب شده را به رنگ قرمز و ستونی را که با تگ col بدون صفت span انتخاب کردیم را به رنگ آبی تغییر دادیم.

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

اجرا

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

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

col {
  display: table-column;
}

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

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

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