در جدول های معمولی، هر ردیف دارای تعداد ثابتی سلول یا خانه است. با این حال گاهی اوقات لازم است سلولی در یک جدول HTML فضایی به اندازه چند سلول را اشغال کند. برای مثال ممکن است بخواهید یک سلول محدوده‌ای به اندازه دو ستون یا دو ردیف از جدول را پوشش دهد. در تصویر زیر می‌توانید نمونه‌هایی از گسترش سلول های جدول در HTML را مشاهده کنید.
گسترش سلول های جدول در اچ‌تی‌ام‌ال با کمک خصوصیت های colspan و rowspan در تگ شروع سلول ها انجام می‌شود. فراموش نکنید این دو خصوصیت برای سلول‌های معمولی (یا المان‌های <td>) و همچنین سلول های هدر (یا المان‌های <th>) قابل استفاده هستند.
گسترش سلول به چند ستون – خصوصیت colspan در جدول های HTML
از خصوصیت colspan برای گسترش یک سلول به اندازه چند ستون استفاده می‌شود. مقدار این خصوصیت تعداد ستون هایی را مشخص می‌کند که سلول جاری می‌بایست پوشش دهد. به عنوان مثال در کد زیر سلول اول با محتوای “نام و نام خانوادگی“، دو ستون از جدول را پوشش می‌دهد.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th colspan="2">نام و نام خانوادگی</th>
<th>وضعیت تأهل</th>
</tr>
<tr>
<td>امیر</td>
<td>مجیدی</td>
<td>مجرد</td>
</tr>
<tr>
<td>مینا</td>
<td>کریمی</td>
<td>متأهل</td>
</tr>
</table>
</body>
</html>
در تصویر زیر نتیجه کد فوق را مشاهده می‌کنید.
گسترش سلول به چند ردیف – خصوصیت rowspan در جدول های HTML
از خصوصیت rowspan برای گسترش یک سلول به اندازه چند ردیف استفاده می‌شود. مقدار این خصوصیت تعداد ردیف هایی را مشخص می‌کند که سلول جاری می‌بایست پوشش دهد. به عنوان مثال در کد زیر سلولی با محتوای “شماره تماس دفتر” را مشاهده می‌کنید که دو ردیف از جدول را پوشش می‌دهد.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>نام دفتر</th>
<td>مرکزی</td>
</tr>
<tr>
<th rowspan="2">شماره تماس دفتر</th>
<td>1234</td>
</tr>
<tr>
<td>5678</td>
</tr>
</table>
</body>
</html>
در تصویر زیر نتیجه کد فوق را مشاهده می‌کنید.
ترکیب خصوصیت‌های colspan و rowspan
شما می‌توانید مشابه با المان زیر، به طور همزمان از خصوصیت‌های colspan و rowspan در یک سلول برای پوشش چند ستون و ردیف کمک بگیرید.
<td colspan="2" rowspan="3">متن سلول</td>بازگشت به فهرست مجموعه آموزشی HTML
