این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ caption در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ caption در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Caption در HTML
تگ caption تگی است که در تگ Table مورد استفاده قرار میگیرد و با استفاده از آن میتوان یک کپشن ( Caption ) برای جدول ایجاد کرد.
تگ caption باید بلافاصله پس از تگ Table قرار داده شود و هر جدول تنها یک ( ۱ عدد ) کپشن یا Caption میتواند داشته باشد.
Free-Learn
مثال از تگ caption در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ caption در جدول ( بدون هیچ استایل یا ظاهر خاصی )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<table> <caption>Www.Free-Learn.IR</caption> <tr> <th>نام</th> <th>فامیلی</th> </tr> <tr> <td>صادق</td> <td>اسدی</td> </tr> <tr> <td>مهرداد</td> <td>شاهینی</td> </tr> <tr> <td>مبینا</td> <td>صالحی</td> </tr> </table> |
مثال شماره ۲ : استایل دادن به تگ Caption با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 |
caption{ background-color:#068f5d; color:#fff; padding:5px; border-top:2px solid black; border-right:2px solid black; border-left:2px solid black; border-radius:10px 10px 0 0; } |
مثال شماره ۳ : قرار دادن کپشن در زیر جدول با استفاده از ویژگی caption-side در CSS
|
1 2 3 |
caption{ caption-side:bottom; } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ caption در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ caption از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- بصورت پیش فرض کپشن در بالای جدول قرار میگیرد ولی خب با استفاده از CSS به راحتی میشه مکان قرار گیری کپشن را بصورت دلخواه مشخص کرد. ( همانند مثال شماره ۳ )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ caption را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 |
caption { display: table-caption; text-align: center; } |
