آموزش و یادگیری تگ caption در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، ياد مي‌گيريم تگ <caption> چيست و چگونه براي افزودن عنوان يا توضيح به جدول‌ها در HTML استفاده مي‌شود. اين تگ به درک بهتر محتواي جدول توسط کاربران و موتورهاي جستجو کمک مي‌کند.

تگ caption در HTML چيست؟

تگ <caption> براي اضافه کردن عنوان به جدول (<table>) به کار مي‌رود. اين عنوان معمولاً در بالاي جدول نمايش داده مي‌شود و توضيح مختصري درباره محتواي جدول ارائه مي‌دهد.

ساختار کلي تگ caption

<table border="1">
  <caption>ليست دانش‌آموزان</caption>
  <tr>
    <th>نام</th>
    <th>نمره</th>
  </tr>
  <tr>
    <td>علي</td>
    <td>18</td>
  </tr>
</table>

در اين مثال، عبارت ليست دانش‌آموزان به عنوان عنوان جدول در بالا نمايش داده مي‌شود.

محل قرارگيري تگ caption

تگ <caption> بايد بلافاصله بعد از باز شدن تگ <table> قرار گيرد، در غير اين صورت توسط مرورگر ناديده گرفته مي‌شود.

نمونه نادرست

<table>
  <tr><td>مقدار</td></tr>
  <caption>عنوان جدول</caption>
</table>

در اين مثال، تگ <caption> بعد از داده‌هاي جدول آمده و به همين دليل به درستي نمايش داده نمي‌شود.

تغيير موقعيت caption با CSS

با CSS مي‌توان مکان نمايش عنوان جدول را تغيير داد (مثلاً پايين جدول).

<style>
caption {
  caption-side: bottom;
  font-weight: bold;
  color: #2196f3;
}
</style>

<table border="1">
  <caption>جدول فروش ماهانه</caption>
  <tr><th>ماه</th><th>درآمد</th></tr>
  <tr><td>فروردين</td><td>25,000,000</td></tr>
</table>

صفات مهم تگ caption

نکات حرفه‌اي

• تگ <caption> بايد فقط يک‌بار در هر جدول استفاده شود.
• براي سئو و دسترس‌پذيري، وجود caption در جدول توصيه مي‌شود تا کاربران نابينا با صفحه‌خوان‌ها راحت‌تر محتوا را درک کنند.
• بهتر است براي طراحي ظاهري از CSS استفاده کنيد، نه از ويژگي‌هاي HTML قديمي مانند align.
• مي‌توانيد با caption-side: bottom; موقعيت عنوان را به پايين جدول تغيير دهيد.

براي يادگيري طراحي جداول، استايل‌دهي با CSS و بهينه‌سازي محتواي HTML، پيشنهاد مي‌کنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML و طراحي وب، به صفحه اصلي آموزش دون مراجعه کنيد.