سربرگ، بدنه و پابرگ جدول (thead، tbody، tfoot)

thead، tbody، tfoot: وقتی جدولت بزرگ‌تر و منظم‌تر می‌شه

تو درس قبل یه جدول ساده با چند سطر ساختیم که همه‌ی tr ها مستقیم داخل table بودن. این روش برای جدول‌های کوچیک خوب کار می‌کنه، اما وقتی جدول بزرگ‌تر و پیچیده‌تر می‌شه (مثلاً صدها سطر داده)، بهتره ساختار جدول رو به سه بخش منطقی تقسیم کنیم: سربرگ، بدنه و پابرگ. برای این کار HTML5 سه تگ داره: thead، tbody و tfoot.

تگ thead: بخش سربرگ جدول

<table>
  <thead>
    <tr>
      <th>محصول</th>
      <th>قیمت</th>
    </tr>
  </thead>
</table>

تگ thead مخفف Table Head هست و سطر یا سطرهایی که نقش عنوان کلی جدول رو دارن، داخل این تگ قرار می‌گیرن. معمولاً thead فقط شامل یه tr هست که همه‌ی سلول‌هاش th هستن.

تگ tbody: بدنه‌ی اصلی جدول

<table>
  <thead>
    <tr>
      <th>محصول</th>
      <th>قیمت</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>کفش ورزشی</td>
      <td>۵۰۰,۰۰۰ تومان</td>
    </tr>
    <tr>
      <td>کوله پشتی</td>
      <td>۳۵۰,۰۰۰ تومان</td>
    </tr>
  </tbody>
</table>

تگ tbody مخفف Table Body هست و شامل داده‌های اصلی و واقعی جدوله؛ یعنی همون سطرهایی که td دارن، نه سربرگ‌ها. هر جدولی که از thead و tfoot استفاده می‌کنه، باید داده‌های اصلیش رو داخل tbody بذاره.

تگ tfoot: پابرگ جدول

<table>
  <thead>
    <tr>
      <th>محصول</th>
      <th>قیمت</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>کفش ورزشی</td>
      <td>۵۰۰,۰۰۰ تومان</td>
    </tr>
    <tr>
      <td>کوله پشتی</td>
      <td>۳۵۰,۰۰۰ تومان</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>جمع کل</td>
      <td>۸۵۰,۰۰۰ تومان</td>
    </tr>
  </tfoot>
</table>

تگ tfoot مخفف Table Foot هست و معمولاً برای نمایش خلاصه، جمع کل، یا یادداشت‌های پایانی جدول استفاده می‌شه؛ چیزی شبیه ردیف «جمع کل» تو انتهای یه فاکتور خرید.

نکته‌ی جالب: ترتیب نوشتن tfoot در کد

یه نکته‌ی فنی جالب اینه که طبق مشخصات HTML5، اجازه داری tfoot رو تو کد، قبل از tbody بنویسی:

<table>
  <thead>
    <tr><th>محصول</th><th>قیمت</th></tr>
  </thead>
  <tfoot>
    <tr><td>جمع کل</td><td>۸۵۰,۰۰۰ تومان</td></tr>
  </tfoot>
  <tbody>
    <tr><td>کفش ورزشی</td><td>۵۰۰,۰۰۰ تومان</td></tr>
    <tr><td>کوله پشتی</td><td>۳۵۰,۰۰۰ تومان</td></tr>
  </tbody>
</table>

هرچند این کد از نظر ترتیب نوشتن غیرمعمول به نظر می‌رسه، مرورگر همچنان tfoot رو بصری در پایین جدول (بعد از tbody) نمایش می‌ده. دلیل این قابلیت تاریخی اینه که مرورگر بتونه پابرگ جدول رو زودتر رندر کنه، حتی قبل از اینکه کل داده‌های حجیم tbody بارگذاری بشن؛ اما امروزه اکثر توسعه‌دهنده‌ها ترتیب منطقی و خواناتر (thead، بعد tbody، بعد tfoot) رو ترجیح می‌دن.

چرا این تفکیک سه‌گانه اصلاً مهمه؟

چند مزیت عملی برای این ساختار وجود داره:

• خوانایی کد: وقتی جدول بزرگه (مثلاً ۵۰ سطر داده)، تفکیک سربرگ و بدنه باعث می‌شه کد خیلی سریع‌تر قابل‌فهم باشه.
• استایل‌دهی راحت‌تر با CSS: می‌شه به‌راحتی thead رو با یه رنگ پس‌زمینه‌ی متفاوت، یا tfoot رو با یه فونت پررنگ‌تر جدا استایل داد.
• اسکرول جداول طولانی: بعضی تکنیک‌های CSS و جاوااسکریپت از این ساختار استفاده می‌کنن تا وقتی جدول اسکرول می‌شه، thead همیشه بالای صفحه ثابت بمونه و کاربر همیشه عنوان ستون‌ها رو ببینه.
• معنای ساختاری برای صفحه‌خوان: صفحه‌خوان می‌تونه بفهمه کدوم بخش سربرگه، کدوم بدنه‌ست و کدوم جمع‌بندیه.

آیا thead، tbody، tfoot اجباری هستن؟

نه، این سه تگ اختیاری هستن. برای جدول‌های خیلی ساده و کوچیک (مثل مثال درس قبل)، می‌شه بدون این‌ها هم جدول درستی ساخت. اما برای جدول‌های بزرگ‌تر و رسمی‌تر، استفاده از این ساختار توصیه می‌شه.

یه مثال کامل و واقعی: فاکتور خرید

<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>جمع کل</td>
      <td></td>
      <td>۶۵,۰۰۰ تومان</td>
    </tr>
  </tfoot>
</table>

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

• گذاشتن سطرهای داده‌ی معمولی (td) داخل thead به‌جای tbody.
• استفاده از چند تا thead یا چند تا tfoot تو یک جدول؛ هرکدوم از این سه تگ فقط یک‌بار باید تو هر جدول استفاده بشه.
• فراموش‌کردن اینکه اگه از thead و tfoot استفاده می‌کنی، بقیه‌ی داده‌ها باید حتماً داخل tbody قرار بگیرن، نه مستقیم داخل table.

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

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

نکته‌ی سئو

ساختار منظم جدول با thead و tbody به موتورهای جستجو کمک می‌کند محتوای جدولی را بهتر تفسیر کنند، به‌خصوص در جداول مقایسه‌ای یا جداول قیمت که ممکن است در نتایج جستجو به‌صورت ساختاریافته نمایش داده شوند.

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

تفکیک thead، tbody و tfoot به صفحه‌خوان‌ها کمک می‌کند بخش‌های مختلف جدول را به‌درستی برای کاربر اعلام کنند؛ مخصوصاً در جداول طولانی، این ساختار به کاربر کم‌بینا کمک می‌کند بفهمد کِی از سربرگ گذشته و وارد داده‌های اصلی شده است.

جمع‌بندی

تگ‌های thead، tbody و tfoot به‌ترتیب برای سربرگ، بدنه‌ی اصلی و پابرگ جدول استفاده می‌شوند و ساختار جدول‌های بزرگ را هم از نظر خوانایی کد، هم از نظر استایل‌دهی و هم از نظر دسترسی‌پذیری بهبود می‌بخشند. این سه تگ اختیاری هستند، اما برای جدول‌های رسمی و بزرگ به‌شدت توصیه می‌شوند.