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

ترفندهای حرفه ای و پیشرفته Front End (جلسه 20) : جداولی که فقط border داخلی دارند - قسمت 1

0 232 ۶ بهمن ۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.inside-borders

در این مطلب و مطالب بعدی میخایم روشهایی که میشه با استفاده از اونا، جداولی رو ساخت که فقط border داخلی داشته باشه رو آموزش بدیم. شاید از این نوع جداول زیاد دیده باشید و محیط بازی تیک تاک تو هم به همین شکل هست. حالا یکی یکی روشها رو بهتون میگم و بصورت عملی اونا رو بهتون نشون میدم.

روش 1 : border هایی که بهشون نیاز ندارید رو حذف کنید!

روش اول و ساده ای که وجود داره اینه که به سادگی بیایم و اون border هایی که نیاز نداریم رو برداریم و حذف کنیم تا به هدفمون برسیم. پس در ابتدا برای همه قسمتها border قرار میدیم و بعد یکی یکی اون قسمتهایی که بیرون هستن رو برمیداریم. چیزایی که باید برداشته بشن بصورت زیر هستن:

  • border بالای همه سلولهای ردیف اول
  • border پایین همه سلولهای ردیف آخر
  • border چپ سلول اول هر ردیف
  • border راست سلول آخر هر ردیف

پس اگر جدولی بصورت زیر داشته باشیم:

کدهای CSS ما بصورت زیر میشن:

میبینید که با استفاده از دو rule اول برای همه سلولهای جدول border قرار دادیم. با استفاده از دستورهای بعدی و بهره گیری از قدرت کلاسهای کاذب تونستیم اون 4 تا مورد رو انتخاب و حذف کنیم و به این ترتیب خروجی بصورت زیر میشه:inside-borders 1

اگه بخاید دمو اون رو ببینید بصورت زیر هست:

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

روش 2 : استفاده از ویژگی rules

این ویژگی برای استفاده درون سایت پیشنهاد نمیشه و فقط اونو بیان میکنیم تا با اون هم آشنایی پیدا کنید. این ویژگی درون HTML5 دیگه پشتیبانی نمیشه و deprecate شده و نباید از اون استفاده کنیم. ولی شما راحت با استفاده از این ویژگی میتونین به هدف مورد نظرتون برسید. این ویژگی برای المنت table تعریف میشه و مقادیری رو قبول میکنه و متناسب با هر مقدار، رفتار خاصی رو نشون میده. مثلا اگه rows بزاریم، خطوط بین ردیفها رو نشون میده و اگه cols رو بزاریم، خطوط بین ستونها رو نشون میده و اگر all بزاریم هم خطوط بین ردیفها و هم ستونها رو نمایش میده. پس ما میتونیم در اینجا فقط با استفاده از HTML این کار رو انجام بدیم. بصورت زیر:

دموی خروجی بصورت زیر هست:

میبینید که به سادگی این کار رو انجام دادیم. شما حتی میتونین با استفاده از ویژگی border-color رنگ اونا رو تغییر بدین.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram