گسترش سلول ها با کمک ویژگی های colspan و rowspan در جدول های HTML
در جدول های معمولی، هر ردیف دارای تعداد ثابتی سلول یا خانه است. با این حال گاهی اوقات لازم است سلولی در یک جدول 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