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

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

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

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

GNU Logo

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 طراحی شده کاملا بررسی کنید ( سمت راست سایت که ظاهر بسیار ساده‌ای دارد یکسری لینک هست که وقتی روی هر کدام کلیک کنید ظاهر سایت کاملا متغیر می‌کند  )

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

  1. در برتری Div به Table هیچ شکی نیست ولی کار کردن با Div به راحتی Table نیست. مثلا وقتی در Design دات نت هستی به دشواری میشه Div رو مدیریت کرد. مگر اینکه HTML باز حرفه ای باشید و به Design کاری نداشته باشید

  2. خود من که تابحال برای هیچ سایت یا برنامه‌ای از design در visual studio یا هیچ IDE دیگریاستفاده نکردم و بعید هم می‌دانم که کسی که کارش طراحی است، برای طراحی از حالت design استفاده کند. در بشتر موارد حالت design بیش از آنکه کمک کند، مشکل ایجاد می‌کند.

  3. آقای حاجلو نمیشه با این قاطعیت صحبت کرد. هر کسی سلیقه خاصی در طراحی داره و دلیل نمیشه همه یک شکل کار کنند. خیلی ها رو دیدم که حرفه ای هستند ولی تو Design هم کار می کنند. مهم خروجی کار است نه شکل کار

  4. در ارتباط با حرفه‌ای بودن یا نبودنصحبت نمیکنم و سلایق مختلف برای طراحی رو هم با این مسئله نمی سنجم. اما چیزی که واضحه اینهکه وقتی ازحالت design اقدام به طراحیمی کنیم کدهای ناخواسته ای تولید میشهکه ناچار برای حذفاونها اید بهخود code view برگردیم یا از property window استفاده کنیم که این کار زمان بر هست و به همین دلیل هم هست که بیشتر طراح ها از حالت code استفاده می کنند.

  5. جالب بود!

  6. بنده خدا says:

    بدون مقدمه میگم مقاله به این آبکی نخونده بودم !

  7. الکی says:

    سلام.
    آقای حاجیلو با شما کاملا موافقم. تنها ایراد دات نت تبودن یک گرید ویو بدوم جدوله که اعصاب آدم و به هم میریزه! اگه راه چاره ای بود به من اطلاع دهید لطفا! ضمنا بدم نمیاد که به کمک هم یه کنترل گرید ویو جدید و عاری از جدول بسازیم، اگه موافق بودی خبر بده.
    ضمنا http://irdc.ir این یه نمونه از دیزاین با DIV که انجام دادم…

  8. البته کار با table کمی پیچیده تر از div میباشد.منظورم اینه که کمی سردر گم کننده است.اما کار با div لذت خاصی دارد وقابل انعطاف است.

  9. سعید says:

    ممنون از مطلب خوب آقای حاجلو

    البته یک مقاله انگلیسی که می خوندم برای هرکدام یکسری مزایا و معایبی رو ذکر کرده بود ولی مهمترین مزیت div برتری اون در SEO هست

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: