• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 7060 نفر در 15 دوره آموزشی سون لرن ثبت نام کرده اند !

ترفندهای حرفه ای و پیشرفته Front End (جلسه 16) : چارچوب ثابت برای جداول یا Fixed Table - قسمت 2

0 151 ۲۹ آذر ۹۵

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

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

حالا بیاید یک مثال عملی رو با هم کار کنیم. کدهای HTML زیر رو در نظر بگیرید:

همونطور که دیدید یک table با کلاس users قرار دادیم و چهار ردیف رو برای اون تعریف کردیم و در هر ردیف اطلاعاتی رو قرار دادیم. کدهای CSS زیر رو برای این جدول قرار دادیم:

همونطور که دیدید در ابتدا برای این جدول ویژگی table-layout: fixed; رو قرار دادیم و با اینکار باعث میشیم که چارچوب جدول نسبت به ردیف اول قرار داده بشه و هر استایلی که برای ردیف اول قرار بدین، استایل کل ستونها رو مشخص کنه. تکه کد زیر در کد بالا رو نگاه کنید:

با اینکار عرض سلولهای ردیف اول رو مشخص کردیم و چون جدول ما fixed هست، کل ردیف ها بهمین صورت استایل دهی خواهند شد. با استفاده از کد زیر هم کاری کردیم که اگر متن زیاد بود و خواست از سلول بیرون بزنه، مخفی بشه و جای اون ... قرار بگیره:

اگر کد بالا رو درون مرورگر باز کنید، خروجی بصورت زیر خواهد بود:table fixed

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

برای مطالعه بیشتر در مورد المنت Table میتونین به این لینک مراجعه کنید. برای مطالعه بیشتر هم در مورد table-layout میتونین به این لینک مراجعه کنید.

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

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram