آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 257 ۲۹ دی ۹۵

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :