تگ caption برای عنوان جدول

تگ <caption>: عنوان دلنشین جدول! ✒️

سلام به همه! توی هر جدول خوبی، یه عنوان واضح و گویا لازم داریم که به کاربر بگه این جدول در مورد چیه. HTML برای این کار یه تگ ساده ولی خیلی کاربردی به اسم <caption> در اختیار ما گذاشته.

تگ <caption> مثل شناسنامه جدول شماست؛ یه اسم و توضیح کوتاه که هویت جدول رو مشخص می‌کنه.

کاربرد اصلی <caption>:

این تگ برای ارائه یک عنوان یا توضیح مختصر برای جدول استفاده می‌شه. این عنوان به خوانایی جدول کمک زیادی می‌کنه و برای موتورهای جستجو هم مهمه چون معنی و مفهوم جدول رو بهتر درک می‌کنن.

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

تگ <caption> باید بلافاصله بعد از تگ باز <table> و قبل از هر تگ دیگه‌ای مثل <thead>، <tbody> یا <tr> قرار بگیره.

مثال:

<table style="border: 1px solid black; border-collapse: collapse;">
  <caption style="padding: 10px; font-weight: bold; color: #db7093;">قیمت محصولات پرفروش ماه</caption> <!-- عنوان جدول -->
  <thead>
    <tr>
      <th style="border: 1px solid black; padding: 8px;">نام محصول</th>
      <th style="border: 1px solid black; padding: 8px;">قیمت (تومان)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid black; padding: 8px;">کتاب HTML</td>
      <td style="border: 1px solid black; padding: 8px;">150,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid black; padding: 8px;">دفترچه یادداشت</td>
      <td style="border: 1px solid black; padding: 8px;">75,000</td>
    </tr>
  </tbody>
</table>

در این مثال، “قیمت محصولات پرفروش ماه” عنوان جدول ماست که با استفاده از تگ <caption> مشخص شده.

نکات تکمیلی:

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

فراموش نکنید که عنوان جدول، اولین چیزیه که چشم بیننده بهش می‌خوره. پس سعی کنید عنوانی انتخاب کنید که هم کوتاه باشه و هم مفهوم کلی جدول رو به خوبی برسونه.

تگ <caption> یه ابزار ساده ولی ضروری برای ساخت جداول حرفه‌ایه. با استفاده ازش، جدول‌های شما هم خواناتر می‌شن و هم از نظر معنایی کامل‌تر. موفق باشید! 💕