تگ caption در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ caption در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

از اهمیت کیفیت محتوا در اینترنت نمی توان به سادگی عبور کرد. جدول ها به محتوای سایت ها جهت مرتب سازی داده ها کمک فراوانی می کنند. اگر نمی دانید جدول چگونه ساخته می شود، می توانید در مطلب جدول ها در HTML نحوه ساخت آن را مطالعه فرمایید. در این مطلب شما را با ساخت کپشن برای جدول توسط تگ caption در HTML آشنا خواهیم کرد.

تگ caption چیست؟

با تگ caption می توان برای جدول، کپشن یا عنوان انتخاب کرد.

این تگ با <caption> شروع شده و با </caption> پایان می یابد.

<caption>Text</caption>

این تگ بعد از تگ <table> قرار می گیرد و هر جدول می تواند فقط یک عنوان داشته باشد.

کد:

<table>
  <caption>لیست دانش آموزان</caption>
  <tr>
    <th>ردیف</th>
    <th>کلاس</th>
    <th>دانش آموز</th>
  </tr>
  <tr>
    <td>1</td>
    <td>الف</td>
    <td>رضا</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ب</td>
    <td>علی</td>
  </tr>
  <tr>
    <td>3</td>
    <td>الف</td>
    <td>سامان</td>
  </tr>
  <tr>
    <td>4</td>
    <td>الف</td>
    <td>محمد</td>
  </tr>
  <tr>
    <td>5</td>
    <td>ب</td>
    <td>بهرام</td>
  </tr>
</table>

اجرا

تغییر موقعیت کپشن جدول

با استفاده از ویژگی caption-side در CSS می توان موقعیت کپشن را تغییر داد.

برای این کار می توان از صفت style هم استفاده کرد.

<caption style="caption-side: top;">کپشن</caption>

در صورتی که قصد دارید مانند مثال 1 کپشن در بالای جدول قرار گیرد مقدار آن را top و در صورتی که قصد دارید مانند مثال 2 کپشن در پایین جدول قرار گیرد مقدار آن را bottom قرار دهید.

مثال 1:

<table>
  <caption style="caption-side: top;">لیست دانش آموزان</caption>
  <tr>
    <th>ردیف</th>
    <th>کلاس</th>
    <th>دانش آموز</th>
  </tr>
  <tr>
    <td>1</td>
    <td>الف</td>
    <td>رضا</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ب</td>
    <td>علی</td>
  </tr>
</table>

اجرا

مثال 2:

<table>
  <caption style="caption-side: bottom;">لیست دانش آموزان</caption>
  <tr>
    <th>ردیف</th>
    <th>کلاس</th>
    <th>دانش آموز</th>
  </tr>
  <tr>
    <td>1</td>
    <td>الف</td>
    <td>رضا</td>
  </tr>
  <tr>
    <td>2</td>
    <td>ب</td>
    <td>علی</td>
  </tr>
</table>

اجرا

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ caption در اکثر مرورگرها به صورت زیر است:

caption {
  display: table-caption;
  text-align: center;
}

سازگاری با مرورگرها

تگ caption با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS