ویژگی caption-side مشخص می‌کنه عنوان جدول (<caption>) در کدوم سمت جدول نمایش داده بشه:

• top (پیش‌فرض): بالای جدول

• bottom: پایین جدول

📑 کلاس‌های Tailwind برای Caption Side

در Tailwind می‌تونی از این کلاس‌ها استفاده کنی:

📌 مثال

<!-- عنوان بالا -->
<table class="table-auto border border-gray-400 caption-top w-full mb-6">
  <caption class="text-lg font-semibold mb-2">📊 جدول فروش (بالا)</caption>
  <thead>
    <tr>
      <th class="border px-4 py-2">محصول</th>
      <th class="border px-4 py-2">قیمت</th>
      <th class="border px-4 py-2">تعداد</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">لپ‌تاپ</td>
      <td class="border px-4 py-2">25,000,000</td>
      <td class="border px-4 py-2">3</td>
    </tr>
  </tbody>
</table>

<!-- عنوان پایین -->
<table class="table-auto border border-gray-400 caption-bottom w-full">
  <caption class="text-lg font-semibold mt-2">📊 جدول فروش (پایین)</caption>
  <thead>
    <tr>
      <th class="border px-4 py-2">محصول</th>
      <th class="border px-4 py-2">قیمت</th>
      <th class="border px-4 py-2">تعداد</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">گوشی</td>
      <td class="border px-4 py-2">15,000,000</td>
      <td class="border px-4 py-2">5</td>
    </tr>
  </tbody>
</table>

🎯 نکته

• با کلاس‌های caption-top و caption-bottom می‌تونی به‌راحتی جایگاه توضیح جدول رو تغییر بدی.

• همچنین می‌تونی با کلاس‌های معمولی Tailwind مثل text-lg, font-bold, text-center استایل کپشن رو تغییر بدی.