قبلا اشاره کردیم که خانه های جدول مرتب هستند و دارای ساختار مرتبط به هم . برای مثال نمی توان در یک سطر جدول ۱ خانه و در سطر پایینی ۳ خانه داشت . در چنین شرایطی از خاصیت colspan در سطر با خانه کمتر استفاده می کنیم تا سطری که خانه کمتر دارد ، سطر با خانه بیشتر را پوشش دهد . خاصیت colspan برای پوشش افقی خانه ها و خاصیت rowspan برای پوشش عمودی خانه های جدول به کار می رود . به مثال های زیر توجه کنید :

 < table width = “450px” border = “1” >
< tr >
< td width = “450px” >
Cell 1
< /td >
< /tr >
< tr >
< td width = “150px” >
Cell 2
< /td >
< td width = “150px” >
Cell 3
< /td >
< td width = “150px” >
Cell 4
< /td >
< /tr >
< /table >

کد بدون خاصیت colspan

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

 < table width = “450px” border = “1” >
< tr >
< td width = “450px” colspn = “3” >
Cell 1
< /td >
< /tr >
< tr >
< td width = “150px” >
Cell 2
< /td >
< td width = “150px” >
Cell 3
< /td >
< td width = “150px” >
Cell 4
< /td >
< /tr >
< /table >

کد با خاصیت colspan

– خاصیت rowspan :

مثال : حالت فوق را درباره ۲ ستون با تعداد سطرهای متفاوت نشان می دهیم :

 < table width=”450px” border=”1″ >
< tr >
< td width=”450px” >
Cell 1
< /td >
< td width=”150px” >
Cell 2
< /td >
< /tr >
< tr >
< td width=”150px” >>
Cell 3
< /td >
< /tr >
</table>

خروجی کد بدون خاصیت rowspan
می بینیم بدون استفاده از خاصیت rowspan در سطر با خانه کمتر ، عملا جدول به هم ریخته بوده و خروجی درستی ندارد . در قسمت زیر با اضافه کردن خاصیت rowspan به خروجی درست می رسیم .     توجه !

 < table width=”450px” border=”1″ >
< tr >
< td width=”450px” rowspan=”2″ >
Cell 1
< /td >
< td width=”150px” >
Cell 2
< /td >
< /tr >
< tr >
< td width=”150px” >>
Cell 3
< /td >
< /tr >
</table>