تگ col در HTML

یکی دیگر از تگ های HTML را با نام تگ col در HTML بررسی می کنیم.

نکات اصلی تگ col در HTML

• عنصر <col> ستون ها را در HTML تعریف و سبک می کند.
• عنصر <colgroup> والد <col> است.
• تگ <col> ممکن است برای طراحی ستون ها مناسب به نظر برسد ، اما محدودیت ها و معایبی دارد.

استفاده از تگ col

تگ HTML col ویژگی های ستون ها را در تگ <colgroup> مشخص می کند.

<table>
  <colgroup>
    <col style="background-color: bisque;">
  </colgroup>
  <tr>
    <th>Subject</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>87</td>
  </tr>
</table>

نکته: نیازی به درج تگ <col> در اسناد HTML نیست.

استفاده از عنصر <col> برای گروه بندی ستون ها در HTML چندین مسئله دارد:

• ستون ها در واقع شامل سلول های منفرد نیستند: این ردیف ها ، ستون ها نیستند كه جداول را در HTML تعریف می كنند. بنابراین ، سبک های استفاده شده در سطرها می توانند جایگزین سبک های ستون ها در HTML شوند.
• عنصر <col> تعداد محدودی از خصوصیات CSS را دستکاری می کند: قابلیت مشاهده ، عرض ، پس زمینه و حاشیه. به عنوان مثال ، شما نمی توانید متن c را تغییر دهید.

ویژگی های تگ col

Span

ویژگی span مشخص می کند که چند ستون عنصر <col> وجود داشته باشد.

<table>
  <colgroup>
    <col span="1" style="background-color: cornsilk;">
    <col style="background-color: bisque;">
  </colgroup>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>White Tape</td>
    <td>$23</td>
  </tr>
</table>

ویژگی های منسوخ شده

align

ترازبندی افقی محتوای مربوط به عنصر <col> را تنظیم می کند. در HTML5 پشتیبانی نمی شود: به جای آن از ویژگی تراز کردن متن CSS استفاده کنید.

<table style="width: 100%;">
  <col align="left">
  <col align="right">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Biscuit</td>
    <td>$5</td>
  </tr>
</table>

char

این کاراکتر را برای تراز کردن سلول ها در یک جدول نشان داد. در HTML5 پشتیبانی نمی شود.

<table style="width: 100%;">
  <col align="left">
  <col align="char" char=".">
  <tr>
    <th>Name</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Ryan</td>
    <td>$100.00</td>
  </tr>
  <tr>
    <td>Franklin</td>
    <td>$70.00</td>
  </tr>
</table>

charoff

مشخص کرد که چند کاراکتر داده ستون را از نویسه های تراز جبران می کند. در HTML5 پشتیبانی نمی شود.

<table style="width: 100%;">
  <col align="left">
  <col align="char" char="." charoff="2">
  <tr>
    <th>Name</th>
    <th>Earnings</th>
  </tr>
  <tr>
    <td>Patrick</td>
    <td>$140.00</td>
  </tr>
  <tr>
    <td>Samantha</td>
    <td>$220.00</td>
  </tr>
</table>

valign

این قوانین ترازبندی عمودی را برای محتوای عنصر <col> تنظیم می کند. از آنجا که HTML5 از این ویژگی پشتیبانی نمی کند ، به جای آن از ویژگی vertical-align استفاده کنید.

<table style="height: 200px;">
  <col valign="top">
  <col valign="bottom">
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Daniel</td>
    <td>Executive</td>
  </tr>
</table>

width در تگ col

عرض ستون جدول HTML را برای یک عنصر <col> تعریف کرد. در HTML5 پشتیبانی نمی شود: از ویژگی CSS به نام width به عنوان جایگزین استفاده کنید.

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Name</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>Daniel</td>
    <td>Management</td>
  </tr>
  <tr>
    <td>Patrick</td>
    <td>Sales</td>
  </tr>
</table>

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.