گروه آموزش طراحی سایت 14 خرداد 1392 بدون نظر 1795 بازدید آموزش HTML

در سلسله آموزشهای طراحی سایت آنلاینر به کار با جدول ها – ایجاد پرداختیم.

در این مقاله قصد ادغام سلول ها در HTML  را داریم.

در مقاله قبلی یاد گرفتیم که چطور جدولی ساده در صفحه وب ایجاد کنیم . حال در این مقاله قصد کار با جداول پیچیده تری را داریم.

برای مثال میخواهیم جدولی مانند جدول زیر ایجاد کنیم.

ماه قیمت
اسفند $100
فروردین $100
مجموع : $180

در ردیف آخر میبینید که دو سلول با هم ادغام شده اند. برای اینکه دو سلول کنار هم را با یکدیگر ادغام کنید باید از صفتی با نام colspan استفاده کنید.

colspan:

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


<html>
<body>
<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>
</body>
</html>

مشخص است که اگر بخواهیم که 1 سلول جای 2 سلول کنار خود را پر کند باید مقدار صفت colspan را برابر 3 قرار دهیم.

rowspan :

در بعضی مواقع لازم میشود که در سلول روی هم را با یکدیگر ادغام کنیم. در این مورد به جای استفاده از صفت colspan از صفت row span استفاده خواهیم کرد. در مثال زیر دو سلول روی هم با یکدیگر ادغام شده اند.

ماه قیمت قیمت روزهای تعطیل
اسفند $100 $50
فروردین $80
<table border="1">
<tbody>
<tr>
<th>ماه</th>
<th>قیمت</th>
<th>قیمت روزهای تعطیل</th>
</tr>
<tr>
<td>اسفند</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>فروردین</td>
<td>$80</td>
</tr>
</tbody>
</table>

برای اینکه بخواهیم دو سلول روی هم را روی هم را با یکدیگر ادغام نماییم لازم است که در ردیف بعدی یک سلول کمتر از ردیف جاری داشته باشیم.
میتوانید حتی 4 سلول را با یکدیگر نیز ادغام نمایید. برای اینکار لازم است که در یک تگ td هم از صفت colspan و هم از صفت roespan استفاده کنید.

در آموزش بعد به  Attribute ها در جداول میپردازیم.

با آنلاینر همراه شوید …

دیدگاه ها بسته شده اند.