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

آموزش تگ caption در HTML

توسط

۱۳۹۷-۱۲-۱۰

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

آموزش تگ caption در HTML

Free-Learn

در این جلسه میخوانیم

1 تگ Caption در HTML
2 مثال از تگ caption در HTML
3 پشتیبانی مرورگرها
4 جدول صفات تگ caption در HTML
5 پشتیبانی از صفات و رویدادهای عمومی
6 نکات و توضیحات
7 دستورات CSS پیش فرض

تگ Caption در HTML

تگ caption تگی است که در تگ Table مورد استفاده قرار میگیرد و با استفاده از آن میتوان یک کپشن (Caption) برای جدول ایجاد کرد.

تگ caption باید بلافاصله پس از تگ Table قرار داده شود و هر جدول تنها یک (۱ عدد) کپشن یا Caption میتواند داشته باشد.

Free-Learn

مثال از تگ caption در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<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>

<body>

<table>

<caption>Www.Free-Learn.IR</caption>

<tr>

<th>Family</th>

</tr>

<tr>

<td>Sadegh</td>

<td>Asadi</td>

</tr>

</table>

</body>

امتحان کنید

مثال شماره ۲ : کپشن سفارشی شده با استفاده از دستورات CSS

<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>

<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

<style>
table.mytable {
  caption-side:bottom;
}
</style>

<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 زیر نمایش میدهند.

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

caption {

display: table-caption;

text-align: center;

}