آموزش تگ caption در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ caption در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Caption در HTML
تگ caption
تگی است که در تگ Table مورد استفاده قرار میگیرد و با استفاده از آن میتوان یک کپشن (Caption) برای جدول ایجاد کرد.
تگ caption
باید بلافاصله پس از تگ Table قرار داده شود و هر جدول تنها یک (۱ عدد) کپشن یا Caption میتواند داشته باشد.
Free-Learn
مثال از تگ caption در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <table> <caption>Www.Free-Learn.IR</caption> <tr> <th>Name</th> <th>Family</th> </tr> <tr> <td>Sadegh</td> <td>Asadi</td> </tr> </table> </body> |
مثال شماره ۲ : کپشن سفارشی شده با استفاده از دستورات CSS
1 2 3 4 5 6 7 8 9 10 |
<style> caption { background-color:#9C27B0; color:#fff; border-top:2px solid #9C27B0; border-right:2px solid #9C27B0; border-left:2px solid #9C27B0; border-radius:10px 10px 0px 0px; } </style> |
مثال شماره ۳ : قرار دادن کپشن در زیر جدول با استفاده از دستورات CSS
1 2 3 4 5 |
<style> table.mytable { caption-side:bottom; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ caption
در HTML پشتیبانی میکنند یا خیر.
نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ caption در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامتیعنی در HTML5 پشتیبانی نمی شود.)
نام صفت | مقدار | توضیح |
---|---|---|
align | left right top bottom |
تراز بندی (محل قرارگیری کپشن) را مشخص میکند. (![]() |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ caption
از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
صفت Align که متعلق به تگ caption
می باشد در HTML5 منقضی شده و پشتیبانی نمی شود.
بصورت پیش فرض کپشن جدول در بالای جدول قرار میگیرد ولی با استفاده از دستورات CSS میتوان مکان قرار گیری کپشن را بصورت دلخواه مشخص کرد.(همانند مثال شماره ۳)
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ caption
را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
1 2 3 4 |
caption { display: table-caption; text-align: center; } |