چرا بجای Table باید از Div استفاده کرد

خیلی وقت‌ها از من پرسیده شده که چرا خیلی ها توصیه می‌کنند که بجای table از div برای طراحی قالب سایت ( برنامه و یا … ) استفاده کنیم. امروز به تشریح این موضوع می پردازم.

—————————————————————-

این مطلب زیر نظر مجوز GFDL منتشر می‌شود. و کلیه حقوق آن برای همگان آزاد است، بدین شرط که به کلیه شرایط موجود در مجوز GFDL ( که یک نسخه از متن انگلیسی مجوز GFDL در این محل و یک ترجمه غیر رسمی (فارسی) از متن مجوز GFDL که در مرداد ۱۳۸۳ توسط کاوه رنجبر تهیه شده است در این محل ) قرار دارد پایبند باشد.

GNU Logo

عنوان مطلب : چرا بجای Table باید از Div استفاده کرد

بخش ثانی : ندارد

تاریخ انتشار : 16/04/1388 مطابق با 07/07/2009

شماره نسخه : نسخه یک

نویسنده : ناصر حاجلو

ای-میل نویسنده : n.hajloo@gmail.com

Copyright (c) 2009 Nasser Hajloo.

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation;

with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled “GNU Free Documentation License”.

—————————————————————-

روزی که HTML ایجاد شد، ایده طراحان آن این بود که شما بتوانید یک کتاب را همانگونه که وجود دارد بر روی اینترنت منتشر کنید ( همان کدنویسی معنایی که قبلا هم در داخل یک مطلب، به آن اشاره کرده بودم ) و برای این کار هم ابزارهای کافی و مورد نیاز را فراهم کردند. از آنجا که معمولا (همکان) از ابزارها نسبت به دانشی که دارد به روش های متفاوتی استفاد می کنند به همین دلیل طراحان ( بی دانش تر ) در استفاده از ابزارهای Html دچار سردرگمی شدند و این ابزارها را ( بدلیل شباهت کار و بعضا بدلیل راحتی کار ) بجای هم استفاده کردند. یکی از مهمترین این ابزارها کنترلهای div و table هستند که معمولا بجای هم استفاده می‌شوند.

وظیفه اصلی تگ div در واقع چیدمان صفحه و طراحی قالب صفحه است و به همین دلیل است که نسبت به table فوق العاده انعطاف پذیرتر است. شما براحتی می توانید یک div را در هر مکانی از صفحه بدون کمترین هزینه ( ی زمانی ) قرار بدهید. حالا به این انعطاف پذیری قابلیت حرکنت ( انتقال ) را که با کمک تکنولوژی آژاکس اضافه شده نیز بی افزایید.

از طرف دیگر، div کد کمتر و بهینه‌تری (<div> </div>) نسبت به یک table (که معادل <table><tr><td></td></tr></table>) ایجاد می‌کند. که این هم باعث کاهش حجم صفحه تولیدی می‌شود و هم باعث لود شدن سریعتر صفحه .

نکته دیگری که وجود دارد آن است که crawler ها که وظیفه جستجوی و ذخیره کردن صفحات را برای موتورهای جستجو ( مثل گوگل ) بازی می کنند. چون بصورت معنایی صفحات را crawl می کنند بنابراین اگر صفحه شما بهتر و معنایی تر ایجاد شده باشد ، از Page rank بالاتری هم برخوردار خواهد بود.

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

حالا با این همه برتری div نسبت به table ممکن است برای شما این سوال ایجاد شود که table برای چه مواردی باید استفاده شود. طراحان html همانطور که div را برای قالب بندی وقرار دادن متن و تصویر پیاده‌سازی کردند. table را هم برای ایجاد صفحات به شکل Tab و ایجاد جداول (‌لیست های موجود در صفحه) بوجود آوردند. در اکثر مواقع توصیه می‌شود که برای پیاده‌سازی Tab ها از table استفاده کنید. همانطور که مسلما خود شما هم متوجه شدید با استفاده از یک table براحتی می‌توان یک tab را پیاده‌سازی کرد. درصورتی که اگر بخواهید همان tab را با div پیاده‌سازی کنید باید هزینه ( ی زمانی و انرژی ) بیشتری صرف کنید.

با توجه به موارد فوق که در زیر مجددا یادآور می‌شوم :

•      حجم کمتر صفحه تولید شده
•      Page rank بالاتر در گوگل و سایر search engine ها
•      قالب انعطاف پذیرتر
•      برای قراردادن متن و تصویر در وب توصیه شده که از div استفاده شود
•      کنترل بیشتر بوسیله css
•      جدول صرفا برای ساختار tabی مناسب است

به شما اکیدا توصیه می‌کنم که بجای استفاده از table در قالب‌بندی صفحات از div استفاده کنید و از قدرت آن لذت ببرید. اگر کسی نظر دیگری هم داردو یا مزیت دیگری به نظرش می‌رسد ، لطفا آن را در زیر همین مطلب بنویسد تا من هم استفاده کنم.
در نهایت هم شما را به شماهده سایت http://www.csszengarden.com/ دعوت می‌کنم و توصیه می‌کنم که این سایت را که با div طراحی شده کاملا بررسی کنید ( سمت راست سایت که ظاهر بسیار ساده‌ای دارد یکسری لینک هست که وقتی روی هر کدام کلیک کنید ظاهر سایت کاملا متغیر می‌کند  )