سرخط خبرها

تگ colspan و rowspan

تگ colspan و rowspan

در ادامه بحثمون که در مورد جدول بود به شناسه های colspanو rowspan میرسیم این شناسه ها در تگ <td> استفاده می شوند که کار آنها به این صورت است که برای ادغام خانه های جدول بکار می روند

این عنوان که درباره مطالب بیشتری از جدول ها در html است، ممکن است کمی ملال آور به نظر برسد. اما طرف مثبت رو نگاه کنید، وقتی شما در جداول ماهر شوید هیچ چیز درمورد html نیست که شما را بکوبد. خوب، حالا ممکن است بپرسید: چه نکته دیگری باقی مانده است؟
دو مشخصه به نام های colspan و rowspan استفاده می شوند زمانی که شما بخواهید جداول کاملتری بسازید.

 

colspan چیست؟

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

colspan مخفف Column span به معنای “محدوده ستونی” است. مشخصه colspan در تگ <td> و برای تعیین اینکه خانه های جدول باید در چند تا ستون محدود شود، مورد استفاده واقع می شود.

مثال :

<table border=”1″>

<tr>

<td colspan=”3″>Cell 1</td>

</tr>

<tr>

<td>Cell 2</td>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

که در مرورگر به این صورت درخواهد آمد:

Cell 1
Cell 2 Cell 3 Cell 4

با تنظیم عدد ۳ برای colspan، سلولی که در اولین ردیف است در ۳ ستون محدود می شود. اگر ما در عوض ۳ از عدد ۲ استفاده کنیم، خانه یا سلول اول میخواهد فقط در ۲ ستون محدود شود و این مورد ملتزم اضافه کردن یک خانه اضافه به اولین ردیف است. به طوری که تعداد ستون ها در دو ردیف اندازه خواهد شد:

مثال :

<table border=”1″>

<tr>

<td colspan=”2″>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

<td>Cell 5</td>

</tr>

</table>

که در مرورگر به این صورت خواهد شد:

Cell 1 Cell 2
Cell 3 Cell 4 Cell 5

 

rowspan چیست؟

این شناسه مشخص کننده این است که ارتفاع سلول معادل چند سلول است. خاصیت rowspan برای پوشش عمودی خانه های جدول به کار می رود

ویژگی rowspan ارتفاع تیتر را نسبت به ردیف ها تعیین می کند، به فرض تنظیم عدد ۲ برای مقادیر آن، تیتر را به اندازه دو ردیف ارتفاع می دهد.

همانطور که ممکن است شما از قبل حدس زده باشید، rowspan تعداد ردیف هایی که یک خانه (سلول) باید در آن محدود شود را تعیین می کند.

مثال :

 

<table border=”1″>

<tr>

<td rowspan=”3″>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

</tr>

<tr>

<td>Cell 4</td>

</tr>

</table>

در مرورگر به این شکل خواهد شد:

Cell 1 Cell 2
Cell 3
Cell 4

در مثال بالا، rowspan برای خانه ۱، بروی عدد ۳ تنظیم شده است. این تعیین می کند که خانه اول باید در سرتاسر سه ردیف جای بگیرد (درون ردیف خود به علاوه دو ردیف دیگر). بدین وسیله خانه ۱ و خانه ۲ در یک ردیف واقع هستند، در صورتی که خانه ۳ و خانه ۴ دو تا ردیف مستقل را تشکیل می دهند.

گیج شدید؟ خوب، این موضوع زیاد ساده نیست و گم کردن خط مسیر ساده است. بنابراین این فکر خوبی است که قبل از اینکه شروع به طراحی جدول با html کنید، جدول را در یک قطعه کاغذ ترسیم کنید.

گیج نشدید؟ در این هنگام به سمت جلو پیش روید و چند تا جدول با colspan و rowspan برای خودتان طراحی کنید.

 

QR Code For: تگ colspan و rowspan

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.