کاربرد تگ‌های thead و tbody در HTML
در طراحی صفحات وب، جداول نقش مهمی در نمایش داده‌های ساختاریافته دارند. تگ‌های thead و tbody به عنوان بخش‌های اصلی جدول، سازماندهی محتوا را بهبود می‌بخشند و دسترسی‌پذیری را افزایش می‌دهند.
توجه: استفاده صحیح از این تگ‌ها نه تنها برای سئو مفید است، بلکه نمایش جدول در دستگاه‌های مختلف را بهینه می‌کند.
مزایای استفاده از thead و tbody
- جداسازی منطقی سربرگ‌ها از محتوای اصلی
- پشتیبانی بهتر از چاپ صفحات با تکرار سربرگ‌ها در هر صفحه
- بهبود تجربه کاربری در اسکرول جداول طولانی
- افزایش خوانایی کد برای توسعه‌دهندگان
| تگ |
کاربرد |
thead |
تعریف بخش سربرگ جدول (معمولاً شامل تگ‌های th) |
tbody |
تعریف بخش محتوای اصلی جدول (شامل داده‌های واقعی) |
نمونه کد عملی
<table>
<thead>
<tr>
<th>نام محصول</th>
<th>قیمت</th>
</tr>
</thead>
<tbody>
<tr>
<td>لپ‌تاپ</td>
<td>15,000,000 تومان</td>
</tr>
</tbody>
</table>
برای یادگیری عمیق‌تر درباره تگ‌های جدول، می‌توانید اینجا را انتخاب نمایید تا به آموزش جامع دسترسی پیدا کنید.
بهترین روش‌های استفاده
- همیشه از
thead برای بخش سربرگ استفاده کنید
- در جداول بزرگ، چندین
tbody برای گروه‌بندی داده‌ها ایجاد نمایید
- از تگ
tfoot برای خلاصه‌گیری داده‌ها استفاده کنید
- برای جداول پیچیده، از ویژگی
scope در تگ‌های th استفاده نمایید
در طراحی‌های ریسپانسیو، جداول با ساختار صحیح thead و tbody انعطاف‌پذیری بیشتری دارند و در دستگاه‌های موبایل بهتر نمایش داده می‌شوند.
