جداول یک عنصر طراحی وب سایت هستند که می توانند به شما کمک کنند تا با ظرافت زیادی اطلاعات را به صورت سازمان یافته نمایش دهید. آنها روی نمایشگرهای رایانه ای کاملاً خوب کار می کنند، اما اغلب می توانند تجربه نامطلوبی را در دستگاه های تلفن همراه ایجاد نمایند. خوشبختانه، چندین راه حل مناسب برای ایجاد جداول ریسپانسیو وجود دارد. استفاده از این شیوه های طراحی ریسپانسیو می تواند تجربه کاربر (UX) سایت شما را بهبود بخشد. این بدان معناست که بازدید کنندگان قادر خواهند بود داده های جداول شما را بدون در نظر گرفتن نوع دستگاهی که استفاده می کنند، با سهولت بیشتری مشاهده و به آنها دسترسی پیدا کنند.
در این مقاله، نگاهی خواهیم انداخت به معنی ریسپانسیو بودن جدول. سپس ما از دو روش برای ایجاد جداول ریسپانسیو در وردپرس استفاده خواهیم نمود. پس در ادامه با ما همراه باشید!
جداول ریسپانسیو چه هستند؟
به طور معمول، هدف یک جدول نمایش داده های زیادی به روشی است که منطقی باشد. با این حال، وقتی می خواهید جداول را در دستگاه تلفن همراه مشاهده کنید، همه چیز ممکن است خراب شود. این اتفاق می افتد زیرا ستون های جدول از آنچه صفحه نمایش شما قابل کنترل است، اغلب ستون های وسیع تری دارند.
هنگامی که یک جدول ریسپانسیو ایجاد می کنید، اساساً مجموعه ای از قوانین را برای جدول داده اصلی خود تنظیم می نمایید. این قوانین می توانند نقاط شکست را براساس اندازه صفحه نمایش تعیین کنند. این بدین معنی است که اگر کاربری به جدول موجود در یک دستگاه کوچکتر از نقطه تقسیم تعیین شده شما دسترسی پیدا کند، جدول با تغییر شکل متناسب با اندازه صفحه پاسخ می دهد.
جداول ریسپانسیو به طور معمول می توانند با اضافه کردن یک نوار اسکرول یا انباشته کردن اطلاعات، دوباره قالب بندی شوند. با تغییر اندازه صفحه، نمی خواهید فقط اطلاعات سلول ها را جمع و جور کنید، زیرا این امر باعث می شود جدول غیرقابل خواندن باشد. خوشبختانه دستیابی به طراحی ریسپانسیو خیلی سخت نیست.
تهیه یک جدول ریسپانسیو (بدون پلاگین)
اساساً دو روش برای ایجاد یک جدول ریسپانسیو در وردپرس وجود دارد. ابتدا نگاهی خواهیم انداخت که چگونه کار را بدون افزونه انجام دهیم. این کار به دانش رمزگذاری احتیاج دارد: به طور خاص، درک Cascading Style Sheets (CSS). ما همچنین توصیه می کنیم تا زمانی که جدولی را طراحی کنید که به طور قابل اعتمادی کار کند، در یک محیط صحنه سازی یا توسعه به جای وب سایت زنده خود کار کنید.
در مقالات بعدی نحوه ایجاد جداول ریسپانسیو را به شما کاربران گرامی می آموزیم.
No comment