ساختاردهی جدول

ساختاردهی جدول: <thead>، <tbody>، <tfoot> – نظم در جدول! 🗂️

سلام به همه! توی بخش قبلی با تگ‌های اصلی ساخت جدول آشنا شدیم: <table>، <tr>، <th> و <td>. اما برای اینکه جدول‌هامون هم از نظر معنایی و هم از نظر ساختاری مرتب‌تر باشن، HTML5 تگ‌های ویژه‌ای برای گروه‌بندی بخش‌های مختلف جدول به ما داده: <thead>، <tbody> و <tfoot>.

این تگ‌ها مثل تقسیم‌بندی کردن کتاب به فصل‌ها، بخش‌ها و پیوست‌ها عمل می‌کنن؛ یعنی به مرورگر و توسعه‌دهنده‌ها کمک می‌کنن تا ساختار منطقی جدول رو بهتر درک کنن.

۱. تگ <thead>: بخش سربرگ جدول! 👑

تگ <thead> (مخفف Table Head) برای گروه‌بندی سطر(های) سربرگ جدول استفاده می‌شه. معمولاً این بخش شامل یک یا چند سطر <tr> هست که داخلشون تگ‌های <th> قرار دارن و عناوین ستون‌ها رو مشخص می‌کنن.

مزایا:

• معنایی: به مرورگر و موتورهای جستجو می‌گه که این سطرها، سربرگ جدول هستن.
• استایل‌دهی: امکان استایل‌دهی مجزا به سربرگ رو فراهم می‌کنه.
• قابلیت اسکرول: در جداول بزرگ، بعضی مرورگرها می‌تونن سربرگ رو ثابت نگه دارن حتی وقتی کاربر در جدول اسکرول می‌کنه (نیاز به CSS داره).

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>نام خانوادگی</th>
      <th>شهر</th>
    </tr>
  </thead>
  <!-- اینجا tbody و tfoot میان -->
</table>

۲. تگ <tbody>: بدنه‌ی اصلی جدول! 🏋️

تگ <tbody> (مخفف Table Body) برای گروه‌بندی سطرهای اصلی محتوای جدول استفاده می‌شه. اینجاست که داده‌های واقعی شما قرار می‌گیرن.

مزایا:

• معنایی: مشخص می‌کنه که این سطرها، محتوای اصلی جدول هستن.
• استایل‌دهی: امکان استایل‌دهی متفاوت به بدنه‌ی جدول.
• سازماندهی: تفکیک واضح بین سربرگ، بدنه‌ و پاورقی.

نکته: شما می‌تونید چندین تگ <tbody> در یک جدول داشته باشید. این کار می‌تونه در زمان بارگذاری جداول خیلی بزرگ مفید باشه، چون مرورگر می‌تونه محتوای هر <tbody> رو جداگانه پردازش کنه.

<table>
  <thead> ... </thead>
  <tbody>
    <tr>
      <td>علی</td>
      <td>رضایی</td>
      <td>تهران</td>
    </tr>
    <tr>
      <td>مریم</td>
      <td>محمدی</td>
      <td>اصفهان</td>
    </tr>
  </tbody>
  <!-- اینجا tfoot میاد -->
</table>

۳. تگ <tfoot>: بخش پاورقی جدول! 🦶

تگ <tfoot> (مخفف Table Foot) برای گروه‌بندی سطرهای پایانی یا پاورقی جدول استفاده می‌شه. این بخش معمولاً شامل خلاصه‌ها، جمع کل‌ها، میانگین‌ها یا توضیحات نهایی مربوط به کل جدول هست.

مزایا:

• معنایی: نشان‌دهنده اطلاعات جمع‌بندی یا پایانی جدول.
• استایل‌دهی: امکان استایل‌دهی مجزا به پاورقی.
• قابلیت اسکرول: مثل <thead>، بعضی مرورگرها می‌تونن <tfoot> رو هم در جداول بزرگ ثابت نگه دارن.

نکته مهم: ترتیب قرارگیری این سه تگ در کد HTML مهمه. مرورگرها انتظار دارن اول <thead>، بعد <tbody> و در نهایت <tfoot> رو ببینن. البته این ترتیب بیشتر برای پردازش بهتر توسط مرورگر هست و حتی اگه <tfoot> قبل از <tbody> بیاد، مرورگر سعی می‌کنه اون رو به انتهای جدول منتقل کنه.

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>نام خانوادگی</th>
      <th>شهر</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>علی</td>
      <td>رضایی</td>
      <td>تهران</td>
    </tr>
    <tr>
      <td>مریم</td>
      <td>محمدی</td>
      <td>اصفهان</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">تعداد کل افراد: 2 نفر</td> <!-- colspan=3 یعنی این سلول عرض 3 ستون رو بگیره -->
    </tr>
  </tfoot>
</table>

استفاده از <thead>، <tbody> و <tfoot>، جدول شما رو از یک مجموعه ساده از سطر و ستون به یک ساختار معنایی و قابل فهم تبدیل می‌کنه. این کار نه تنها برای سئو مفیده، بلکه باعث می‌شه مدیریت و استایل‌دهی جدول‌هاتون هم خیلی راحت‌تر بشه.

پس یادتون باشه، وقتی جدول می‌سازید، سعی کنید حتماً از این تگ‌ها برای سازماندهی بهتر بخش‌های مختلفش استفاده کنید. اینجوری هم کد شما تمیزتر می‌شه و هم نتیجه نهایی حرفه‌ای‌تر خواهد بود! 👌