تعیین موقعیت عنوان جداول با ویژگی caption-side

- visibility ۰ mode_comment

table-caption

در این مطلب میخایم یک نکته کاربردی رو بهتون آموزش بدم که با استفاده از اون میتونین عناوین جداولتون رو در موقعیت دلخواه و مناسب قرار بدین و بر روی جداول سایتتون مدیریت بهتری داشته باشید. همونطور که میدونید ما میتونیم درون table خودمون یک تگ caption قرار بدیم و عنوان جدولمون رو مشخص کنیم. مثلا کد زیر رو در نظر بگیرید:

همونطور که دیدید در همون ابتدا تگ caption رو قرار دادیم و عنوان جدولمون رو درون HTML مشخص کردیم. حالا درون CSS میتونیم با استفاده از ویژگی caption-side، موقعیت قرارگیری اون رو مشخص کنیم. مثلا برای اینکار میتونیم از کد زیر استفاده کنیم:

همونطور که دیدید در بالا برای این ویژگی، مقدار top رو قرار دادیم. با اینکار عنوان در بالای جدول قرار میگیره. مقادیری که برای این ویژگی مورد استفاده هستند دو مقدار top و bottom هست. top که مقدار پیش فرض هست و عنوان رو در بالای جدول قرار میده و bottom هم عنوان رو در زیر جدول قرار میده. شما میتونین این ویژگی رو درون CSS، هم به المنت table اعمال کنید و هم به المنت caption و تفاوتی در نتیجه نخواهد داشت. این ویژگی فقط محل قرارگیری عنوان در زیر یا بالای جدول رو مشخص میکنه و هیچ تاثیری بر روی ترازبندی متن درون اون نداره و این کار رو میتونین با استفاده از ویژگی text-align انجام بدین.

برای بیشتر متوجه شدن، دموی زیر رو مشاهده کنید.بر روی دکمه Toggle کلیک کنید تا ویژگی مورد نظر بین دو حالت top و bottom جابجا شود. در ابتدا مقدار top فعال هست و عنوان در بالای جدول قرار داره و زمانی که بر روی دکمه Toggle کلیک میکنید، مقدار به bottom تغییر میکنه و عنوان جدول به پایین میاد.

در نظر داشته باشید که ویژگی caption-side به جهت قرارگیری متن یا ویژگی writing-mode هم بستگی داره. همونطور که میدونین این ویژگی بصورت پیش فرض مقدار horizontal-tb رو داره و به معنی این هست که خطوط بصورت افقی هستن و از بالا به سمت پایین ادامه پیدا میکنن. حالا اگر ما خودمون این ویژگی رو به مقدار vertical-rl تغییر بدیم، پس محل قرارگیری عنوان هم تغییر میکنه و عنوانی که قبلا بین بالا و پایین جابجا میشد، بین راست و چپ جابجا میشه. دموی زیر رو برای درک بهتر مشاهده کنید: این مواردی که تا اینجا عرض شد در مرورگرها پشتیبانی خوبی ازشون میشه و میتونین از اونا استفاده کنید. مقادیر جدیدی در آینده برای این ویژگی قرار داده خواهند شد که عبارتند از:

  • block-start
  • block-end
  • inline-start
  • inline-end

این موارد هنوز در هیچ کدام از مرورگرها پشتیبانی نمیشن و فعلا نمیشه ازشون استفاده کرد. میتونین برای مطالعه بیشتر در این زمینه، این لینک رو مشاهده کنید.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.