تگ colgroup در HTML
مثال (تگ colgroup در HTML)
تنظیم رنگ پس زمینه از سه ستون با تگ های <colgroup> و <col>:
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
خودتان امتحان کنید »
تعریف و کاربرد تگ colgroup در HTML
تگ <colgroup> گروهی از یک یا چند ستون در یک جدول را جهت قالب بندی مشخص می کند.
از تگ <colgroup> برای سبک یا استایل دادن به کل ستون، به جای تکرار سبک برای هر سلول و برای هر ردیف استفاده می شود.
نکته: تگ <colgroup> باید به عنوان یک فرزند برای تگ <table> باشد که بعد از عنصر <caption> وقبل از عناصر <thead> ،<tbody> ،<tfoot> و <tr> قرار می گیرد.
نکته: برای تعریف خواص مختلف به یک ستون در <colgroup> از عنصر <col> در داخل آن تگ استفاده کنید.
پشتیبانی مرورگرها از تگ colgroup در HTML
| عنصر | |||||
|---|---|---|---|---|---|
| <colgroup> | بله | بله | بله | بله | بله |
تفاوت بین HTML 4.01 و HTML5
بیشتر ویژگی های موجود در HTML 4.01 در HTML5 پشتیبانی نمی شوذ.
خصوصیت ها
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| align | left right center justify char |
در HTML5 پشتیبانی نمی شود. تراز کردن محتوا در گروه ستون ها |
| char | character | در HTML5 پشتیبانی نمی شود. تراز کردن محتوا در گروه ستون ها با توجه به کاراکترها |
| charoff | number | در HTML5 پشتیبانی نمی شود. مشخص کننده تراز تعداد کاراکترهای محتوا از کاراکترهای مشخص شده به وسیله ویژگی char |
| span | number | مشخص می کند گروه ستون ها به اندازه چند ستون باشد |
| valign | top middle bottom baseline |
در HTML5 پشتیبانی نمی شود. مشخص کننده تراز عمودی محتوا نسبت به گروه ستون ها |
| width | pixels % relative_length |
در HTML5 پشتیبانی نمی شود. مشخص کننده پهنای گروه ستون ها |
ویژگی های عمومی تگ colgroup در HTML
تگ <colgroup> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ colgroup در HTML
تگ <colgroup> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ colgroup در JavaScript
- نوشته شده توسط سمیه فخری
- بازدید: 12608
دیدگاه‌ها
سلام..ممنونم از توضیحات خوبتون
سوالی داشتم از خدمتتون اینه که، در خصوصیت هایی که برای این تگ گفته شده آیا جایی هم در سایتتون مثال و نحوه ی بکارگیری در تگ رو هم تدریس کردین؟
مثلا: align
با مقدارهای:
justify
char
سلام و تشکر
تگ colgroup و کلیه خصوصیت هایش در HTML5 پشتیبانی نمی شود و پیشنهاد می شود که از CSS بجای colgroup استفاده شود.
استایل دهی به ردیف های جدول در CSS:
برای رنگ آمیزی ردیف های جدول بصورت یکی در میان می توانید از روش زیر استفاده کنید:#customers tr:nth-child(od d)
{
color:#000000;
background-color:#EAF2D3;
}
با استفاده از شبه کلاس ()nth-child می توانید به فرزندان یک عنصر دسترسی داشته باشید، بعنوان مثال اگر پارامتر 2 را برای آن تنظیم کنیم، منظور فرزند شماره 2 است و یا اگر پارامتر odd برای آن تنظیم شود به تمام فرزندان با شماره فرد دسترسی خواهد بود.
لطفاً مثال زیر را که با روش بالا پیاده سازی شده است مشاهده فرمایید:
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_table_fancy01
خیلی ممنونم از توضیحاتتون لطف کرددین