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

آموزش تگ colgroup در HTML - راهنمای کار با ستون های جدول در html

برای تعریف یک یا چند ستون برای قالب بندی گروهی از تگ colgroup استفاده می شود. به این ترتیب به جای تکرار استایل دهی به هر سلول یا ستون جدول، یک یا ...

برای تعریف یک یا چند ستون برای قالب بندی گروهی از تگ colgroup استفاده می شود. به این ترتیب به جای تکرار استایل دهی به هر سلول یا ستون جدول، یک یا چند ستون را به صورت گروهی می توان استایل دهی کرد.

تگ caption بعد از تگ table و تگ caption قرار گرفته و برای استایل دهی از تگ col درون تگ colgroup استفاده می شود.

مثال:

<table>
<colgroup>
 <col span="3" style="background-color:yellow">
 <col style="background-color:lightgreen;">
</colgroup>
<tr>
 <th>Name</th>
 <th>Family</th>
 <th>Number</th>
 <th>Status</th>
</tr>
<tr>
 <td>Sadegh</td>
 <td>Asadi</td>
 <td>5546</td>
 <td>Ok</td>
</tr>
<tr>
 <td>Mina</td>
 <td>Jamali</td>
 <td>6673</td>
 <td>Ok</td>
</tr>
</table>


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

تگ <colgroup> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر کروم فایرفاکس اپرا سافاری اینترنت اکسپلورر / اج
پشتیبانی بله بله بله بله بله


ویژگی ها

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


پشتیبانی از ویژگی ها و رویدادهای عمومی

تگ <colgroup> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.


دستورات CSS پیش فرض

معمولا مرورگرها تگ colgroup را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.

colgroup {
  display: table-column-group;
}

 

موضوع: آموزش HTML
کلمات کلیدی: ، ، ، ، ، ، ، ، ، ، ،

نظرات نظرات تا اطلاع ثانوی غیر فعال است.