پیش نیاز
برای شروع این درس باید به بخش آموزش CSS رفته و
- از درس آشنایی با CSS
- تا انتهای درس چیدمان جدول در CSS را مشاهده کنید.
شما پس از بادگیری کامل این بخش میتوانید جدول هایی به شکل زیر بسازید:
نام | ||
---|---|---|
نام | ||
---|---|---|
نام | ||
---|---|---|
ویژگی colspan
ویژگی colspan برای یکی کردن ستون های یک جدول استفاده می شود.
مقدار colspan مشخص می کند که چند ستون باید ادغام شود.
ساختار colspan به صورت زیر است:
به مثال زیر توجه کنید:
<table>
<tr>
<th colspan="2">نام</th>
<th>سن</th>
</tr>
<tr>
<td>احسان</td>
<td>پویا</td>
<td>27</td>
</tr>
<tr>
<td>نیما</td>
<td>مهدی</td>
<td>31</td>
</tr>
<tr>
<td>احمد</td>
<td>رضا</td>
<td>28</td>
</tr>
</table>
ویژگی rowspan
همچنین برای یکی کردن سطر های یک جدول، باید از ویژگی rowspan استفاده کنید.
ساختار rowspan به صورت زیر است:
<table>
<tr>
<th rowspan="3">نام</th>
</tr>
<tr>
<td>پویا</td>
<td>احسان</td>
<td>علی</td>
</tr>
<tr>
<td>محمد</td>
<td>مهدی</td>
<td>حسن</td>
</tr>
<tr>
<td>احمدرضا</td>
<td>امیر</td>
<td>مبین</td>
</tr>
</table>
خلاصه درس
- در این بخش از آموزش با دو ویژگی colspan و rowspan آشنا شدید.
- همچنین متوجه شدید این دو ویژگی برای قالب بندی جدول استفاده می شوند.
تمرین
به جدول زیر ویژگی های colspan و border را اضافه کنید. ( از ویژگی rowspan استفاده نکنید )
مقدار colspan 2 باشد.
<table
="
: 1px solid blue;">
<tr>
<th style=" : 1px solid blue;">family</th>
="2">name</th>
<th style="border: 1px solid blue" colspan="2">age</th>
</tr>
<tr>
<td style="border: 1px solid blue">pooya</td>
<td style="border: 1px solid blue">ali</td>
<td style="border: 1px solid blue">18</td>
<td >19</td>
</tr>
</table>
<tr>
<th style=" : 1px solid blue;">family</th>
="2">name</th>
<th style="border: 1px solid blue" colspan="2">age</th>
</tr>
<tr>
<td style="border: 1px solid blue">pooya</td>
<td style="border: 1px solid blue">ali</td>
<td style="border: 1px solid blue">18</td>
<td >19</td>
</tr>
</table>
مشاهده پاسخ
توسعه دهندگان
احسان اسلامی