آموزش HTML – تگ colgroup

نویسنده : مرتضی گنج | تاریخ انتشار : 2019/12/29 | بخش : آموزش HTML

تعریف و کاربرد تگ colgroup در HTML

تگ colgroup تگی است که با استفاده از آن می توان یک یا چندین ستون از جدول را انتخاب و سپس برای آن ستون ها استایل/ مخصوصی را تعریف نمود.

برای انتخاب هرچند تعداد از ستون های جدول ما باید از تگ <col> در درون تگ <colgroup> استفاده نماییم سپس برای این ستون ها استایل (استفاده از CSS) تعریف نماییم.

  • تگ <colgroup> گروهی از یک یا چند ستون در یک جدول را جهت قالب بندی مشخص می کند.
  • تگ <colgroup> برای سبک یا استایل دادن به کل ستون، به جای تکرار سبک برای هر سلول و برای هر ردیف استفاده می شود.
  • تگ <colgroup> باید به عنوان یک فرزند برای تگ <table> باشد که بعد از عنصر <caption> وقبل از عناصر <thead> ،<tbody> ،<tfoot> و <tr> قرار می گیرد.

 

مثال از تگ colgroup در HTML

<table>
  <colgroup>
    <col span="2" style="background-color:yellow;">
    <col style="background-color:pink;">
    <col style="background-color:lightgreen;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Family</th>
    <th>Number</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Morteza</td>
    <td>Ganj</td>
    <td>5546</td>
    <td>Ok</td>
  </tr>
</table>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ <colgroup>

Element
<colgroup> بله بله بله بله بله

جدول صفات تگ colgroup در HTML

نام صفت  مقدار توضیح
align left
right
center
justify
char
در HTML5 پشتیبانی نمی شود.
مشخص کننده تراز محتوا نسبت به عنصر <col>
char character در HTML5 پشتیبانی نمی شود.
مشخص کننده تراز محتوا نسبت به عنصر <col> با توجه به کاراکترها
charoff number در HTML5 پشتیبانی نمی شود.
مشخص کننده تراز تعداد کاراکترهای محتوا از کاراکترهای مشخص شده به وسیله ویژگی char
span number مشخص می کند که عنصر <col> باید به اندازه چند ستون باشد.
valign top
middle
bottom
baseline
درHTML5 پشتیبانی نمی شود.
مشخص کننده تراز عمودی محتوا نسبت به یک عنصر <col>
width %
pixels
relative_length
در HTML5 پشتیبانی نمی شود.
مشخص کننده پهنای عنصر <col>