ویژگی colspan در سند اچ تی ام ال
در این مقاله از سایت آموزی جهت آگاهی شما مخاطبان محترم قصد داریم به معرفی و کاربرد صفت خصوصی colspan در html بپردازیم.
ویژگی colspan مخصوص تگ td و تگ th جهت ایجاد جداول html می باشند.
کاربرد صفت خصوصی colspan در html
ویژگی colspan مخصوص تگ td و تگ th می باشد. تگ td و تگ th درون تگ table تعریف می شوند. تگ های مذکور در ساخت جداول در سند html کاربرد دارند. گاهی نیاز داریم برخی سلول های جدول html را با هم ادغام کنیم.
خاصیت colspan در ادغام سلول های یک جدول html ما را یاری می دهد. ویژگی خصوصی colspan یک مقدار یا value عددی می گیرد. این مقدار تعداد سلول های ادغامی را تعیین می کند.
مثال در مورد استفاده از صفت خصوصی colspan در html درون تگ td
<table border=”1″>
<tr>
<th>ماه</th>
<th>قیمت</th>
</tr>
<tr>
<td>اسفند</td>
<td>$100</td>
</tr>
<tr>
<td>فروردین</td>
<td>$100</td>
</tr>
<tr>
<td colspan=”2″>مجموع : $180</td>
</tr>
</table>
خروجی کد در مرورگر اینترنتی
ماه | قیمت |
---|---|
اسفند | $100 |
فروردین | $100 |
مجموع : $180 |
همان طور که در مثال بالا خروجی جدول html در مرورگر را ملاحظه می کنید، در هر ردیف 2 سلول وجود دارد ولی در ردیف آخر یک سلول است.
برای اینکه سلول آخر فضای سلول کنار خود را پر کند و در آن ادغام شود از colspan استفاده کردیم.
مقدار 2 یعنی سلول آخری جدول تمام فضای سلول کناری خود را اشغال کند و در سلول کناری ادغام شود.
حال اگر ردیف آخر شامل سه سلول بود برای ادغام سلول با فضای دو سلول کناری مقدار 3 به colspan می دادیم.
مثال در مورد استفاده از صفت خصوصی colspan در html درون تگ th
<table border=”1″>
<tr>
<th colspan=”2″>ماه قیمت</th>
</tr>
<tr>
<td>دی</td>
<td>$100</td>
</tr>
<tr>
<td>بهمن</td>
<td>$80</td>
</tr>
</table>
خروجی کد در مرورگر اینترنتی
ماه قیمت | |
---|---|
دی | $100 |
بهمن | $80 |
در مثال بالا نیز خروجی جدول html در مرورگر نشان می دهد، که در ردیف اول دو سلول ماه و قیمت با هم ادغام شده است. ردیف اول جدول که سربرگ جدول html می باشد، با تگ th ایجاد شده است.
به جهت استفاده از مقدار 2 در خاصیت colspan فضای خالی سلول دوم نیز توسط سلول اول پر شده است.
بررسی ویژگی خصوصی colspan در سند html 4.0.1 و HTML5
ویژگی خصوصی colspan در نسخه های HTML5 و HTML 4.0.1 پشتیبانی می شود. ویژگی خصوصی colspan از نظر کاربرد در دو نسخه HTML5 و HTML 4.0.1 تفاوتی ندارد.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
پشتیبانی مرورگرهای اینترنتی از صفت خصوصی colspan در html درون تگ td و th
تگ | ![]() | ![]() | ![]() | ![]() | ![]() |
td | بله | بله | بله | بله | بله |
th | بله | بله | بله | بله | بله |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت خصوصی colspan در html | ادغام سلول جدول html – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید