طراحی بدون جدول(tableless design)

[amirhosein]

با سلام خدمت دوستان . به تازگی با مبحثی تحت عنوان طراحی بدون جدول برخورد کردم که در مورد طراحی صفحات بدون استفاده از جدولها است . در این شیوه طراح سعی می کند تا برای طراحی به صورت کامل از css استفاده کرده و میزان استفاده از table را به حداقل برساند . در این مسیر استفاده از ویژگیهای جدید مطرح شده در css3 برای positioning عناصر ضروری به نظر می رسد . می خواستم ببینم که دوستان در این موارد مطلبی می دانند یا نه ؟ معرفی منابع , بحث در مورد مزایا و معایب این روش , معرفی ویژگیهای جدید مطرح شده در css3 و نیز نمونه سایتهای پیاده سازی شده با این متد می تواند به پیشبرد بحث کمک کند . برای مشخص شدن اهمیت بحث جالب است بدانید که نسخه جدید سایت yahoo با این متد پیاده سازی گشته است . با تشکر

[problem]

خوب طراحی بدون جدول از این‌جا شروع شد که دیده شد خیلی‌ها از table به جای ارائه داده‌های جدولی، به منظور شکل دادن به صفحات استفاده می‌کنن. اون اوایل هنوز CSS نه خیلی پیشرفت کرده بود، نه هنوز browser‌ها درست ساپورتش می‌کردن.
امروزه خیلی از browserهای مدرن CSS2 رو تا حد زیادی ساپورت می‌کنن. طبق معمول، IE‌ در این باره، اشکال زیاد داره! از همه بدتر این که IE نسخه ۵ و ۶ که بیشترین استفاده رو در کاربرها دارن، کلی با هم فرق دارن، و عیب‌های هر کدوم مخصوص خودشه. و بدتر این که (!) مهم‌ترین باگ‌ها در boxing model‌ هستش، یعنی رفتاری که browser در برابر دستوراتی از CSS نشون می‌ده که مربوط به تنظیم ابعاد اشیاء هستند، مثل width و margin و padding.
Firefox تقریباً باگی نداره، اما گفتم تقریباً. خود من چندین باگ در صفحاتی که راست به چپ (فارسی) هستند در فایرفاکس دیدم.
نتیجه همهٔ اینا که گفتم این می‌شه که طراحی بدون جدول، سخته، ولی ممکنه. شاید مجبور باشی بپذیری که سایتت دیگه توی Netscape 4‌ خوب دیده نمی‌شه! اما مگه چند درصد کاربرا این browser رو استفاده می‌کنن، و چقدر برات مهمن؟! تو ایران که فقط آخرین ورژن‌های IE و Firefox و کمی هم Opera استفاده می‌شه!
به علاوه باید یاد بگیری که از Hack‌های CSS استفاده (و کمترین استفاده) رو بکنی. این Hackها از اشکالات داخلی برنامه مثلا IE 5 استفاده می‌کنن، تا یک سطر دستور CSS فقط روی این مرورگر اجرا بشه، و باعث شه که ایرادات دیگه‌ای که در نشون دادن CSS داره اصلاح بشه؛ اما همون دستور روی بقیه مرورگرها اجرا نشه.
سایت‌هایی هستند (به خصوص در قالب وبلاگ) که اصلا تخصصی مسائل CSS هستن. اما بهترین شروع اینه که تو گوگل دنبال css xhtml template بگردی، و به کد این template ها نگاه کنی. خیلی چیز یاد می‌گیری.
بعد اگر جرئت داشتی، به CSSهای wikipedia فارسی هم نگاه کن تا ببینی که چقدر زحمت کشیده شده‌ (من هم کمک کردم) تا تونستن درستش کنن، به طوری که تو مرورگرهای مختلف تقریباً یکسان و بی‌نقص باشه.
اگر سوالی هست بپرس شاید بلد باشم.

[amirhosein]

ممنون بابت توجه و جوابتون.اگه ممکنه نمونه سایتها و وبلاگهای مفید(ترجیحاً فارسی) رو بهم معرفی کنید.

[problem]

من وبلاگ فارسی در این زمینه نمی‌شناسم. عقب بودن طراح‌های ما از استانداردها، سخت بودن طراحی راست به چپ فقط با CSS و تن‌پروری ذاتی ما ایرانیا باعث شده که حتی طرح خوب فارسی که بشه ازش چیز یاد گرفت هم کم دیدم (و اکثر صفحاتی که از کنجکاوی view source کردم، با Table نوشته شدن!) (همین فروم هم با table نوشته شده!)
اما برای یادگیری این لینک‌ها و جاهایی که اینا بهشون لینک می‌دن رو دم دست داشتم فرستادم. اما باز هم تاکید می‌کنم که سرچ گوگلی که قبلاً گفتم رو امتحان کنید.
۱ (http://web-building.crispen.org/index.php?cat=templates)
۲ (http://tools.i-use.it/)
۳ (http://webhost.bridgew.edu/etribou/layouts/skidoo/index.html)
البته alistapart.com هم که از بهترین سورس‌های یادگیری هستش.