ادغام سطرها و ستون‌ها (rowspan و colspan)

ادغام سطرها و ستون‌ها: rowspan و colspan – ترکیب هوشمندانه سلول‌ها! 🔗

سلام به همگی! تا اینجا یاد گرفتیم چطور سطرها و ستون‌های معمولی رو در جداول HTML بسازیم. اما گاهی اوقات نیاز داریم که بعضی از سلول‌ها، فضای بیشتری رو اشغال کنن یا چند تا سلول رو با هم ترکیب کنیم تا یه ساختار پیچیده‌تر ولی زیباتر بسازیم. اینجا جاییه که جادوی rowspan و colspan به کار میاد!

این دو خصوصیت، به ما اجازه می‌دن که سلول‌های جدول رو به شکلی انعطاف‌پذیر ادغام کنیم و ظاهری حرفه‌ای‌تر به داده‌هامون ببخشیم.

۱. خصوصیت colspan: ادغام ستون‌ها! ↔️

colspan مخفف “Column Span” هست و به ما اجازه می‌ده که یک سلول (چه <th> و چه <td>) رو طوری تنظیم کنیم که به اندازه چندین ستون، عرض داشته باشه. یعنی چند تا ستون کنار هم رو در یک سلول ادغام می‌کنه.

نحوه استفاده:

کافیه خصوصیت colspan رو به تگ <th> یا <td> اضافه کنیم و مقدارش رو برابر با تعداد ستون‌هایی قرار بدیم که می‌خوایم ادغام بشن.

مثال:

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th colspan="2" style="border: 1px solid black; padding: 8px;">اطلاعات دانشجو</th> <!-- این سلول عرض 2 ستون رو میگیره -->
    <th style="border: 1px solid black; padding: 8px;">واحد</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">نام</td>
    <td style="border: 1px solid black; padding: 8px;">نام خانوادگی</td>
    <td style="border: 1px solid black; padding: 8px;">3</td> <!-- این سلول مربوط به ستون سوم هست -->
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">علی</td>
    <td style="border: 1px solid black; padding: 8px;">رضایی</td>
    <td style="border: 1px solid black; padding: 8px;">2</td>
  </tr>
</table>

در این مثال، سلول “اطلاعات دانشجو” عرض دو ستون “نام” و “نام خانوادگی” رو پوشش می‌ده.

۲. خصوصیت rowspan: ادغام سطرها! ↕️

rowspan مخفف “Row Span” هست و برعکس colspan، به ما اجازه می‌ده که یک سلول رو طوری تنظیم کنیم که به اندازه چندین سطر، ارتفاع داشته باشه. یعنی چند تا سطر رو در یک سلول ادغام می‌کنه.

نحوه استفاده:

کافیه خصوصیت rowspan رو به تگ <th> یا <td> اضافه کنیم و مقدارش رو برابر با تعداد سطرهایی قرار بدیم که می‌خوایم سلول اشغال کنه.

مثال:

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">نام</th>
    <th style="border: 1px solid black; padding: 8px;">درس</th>
    <th style="border: 1px solid black; padding: 8px;">نمره</th>
  </tr>
  <tr>
    <td rowspan="2" style="border: 1px solid black; padding: 8px;">علی</td> <!-- این سلول عرض 2 سطر رو میگیره -->
    <td style="border: 1px solid black; padding: 8px;">ریاضی</td>
    <td style="border: 1px solid black; padding: 8px;">19</td>
  </tr>
  <tr>
    <!-- در این سطر، چون سلول "علی" عرض 2 سطر رو گرفته، دیگه نیازی به سلول اول نداریم -->
    <td style="border: 1px solid black; padding: 8px;">فیزیک</td>
    <td style="border: 1px solid black; padding: 8px;">18</td>
  </tr>
</table>

در این مثال، سلول “علی” فضای دو سطر رو اشغال کرده، بنابراین در سطر دوم، دیگه نیازی به تکرار نام “علی” نیست.

نکات مهم هنگام استفاده:

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

با استفاده هوشمندانه از rowspan و colspan، می‌تونید جداولی بسازید که نه تنها اطلاعات رو به خوبی نمایش می‌دن، بلکه ظاهر بسیار حرفه‌ای و منظمی هم دارن. این‌ها ابزارهای قدرتمندی برای خلاقیت در طراحی جداول هستن. پس باهاشون بازی کنید و بهترین نتیجه رو بگیرید! ✨