نبرد دایو و تیبل (تشریح مزایا و معایت ساختار قالب ها)

سطح آموزش  :	مبتدی
منبع آموزش  :	www.joomina.ir
توضیحات     :	آموزشهای طراحی وب جومینا براساس نیاز سنجی مدیران جومینا تهیه و منتشر میشود این آموزش ها قالبا  آموزش هایی است که دردنیای مجازی یا نیست و یا کمیاب است . لطفا در صورتی که از آموزش های عمومی جومینا در سایت های دیگر منتشر مینمایید منبع را ذکر نمایید

گرچه هرکس تمایل دارد تا بنا به سلیقه خود استاندارد خاصی را برای انتخاب رنگ ها و استایل قالب به دیگران بقبولاند اما این استاندارد ها هیچ کدام منبع علمی ندارد . شخصا حدود 4 ماه پیش تمامی پایان نامه های روان شناسی رنگ  و طرح را بررسی کردم تا  تحقیقی بر اساس فرهنگ ایرانی درباب معانی رنگ و طرح بیابم اما متاسفانه چیزی پیدا نکردم از طرفی به منابع خارجی هم نمیتوان استناد نمود چرا که در فرهنگ های مختلف رنگ ها معانی متفاوتی دارند به همین دلیل بهترین معیار رنگ بندی و طرح گرافیکی قالب خود شما هستید پس به سلیقه خودتان اعتماد کنید . گرچه میتوانید با طراح خود مشورت کنید اما باز هم ملاک سلیقه خود شماست .
بخش دوم قالب شامل کد نویسی و تیدیل فایل گرافیکی طراحی شده برای شما به قالب قابل استفاده در وب میباشد . برای تبدیل طرح گرافیکی قالب ها 2 روش وجود دارد روش اول استفاده از تیبل است و روش دوم استفاده از DIV میباشد در روش اول TABLE  و یا همان جدول طراح عناصر گرافیکی صفحه را همانند داده های یک جدول در کنار هم میچیند و در روش دوم طراح به جای آنکه از جدول برای چینش عناصر صفحه در کناذ هم استفاده کند از تعداد جعبه و یا واحد استفاده میکند و این جعبه ها در کنار هم چیده میشود . اما این که کدام یکی از این روش ها بهتر است را کمی شرح میدهیم .
بر اساس استاندارد  W3C   جدول جهت چینش داده های جدولی بکار میرود مانند :

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

2-    حجم کمتر صفحات تولید شده .
جهت ایجاد یک جعبه با جدول باید از کدهای  بیشتری استفاده نمود این درحالی است که جهت ایجاد همان جعبه در روش دایو از کدهای کمتری استفاده میگردد به عنوان مثال
<DIV></DIV> =   <table><tr><td></td></tr></table >
حال فرض کنید زمانی که مرورگر در حال خواندن صفحه شما میباشد چه حجمی از اطلاعات را باید مرور کند . دلیل استفاده از طراحان از جدول بجای DIV در این حیطه منطق ساده تر جدول میباشد .

3-    انعطاف
از آنجایی که یک جدول از ستون و ردیف و سلول های  مشخص تشکیل شده است نمیتوان سلول ها را به حرکت وا داشت مثلا سلول دوم در ردیف سوم و ستن دوم هیچ گاه نمیتواند جای خود را تغییر دهد اما میتواند تغییر ابعاد دهد این سلول همیشه در همان ردیف و ستون باقی میماند و شما نمیتوانید محل آن را تغییر دهید درحالی که در DIV  چنین نیست طراح میتواند در هر زمان اراده کند محل جعبه ایجاد شده را تغییر دهد . این مشکل زمانی رخ مینماید که شما بخواهید تغییری در قالب ایجاد شده اعمال نمایید به عنوان فرض کنید برای جستجو در بالای صفحه سمت راست در زمان طراحی قالب موقعیتی در نظر گرفته حال پس از گذشت مدتی بنا به دلیلی (مثلا قرار گرفتن مترجم در این محل) تمایل دارید تا این موقعیت را به زیر ستون چپ منتقل نمایید . گرچه این کار با تیبل هم ممکن است اما مدت زمان زیادی طول میشد تا این کار انجام شود و در برخی از قالب ها اصلا ممکن است امکان پذیر نباشد به همین دلیل شما به هر طراحی بگید این کار را برای شما انجام دهد مبلق قابل توجهی از شما مطالبه خواهد نمود در حالی که اگر قالب شما با DIV  طراحی شده باشد انجام این کار با چند خط کد براحتی مقدور است . چرا که جعبه ها از انعطاف بیشتری برخوردارند. لذا آینده نگر باشید

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

5-    کنترل بیشتر
گرچه برخی طراحان
الف : به دلیل منطق ساده تر جدول در مقابل DIV
ب: تنبلی در نگارش کدهای جانبی
و... از تیبل بجای دایو استفاده میکنند اما باید این نکته را در نظر گرفت که در قالب هایی که از تیبل استفاده میشود در حقیقت شما در مرور گر خود در حال مشاهده یک محتوای HTML هستید و طراح در حال نمایش داده های گرافیکی با ابزاری است که جهت نمایش داده های متنی بوجود آمده است . درصورتی که اگر قالب شما با DIV  طراحی شده باشد کنترل آن از طریق رابط برنامه نویسی CSS انجام میشود روش کلی کار بدین صورت است که شما یک جعبه ایجاد میکنید و با CSS آن را کنترل مینمایید به دلیل دستورات متعدد CSS این کنترل برای شما بسیار راحت تر میگردد . این کنترل به حدی است که اگر یک صفحه وب را متشکل از جعبه های متعدد در نظر بگیریم و هر جعبه را یک لایه فرض کنیم شما میتوانید تقدم و تاخر لایه ها را نیز تعیین نمایید

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

7-     ظرافت در پرینت صفحه
داده های گرافیکی در صورتی که در جداول چیده شده باشند در هنگام چاپ صفحه درهم و ناخوانا نمایش داده میشود در صورتی که استفاده از DIV  باعث میگردد تا شما بتوانید از استایل جداگانه ای برای پریت استفاده نمایید حتی با این روش شکت صفحه نیز در پرینت در اختیار شماست .

میتوان چندین مورد دیگر به این موارد افزود شما کافی است در گوگل سرچ کنید <div> vs table اما برای تشریح مزایای استفاده از div به جای table  تصور من بر این است که همینقدر کافی است.

گرچه میتوان برای تک تک این موارد راه حل هایی در طراحی تیبل پیدا نمود که شاید 100 درصد کارایی نداشته باشند اما تا میزان زیادی مشکلات استفاده از این سبک منسوخ را برطرف نمود اما قالبا طراحانی که با تیبل اقدام به طراحی قالب مینمایند ازاین امر غافل میمانند . نهایتا قالب نمایش داده شده در مرور گر یکسان است اما تفاوت در پایه و پی قالب ها موجب ایجاد تفاوت در ساختارقالب ها میگردد . پس برای این که قالبی یکبار مصرف ایجاد نکرده باشیم اگر طراح هستید همین امروز کار با دایو را شروع کنید و اگر مصرف کننده نهایی هستید از طراح خود اولین سئوالی که میکنید باید این باشد که قالب طراحی شده با تیبل خواهد بود و یا با دایو ؟ طرح گرافیکی نمای ساختمای قالب شماست اگر کمی برای پولتان ارزش قائل باشید و مهمتر از آنکه اگر کمی آینده نگر باشید وقت و دارایی خود را صرف خرید قالبی که با تیبل طراحی شده است نمی کنید . گرچه ممکن است این حرف خوش آیند برخی همکاران من نباشد اما نباید عیب خود را در سخن دیگران جستجو کنیم شما هم همین امروز طرح های خود را با DIV  ارائه کنید تا هم کیفیت بالاتری را به مشتری عرضه نمایید و هم بتوانید در آینده پشتیبانی بهتری از قالب خود نمایید