تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

گسترش سلول ها با کمک ویژگی های colspan و rowspan در جدول های اچ تی ام ال HTML
اچ‌تی‌ام‌ال 

گسترش سلول ها با کمک ویژگی های colspan و rowspan در جدول های HTML

به روز شده در امیرحسین شهسواری 0 دیدگاه ،،،،،،،،،،

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

در تصویر زیر نتیجه کد فوق را مشاهده می‌کنید.

نمونه ای از گسترش سلول های جدول در HTML با کمک ویژگی colspan

گسترش سلول به چند ردیف – ویژگی 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>

در تصویر زیر نتیجه کد فوق را مشاهده می‌کنید.

نمونه ای از گسترش سلول های جدول در HTML با کمک ویژگی rowspan

ترکیب ویژگی‌های colspan و rowspan

شما می‌توانید مشابه با المان زیر، به طور همزمان از ویژگی‌های colspan و rowspan در یک سلول برای پوشش چند ستون و ردیف کمک بگیرید.

<td colspan="2" rowspan="3">متن سلول</td>

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *