یکی از موارد تکنولوژی وب که پیاده سازی آن نسبتا سخت است، المانی اولیه در طراحی وب است که بعد از متن ساده و تصویر به وب اضافه شد. امروزه ساخت این المان بسیار مشکل تر شده است، این مسئله بدلیل وجود دستگاه های مختلف و بهینه کردن این المان برای آن هاست. به همین دلیل نیازمند اندیشه بسیار زیادی است.
ساختن یک جدول عالی تقریبا ناممکن است مگر آنکه تعداد آیتم های داخل آن کم باشد. مشکلاتی که حین ساخت جدول معمولا پیش می آید شامل موارد زیر است:
- بسته بندی متن به صورت اشتباه
- مشکلات ترازبندی
- خروجی جدول خارج از صفحه نمایش
- مشکلات اسکرول
- مشکل ارتفاع ردیف ها
- مشکل عرض ستون ها
- زشتی و بی نظمی های کلی
در این مقاله قصد داریم تا به شما بگویم چگونه می شود این خطاها و مشکلات را رفع نمود، در پایان، جداول شما شانس بسیار خوبی برای بهتر ساخته شدن را دارند.
از استفاده جداول اجتناب نکنید
به این دلیل که پیاده سازی جداول کاری مشکل است، مردم بسیاری از استفاده کردن آن خودداری می کنند. بعضی از استراتژی های امروزی از CSS برای ساختن یک نمای تقلبی از جداول استفاده می کنند بعضی های دیگر نیز در کنار این کار تصویری از داده های خود را نیز قرار می دهند که در آن از هیچگونه کدنویسی استفاده نشده است.
هر دوی این رویکردها ناقص هستند و از استفاده کردن آنها باید به شدت خودداری کرد: استفاده از CSS برای ساختن جداول و شبیه سازی Table توسط آن مشکلات استفاده پذیری و دسترسی پذیری بسیاری را همراه با خود می آورد.
استفاده از تصاویر بجای جداول یکی دیگر از کارهایی است که برخی از افراد انجام می دهند اما این کار باعث می شود که سئو وبسایت صدمه ببیند و داده های داخل جدول برای موتورهای جستجو قابل ایندکس نباشد. از طرفی دیگر بروزرسانی داده های داخل تصویر بسیار سخت و وقت گیر است. این حالت درست مانند وضعیت قبلی مشکلات استفاده پذیری و دسترسی پذیری را به همراه دارد.
فریمورک ها دوستان شما هستند
فریمورک های محبوبی نظیر بوت استرپ و فاوندیشن همراه با ابزارهایی عرضه می شوند که وقت بسیاری را برای شما ذخیره می نمایند، جداول نیز بخشی از این ابزارها هستند. ساختن یک جدول در بوت استرپ کار چندان سختی نیست، البته اگر تنها قسمتی از تغییرات مورد نظر خود را نیز اعمال کنید و دستکاری های لازم را در فایل استایل آن قرار دهید، جدول مناسب تر می شود.
ظاهر تمام قضیه نیست
به دلیل آنکه محتوا و استایل در ساخت یک جدول مبتنی بر هم هستند، پس بسیار منطقی است اگر جدول‌تان را در ابتدا به صورت متن ساده HTML با سطربندی درست طراحی کنید و بعد از آن استایل های مورد نظرتان را اعمال نمایید. اینکار باعث می شود به شما یاددآوری شود که ساختن یک جدول خوب نیازمند موارد بیشری بجز استایل است. جدای از آن اینکار باعث می شود مطمئن شوید که جدول شما اطلاعات خوبی را به کاربر می دهد. اگر هدف از استفاده جداول ارائه اطلاعات نیست، پس بهتر آنکه از آن استفاده نکنید.
داشتن هدف برای دسترسی پذیری
بسیاری از مردم با خواندن و نگاه کردن یک متن ساده در فضای وب مشکل دارند. در چنین حالتی بسیار خوب می شود اگر بتوانید جداول را مبتنی بر قابلیت دسترسی پذیری طراحی کنید. برای پیدا کردن اطلاعات مفید در جهت ساختن جداول بهینه تر می توانید محتوای مربوط به وبسایت WebAIM را مطالعه کنید.
به بخش های مختلف جدول Id قابل دسترس بدهید
برای داشتن حداکثر کنترل روی هر بخش از جدول (ستون ها و ردیف ها) می توانید به آن Id های منحصر به فرد بدهید. اضافه کردن کلاس نیز انعطاف بیشتری را به جداول شما می دهد. انجام چنین کاری نتیجه بسیاری عالی را برای شما خواهد داشت به خصوص اگر بخواهید برای هر کدام از آیتم ها استایل خود را تعیین کنید. اگر شما چنین کاری را انجام دهید می توانید به تمام آيتم های داخل جدول خود از طریق CSS و Javascript دسترسی پیدا کنید.
جداول فشرده شده بهترین انتخاب هستند
در دنیای امروزه و مطابق با سلیقه ها استفاده از آیتم های بزرگ که قابلیت دسترسی پذیری بسیار زیادی دارند مرسوم است. با این حال همیشه این ایده خوب نیست، برخی اوقات باعث بوجود آمدن مشکلاتی می شود. توسعه دهندگان ماهر بوت استرپ جداول را به صورت اجزای واکنشگری قرار داده اند، اما واقعیت این است که جداول به صورت کلی با حالت واکنشگرا تعامل خیلی خوبی نشان نمی دهد. برای ساختن چنین بخشی بهتر است تا از ابتدای کار شروع کنید و سعی در ساخت جدول مناسبی برای موبایل ها بنمایید.
جداول همیشه باید قابلیت اسکرول داشته باشند
پر کردن جداول از اطلاعات و قرار دادن میزان داده های آن در حالت خودکار کار جالبی است اما بجای آنکه قرار دادن یک جدول به صورت مستقیم داخل صفحه وب بهتر است آن را در یک Div جداگانه قرار دهید. به مثال زیر توجه کنید:
در این مثال باید از یک Div با ارتفاع ثابتی استفاده شود، این کار در نهایت باعث می شود که جداول داخل Div قابلیت اسکرول داشته باشد نه در صفحه. به این صورت شما می توانید حریم مناسبی را برای افرادی که می خواهند در داخل جدول کاوش کنند ایجاد نمایید.
استفاده از ابزارهای مختلف
برای یک جدول ساده این کار بسیار زیادی است اما اگر جدول شما نیاز به ستون های منطبق پذیر، مرتب سازی ستون ها و مواردی از این دست داشته باشد، اپلیکیشن های جی کوئری بسیار قوی برای اینکار تعبیه شده که می توانید از آن ها استفاده کنید. با استفاده از این اپلیکیشن ها می توانید ساختار جدول را پیچیده‌تر کنید.
یکی از بزرگترین این افزودنی ها Flexigrid است. این ابزار شکل یک جدول را درست مانند چیزی که در محیط جاوا می بینید برای شما فراهم می کند.
ممکن است با نگاه کردن به این ابزار بسیار پیشرفته به نظر برسد، اگر شما به این مورد نیاز ندارید و چیزی ساده تر را می خواهید می توانید از TableSorter استفاده کنید.
با وجود آنکه چنین ابزارها ویژگی های بسیار خوبی را به همراه خود دارند اما یادتان باشد که این ابزارها سرعت بارگذاری صفحات شما را افزایش می دهند. استفاده از این ابزارها را تنها برای وقتی بگذارید که واقعا به آن ها نیازمندید.
ابزارهای تولید خودکار همیشه بهترین نتیجه را به شما نمی دهند
افزونه های بسیار زیادی برای سیستم های مدیریت محتوا مختلف ارائه شده است که با استفاده از آن می توانید سند های متنی خود را به جدول تبدیل کنید. یادتان باشد هیچوقت به اندازه زمانی که به صورت دستی چنین تبدیلی را انجام بدهید ساختار جدول مطابق با میل شما درست نخواهد شد. پس برای داشتن جداول خوب که مطابق با سلیقه شما باشند سعی کنید که از ابزارهای خودکار استفاده نکنید.
استفاده از PHP در جداول برای ارسال اطلاعات از بانک اطلاعاتی به داخل جداول همیشه کار بهتری نسبت به اضافه کردن محتوا به صورت دستی بوده است. تفاوت این حالت در این است که شما کنترل کاملی روی خودکارسازی تبدیل محتوا دارید.
زمانی که شما از یک ابزار خودکار سازی شخص ثالث استفاده کنید به این معنی است که جدول از حالت خود در حال خارج شدن است.
از جداول درست استفاده کنید، آنها به شما جایزه می دهند
جدوال خوب طراحی می شوند، اتفاق نمی افتند. زمانی که شما یک سرویس تحویل اطلاعات را درست می کنید باید آن را مؤثر و مفید طراحی کنید. دقت کنید که در زمان طراحی جداول بهترین استفاده از آنها برای رسیدن به اهدافتان را بکنید، همانطور که گفته شد سعی در طراحی مؤثر و مفید آنها داشته باشید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید