Tableless css تکنیک طراحی وب بدون جدول

یکی از تکنیک های به روز که نشان از تجربه بالای یک Web Designer خوب دارد استفاده نکردن از تگ Table در طراحی Layout یک وب سایت است. اما این مطلب بیان گر این موضوع نیست که دیگر به هیچ عنوان نباید از تگ Table استفاده کرد، زیرا در نسخه جدید HTML5 باز هم تگ Table گنجانده شده است و در مواردی بسیار سودمند است و باید از آن استفاده کرد.

در دسامبر سال ۱۹۹۶ میلادی استاندارد CSS1 به منظور بهتر کردن دسترس پذیری وب و همچنین تاکید بر جداسازی محتوای اصلی از شیوه نامه ها، توسط W3C منتشر شد. W3C در سال های بعد با ارائه نسخه های جدیدی از زبان شیوه نامه ایی CSS، امکاناتی برای موقعیت دهی و چینش جدول ها به این زبان، آن را بهبود داد. در اواخر دهه ۱۹۹۰، زمانی که حباب دات کام در طراحی و ساخت صفحات وب رشد چشمگیری کرد، کدنویسان نیز به استفاده از جدول های HTML به منظور چینش صفحات علاقمند شدند. در بین سال های ۱۹۹۵ تا ۲۰۰۰ میلادی حباب دات کام یک حباب اقتصادی محسوب می شد.

طراحی وب سایت بدون جدول چیست ؟

طراحی و پیاده سازی صفحات وب بدون جداول یا همان TableLess Web Design یک فلسفه در طراحی وب می باشد که در آن برای طراحی از جداول HTML استفاده نمی شود. در این روش طراحی به منظور تعیین آرایش و چیدمان عناصر موجود از زبان های شیوه نامه ایی همچون CSS استفاده می شود و کار طراحی را به مراتب راحت تر از جدول می کند.

مزایای استفاده نکردن از تگ Tableدر صفحه وب:

- سرعت لود بالای صفخات

- بهینه شدن بهتر برای موتور های جستجو (البته به گفته مت کاتز ( این موضوع در رتبه سایت اهمیتی ندارد.

- تایید اعتبار سنجی صفحات برای HTML5

دلیل گرایش موقعیت دهی و چینش جدول ها

- تقاضای صاحبان محتوا برای قرار دادن لوگوی شرکتشان در صفحات وب

- عدم پشتیبانی کامل از زبان CSS در مرورگر های موجود در آن زمان

- نبود آگاهی و آشنایی کافی با طرحان تازه کار با استاندارد های زبان جدید CSS

   طراحی سایت وردپرس      طراحی پورتال

نبودن آگاهی و دانش کافی یا اهمیت ندادن به دلایل استفاده از زبان CSS به جای استفاده از روشی که تحت عنوان راهی ساده تر برای دستیابی سریع به آرایش های مطلوب شناخته می شد، باعث شد تا کدنویسان به استفاده از ابزار های طراحی وب سوق یابند. از فوایدی که محدود کردن استفاده از جدول های HTML دارد می توان به دسترس پذیری اطلاعات برای کاربران بیشتر، توسط عوامل کاربری بیشتر اشاره نمود. حذف شدن بسیاری از برچسب های بی معنی مانند table ، tr و یا td از صفحات ایجاد شده، باعث کاهش پهنای باند مصرف شده می شود. امروزه تعدادی از طراحان و توسعه دهندگان وب در مورد استفاده کردن یا نکردن از جدول ساده اچ تی ام ال حتی زمانی که استفاده از آن منظقی به نظر می باشد نیز تردید دارند. از سوی دیگر برخی دیگر نیز با استفاده بیش از حد از المان هایی مانند DIV و SPAN مرتکب خطا می شوند.

مزایای طراحی وب سایت بدون جدول

صرفه جویی در پهنای باند

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

قابلیت نگهداری (تعمیر پذیری)

ممکن است یک سایت در طول حیات خویش به تغییراتی در ظاهرش نیاز داشته باشد، این تغییرات می تواند جزئی و کوچک یا بزرگ باشد. در این موقع اگر طراح آن سایت از روش بدون جدول استفاده کرده باشد، به راحتی می تواند تغییرات دلخواه خود را بر روی صفحه مورد نظر اعمال کند. اما اگر به شکل سنتی سایت را طراحی کرده باشد، به منظور ایجاد تغییرات بر روی صفحات سایت باید زمان زیادی را صرف کند. اطلاعات و دستورالعمل های مربوط به چینش صفحات، در روش طراحی بدون جدول ممکن است در یک فایل CSS ذخیره شود. از این رو می توان تغییرات را طبق پیش فرض، سریع و سراسری اعمال کرد و نیازی به تغییر در سند HTML نباشد. همچنین در روش طراحی سایت بدون جدول می توان به راحتی و با کمترین زحمت محتوای جدیدی را به سند موجود اضافه کرد در حالی که این کار در روش طراحی سنتی بسیار زمان بر و سخت است.

دسترس پذیری

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

مبنای کار

زبان نشانه گذاری HTML در ابتدا به منظور اشتراک گذاری مقاله ها و اسناد علمی به شکل آنلاین ساخته شده بود و نحوه نمایش آن بر عهده خود کاربر بود. اما پیشرفت علم باعث شد تا اینترنت از دنیای دانشگاه و پژوهش، وارد زندگی روز مره مردم عادی شود و در سال ۱۹۹۰ به یک رسانه تبدیل شد. از این رو طراحان گرافیک تلاش کردند تا ظاهر صفحات نمایش داده شده به کاربر را کنترل کنند و برای ساخت و نگه داری صفحات از جدول ها و فاصله ساز ها (تصاویر گیف تک پیکسلی شفاف با پهنا، ارتفاع یا حاشیه های مشخص) استفاده کردند. این موضوع باعث بوجود آمدن مشکلاتی همچون استفاده شدن پهنای باند و حجم بیشتر، ناتوانی مرورگر ها در تجزیه و تحلیل سند تولید شده با این روش و غیره می شد. طراحی سایت اختصاصی     

در اواخر دهه ۱۹۹۰ ویرایشگر های قدرتمند WYSIWYG وارد عرصه طراحی صفحات وب شدند که این موضوع موجب شد تا دیگر طراحان برای طراحی و ساخت صفحات وب نیازی به درک فنی از تگ ها و دستورالعمل های زبان اچ تی ام ال نداشته باشند. ویرایشگر هایی مانند انچه که نام برده شد، طراحان را به شکل غیر مستقیم به استفاده از بیش از حد جدول ها برای چینش عناصر تشویق می کردند. زمانی که طراحان از این ویرایشگر ها استفاده می کنند ممکن است تگ ها و عناصر غیر ضروری به سند اضافه شود. از سوی دیگر استفاده کردن طراحان از ویرایشگر های گرافیکی که خروجی مستقیم آن ها تصویر و سند HTML بود نیز باعث آلوده شدن کد ها با جدول هایی که اکثرا شامل سطرهای متعددی با ارتفاع و عرض یک پیکسل بودند، می شد.   طراحی سایت تهران      

در سال ۲۰۰۱ میلادی، حباب دات کام رفته رفته فروکش کرد و در نتیجه تقاضا برای یافتن کدنویس هایی که از تجربه بیشتری در این زمینه داشتند افزایش یافت. در اکثر مواقع توسعه UI یا همان راب کاربری توسط کدنویسان با تجربه بالا انجام می شد. در زمان بود که افراد زیادی از کدنویسی بی نظم انتقاد کردند و این موضوع باعث بوجود آمدن ایده ایی جدید در صنعت کدنویسی به نام طراحی بدون جدول شد. عبارت طراحی بدون جدول به معنی جدا سازی دستورالعمل های مربوط به طراحی از محتوای اصلی می باشد و کدنویسان در این روش به جای استفاده از جداول تو در تو و گیج کننده از CSS استفاده می نمایند. البته این بدان معنا نیست که جدول های HTML بدون دیگر بدرد نمیخورند، بلکه باید در جای مناسب از آن ها نیز استفاده لازم را کرد.