ادغام سلول‌ها (colspan و rowspan)

colspan و rowspan: وقتی یه سلول باید چند تا جا رو بگیره

تا اینجا هر جدولی که ساختیم، یه ساختار کاملاً منظم و شبکه‌ای داشت؛ یعنی هر سطر دقیقاً همون تعداد سلولی رو داشت که سطرهای دیگه داشتن. اما گاهی نیاز داری یه سلول، بیشتر از یه ستون یا بیشتر از یه سطر رو اشغال کنه؛ مثلاً یه عنوان کلی که بالای چند ستون قرار می‌گیره. برای این کار، دو ویژگی colspan و rowspan استفاده می‌شن.

ویژگی colspan: ادغام افقی (چند ستون)

<table>
  <tr>
    <th colspan="2">اطلاعات تماس</th>
  </tr>
  <tr>
    <td>شماره تلفن</td>
    <td>ایمیل</td>
  </tr>
</table>

ویژگی colspan مشخص می‌کنه یه سلول باید عرض چند ستون رو اشغال کنه. تو این مثال، سلول «اطلاعات تماس» با colspan="2"، هم‌عرض دو تا سلول سطر بعدی (شماره تلفن و ایمیل) شده؛ یعنی این سطر اول، به‌جای دو تا سلول جدا، فقط یه سلول واحد داره که فضای هر دو ستون رو گرفته.

ویژگی rowspan: ادغام عمودی (چند سطر)

<table>
  <tr>
    <th>شیفت</th>
    <th>کارمند</th>
  </tr>
  <tr>
    <td rowspan="2">صبح</td>
    <td>علی محمدی</td>
  </tr>
  <tr>
    <td>رضا احمدی</td>
  </tr>
</table>

ویژگی rowspan برعکس colspan عمل می‌کنه؛ مشخص می‌کنه یه سلول باید ارتفاع چند سطر رو اشغال کنه. تو این مثال، سلول «صبح» با rowspan="2"، دو سطر رو در بر می‌گیره؛ یعنی هم علی محمدی، هم رضا احمدی، هر دو زیرمجموعه‌ی شیفت صبح هستن، و چون این سلول دو سطر رو اشغال کرده، سطر دوم دیگه نیازی به یه سلول جدا برای «شیفت» نداره.

نکته‌ی مهم: وقتی یه سلول ادغام می‌شه، باید از بقیه‌ی سطرها کم بشه

یه نکته‌ی حیاتی درباره‌ی rowspan اینه که وقتی یه سلول با rowspan چند سطر رو اشغال می‌کنه، سطرهای بعدی دیگه نباید اون سلول رو دوباره تکرار کنن؛ چون در واقع فضاش قبلاً اشغال شده. برگرد به مثال بالا: سطر دوم (رضا احمدی) فقط یه td داره، نه دوتا؛ چون سلول اول (که باید «صبح» باشه) قبلاً توسط سطر اول با rowspan اشغال شده.

یه مثال ترکیبی از colspan و rowspan با هم

<table>
  <tr>
    <th></th>
    <th colspan="2">فصل بهار</th>
  </tr>
  <tr>
    <th></th>
    <th>فروردین</th>
    <th>اردیبهشت</th>
  </tr>
  <tr>
    <th rowspan="2">فروش</th>
    <td>۱۲۰</td>
    <td>۱۵۰</td>
  </tr>
</table>

تو این مثال، هم از colspan برای عنوان کلی «فصل بهار» که بالای دو ستون (فروردین و اردیبهشت) قرار گرفته استفاده شده، هم از rowspan برای «فروش» که قراره چند سطر رو در بر بگیره (هرچند تو این نمونه‌ی کوتاه فقط یه سطر واقعی زیرش اومده).

خروجی این کدها چطور دیده می‌شن؟

وقتی مرورگر یه جدول با colspan یا rowspan رو رندر می‌کنه، شبکه‌ی جدول دیگه کاملاً یکنواخت نیست؛ بعضی سلول‌ها بزرگ‌تر از بقیه دیده می‌شن، دقیقاً مثل جدول‌های Excel که گاهی چند خونه رو با هم ادغام می‌کنیم. این ظاهر نامنظم، دقیقاً همون چیزیه که برای نمایش داده‌های سلسله‌مراتبی یا گروه‌بندی‌شده لازمه.

یه اشتباه رایج: فراموش‌کردن تعداد سلول‌های واقعی سطر

<!-- اشتباه: تعداد سلول‌ها با سطرهای دیگه هم‌خوانی نداره -->
<table>
  <tr>
    <td rowspan="2">صبح</td>
    <td>علی محمدی</td>
  </tr>
  <tr>
    <td>صبح</td>
    <td>رضا احمدی</td>
  </tr>
</table>

تو این کد اشتباه، تو سطر دوم دوباره یه سلول «صبح» جدا نوشته شده، در حالی که سلول اول قبلاً با rowspan این فضا رو اشغال کرده. نتیجه‌ی این اشتباه، یه جدول به‌هم‌ریخته و نامنظمه که ساختار داده‌هاش دیگه درست نیست؛ چون مرورگر فکر می‌کنه سطر دوم باید سه تا سلول داشته باشه (چون سلول ادغام‌شده‌ی سطر بالا هنوز جاش رو تو این سطر هم اشغال کرده)، اما ما دو تا نوشتیم.

چه زمانی از colspan/rowspan استفاده کنیم؟

این تکنیک بیشتر برای جدول‌های ساختاریافته و گزارشی مناسبه، مثل:

• جدول‌های زمان‌بندی (مثل برنامه‌ی کلاسی که یه درس دو ساعت پشت‌سرهم طول می‌کشه).
• جدول‌های مالی که یه عنوان کلی، چند زیرستون داره (مثل «فصل بهار» که زیرش فروردین و اردیبهشت هست).
• جدول‌های مقایسه‌ای که بعضی مقادیر برای چند ردیف مشترکن.

چند اشتباه رایج

• فراموش‌کردن حذف سلول تکراری در سطرهای بعدی وقتی از rowspan استفاده شده.
• محاسبه‌ی اشتباه تعداد سلول‌های موردنیاز هر سطر بعد از ادغام، که باعث به‌هم‌ریختن کل ساختار جدول می‌شه.
• استفاده‌ی بیش‌ازحد و غیرضروری از colspan/rowspan تو جدول‌های ساده که اصلاً نیازی به ادغام ندارن.

بهترین روش‌ها

• قبل از نوشتن کد، ساختار جدول رو روی کاغذ یا ذهنی طراحی کن تا مطمئن بشی هر سطر بعد از ادغام، تعداد سلول درستی داره.
• colspan و rowspan رو فقط وقتی استفاده کن که واقعاً داده‌ها نیاز به گروه‌بندی یا ادغام دارن، نه برای تزئین ظاهری.

نکته‌ی سئو

جدول‌های ادغام‌شده که به‌درستی ساختاردهی شده باشند، به موتورهای جستجو کمک می‌کنند رابطه‌ی سلسله‌مراتبی بین داده‌ها را بهتر بفهمند، مخصوصاً در جداول مقایسه‌ای یا زمان‌بندی که ممکن است در نتایج جستجو به‌صورت ساختاریافته نمایش داده شوند.

نکته‌ی دسترسی‌پذیری

جدول‌های با colspan و rowspan برای صفحه‌خوان‌ها پیچیده‌تر از جداول ساده هستند؛ به همین دلیل استفاده‌ی دقیق و همراه با ویژگی scope (که در درس ۶-۱ دیدیم) اهمیت بیشتری پیدا می‌کند تا کاربر نابینا بتواند رابطه‌ی دقیق هر سلول ادغام‌شده را با سطرها و ستون‌های مرتبط درک کند.

جمع‌بندی

ویژگی colspan یک سلول را روی چند ستون گسترش می‌دهد و rowspan آن را روی چند سطر گسترش می‌دهد. هنگام استفاده از این ویژگی‌ها، باید دقت کرد که سلول‌های تکراری در سطرهای بعدی که قبلاً اشغال شده‌اند، حذف شوند تا ساختار جدول به‌هم نریزد.