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

طراحی وب بدون جدول (یا صفحه آرایی وب بی جدول) به انگلیسی : Tableless web design یک فلسفه طراحی وب است که از جدول های HTML  برای کنترل صفحه آرایی استفاده نمی کند.

در این روش به جای جداول HTML، از زبان های شیوه نامه ای، مثل شیوه نامه های آبشاری Cascading Style Sheets  یا به عبارتی CSS برای چینش متن و المان ها در صفحه وب استفاده می شود.

استاندارد CSS1 توسط W3C در دسامبر 1996 با هدف بهبود دسترس پذیری وب و تاکید بر جداسازی جزییات نمایش در شیوه نامه ها، از محتوای معنایی در اسناد HTML، منتشر شد. در می 1998 استاندرد CSS2 (که بعداً در CSS2.1 و CSS2.2 اصلاح شد) CSS1 را با اضافه نمودن ابزاری برای موقعیت دهی و چینش جدول ها، بهبود داد. حدود همان زمان، در اواخر دهه 1990، زمانی که حباب دات کام (dot-com boom) رشدی سریع در “رسانه جدید”، یعنی ساخت و طراحی صفحات وب، ایجاد کرد، تمایل به استفاده از جدول های HTML و سطرها و ستون ها و خانه های آن برای چینش تمام-صفحه، آغاز گردید.

“حباب دات کام ” یک حباب اقتصادی در بین سالهای ۱۹۹۵ تا ۲۰۰۰ میلادی بود.

این گرایش چند دلیل داشت:

• درخواست ناشرین محتوا برای قرار دادن لگوی فعلی شرکت  خود در صفحات وب؛
• محدودیت های پشتیبانی CSS در مرورگرهای آن زمان؛
• عدم آشنایی طراحان وب جوان با استانداردهای CSS؛
• عدم آگاهی یا عدم اهمیت نسبت به دلایل استفاده از CSS (مثل معناشناسی HTML و دسترس پذیری وب) به جای آنچه که به عنوان راهی ساده تر برای دستیابی سریع به آرایش های مطلوب، شناخته می شد، و گونه ای جدید از ابزار طراحی وب WYSIWYG که این گرایش را تشویق می کرد.

از جمله فواید محدود نمودن استفاده از جدول های HTML به هدف اصلی و معناشناختی آن، دسترس پذیری اطلاعات برای کاربران بیشتر، توسط عوامل کاربری بیشتر است. با حذف بسیاری از برچسب های بی معنی <table>، <tr> و  <td> از صفحات، در پهنای باند صرفه جویی می شود و عناوین، پاراگراف ها و فهرست های کمتر اما معنادارتری باقی می مانند. دستورالعمل های چینشی، به شیوه نامه های CSS در سراسر سایت منتقل می شوند، که یکبار دانلود و در حافظه نهان وب (cache) ذخیره می شوند تا با گردش هر کاربر در سایت مجدداً استفاده  شوند. سایت ها را بیش از این هم می توان قابل نگه داری نمود، زیرا کل سایت را در تنها یک مرحله، با عوض نمودن نشگانه گذاری CSS به خصوصی که روی تمام صفحات وابسته به آن شیوه نامه اثر می گذارد، می توان تغییر داد یا بازطراحی کرد. محتوای جدید HTML را می توان به گونه ای اضافه کرد که CSS موجود، قوانین چینش یک پارچه را فوراً و بی هیچ زحمت اضافه ای روی آن اعمال کند.

در حال حاضر برخی توسعه دهندگان درباره استفاده از جدول ساده HTML حتی هنگامی که استفاده آن منطقی است، تردید دارند، برخی دیگر نیز با استفاده بیش از حد از المان های دیواره (span and div)، مرتکب خطا می شوند؛  علی-رغم اِعمال قوانین جدول- گونه روی این المان ها توسط CSS.

مبنای کار

HTML در ابتدا به عنوان یک زبان نشانه گذاری معنایی برای هدف به اشتراک گذاری آنلاین اسناد علمی و مقاله های پژوهشی طراحی شده بود و نمایش بصری به عهده کاربر واگذار شده بود. اما با گسترش اینترنت از دنیای دانشگاه و پژوهش به زندگی روزمره در اواسط دهه 1990 و تبدیل شدن آن به رسانه، طراحان گرافیک سعی در کنترل ظاهرِ صفحاتِ وبِ نمایش داده شده به کاربر داشتند. برای این منظور، جدول ها و فاصله سازها (که معمولاً تصاویر گیف تک پیکسلی شفاف با پهنا، ارتفاع یا حاشیه های مشخص بودند) برای ساخت و  نگه داری از آرایش صفحه استفاده شده اند.

این موضوع چند اشکال ایجاد می کند. بسیاری از صفحات وب با جدول های تودرتو طراحی شده اند که باعث ایجاد اسناد HTML بزرگی می شوند که پهنای بیشتری در مقایسه با اسنادی که قالب بندی ساده تری دارند استفاده می کنند. علاوه بر این، هنگاهی که صفحه آراییِ مبتنی بر جدول، خطی سازی شود، مثلاً هنگام تجزیه (parse) توسط صفحه خوان یا موتور جستجو، محتوای تولیدی ممکن است تاحدی درهم  و بی نظم باشد.

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

استفاده از ویرایشگرهای گرافیکیِ دارای ابزار برشی که خروجی مستقیم آن  ها HTML و تصویر است نیز باعث تضعیف کد با آلوده کردن آن به جدول هایی که اغلب دارای سطرهای متعددی با عرض یا ارتفاع یک پیکسل هستند می شود.

با فروکش کردن حباب دات کام در سال 2001 و کوچک شدن صنعت توسعه وب، تقاضا برای کدنویس هایی که تجربه بیشتری در این صنعت داشتند افزایش یافت. بسیاری از مواقع کدنویس هایی که دانش بیشتری از کدنویسی داشتند توسعه UI را انجام می دادند. حدود این زمان بود که بسیاری از افراد از روش های کدنویسی آشفته و بی نظم انتقاد کردند و ایده کدنویسی بی جدول شروع به گسترش نمود.

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

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

دسترس پذیری

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

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

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

طراحی وب سایت بدون جدول، صفحاتی با تعداد کمتری برچسب HTML تولید می کند که این تعداد هم صرفاً برای چینش محتوا استفاده می شود. این بدان معناست که معمولاً حجم صفحات برای دانلود کمتر می شود. این فلسفه حاکی از آن است که تمام دستورالعمل های مربوط به صفحه آرایی و چیدمان به شیوه نامه های خارجی یا External style sheets منتقل می شوند. طبق خواص اساسی HTTP، که به ندرت تغییر می کنند و عموماً روی بسیاری از صفحات وب اعمال می شوند، این دستورالعمل ها پس از اولین دانلود در حافظه نهان (کَش) ذخیره می شوند و مجدداً استفاده می شوند. این عمل باعث کاهش پهنای باند و زمان دانلود در سایت می شود.

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

نگهداری سایت ممکن است بسته به هدف سایت، به تغییرات مکرری در وضع بصری آن، چه کوچک چه بزرگ، نیاز داشته باشد. در صفحه آرایی بی جدول، چینش صفحه، بخشی از خود HTML است. به همین دلیل، بدون کمک ویرایشگرهای بصریِ نمونه-محور یا به اطلاح template-based ، مثل ویرایشگرهای HTML، تغییر چینش المان ها در کل سایت، بسته به میزان تغییرات متوالی مطلوب، ممکن است به زحمت زیادی نیاز داشته باشد،. حتی استفاده از سِد (sed) یا سایر ابزارهای مشابه برای پیدا کردن و جانیشین  نمودن (find and replace) ، نمی تواند مشکل را به کلی حل کند.

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

همچنین، به این دلیل که اطلاعات صفحه آرایی قابلیت ذخیره سازی بیرونی در HTML را دارد، اضافه کردن محتوای جدید در طراحی بی جدول می تواند بسیار آسان باشد؛ چه صفحه ای که وجود دارد را اصلاح کنیم، چه صفحه ای جدید ایجاد کنیم. در مقابل، بدون چنین طراحی ای، چینش هر صفحه به تغییر دستی و زمان بر برای هر یک  از صفحات، یا استفاده از ابزارهای سراسری برای پیدا کردن و جانشین نمودن یا به عبارتی  find-and-replace نیاز دارد. با این حال صاحبان سایت ها اغلب می خواهند بعضی صفحات خاص، در مدتی کوتاه یا طولانی، از سایر صفحات متمایز باشند. این موضوع اغلب تولید یک شیوه نامه مجزا برای آن صفحه را ایجاب می کند. با این حال محتوای صفحه (یا نمونه) معمولاً می تواند بی تغییر بماند، اما در طراحی بی جدول چنین نیست.