کاربرد جدول در ساختار صفحه وب

استفاده از جدول در وب سایت

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

بعضی از کاربران از جداول برای ایجاد برخی از اجزای صفحه مانند فرم ها استفاده می کنند. به طول کلی کاربرد جدول نسبت به CSS کمتر بوده و معایب زیادی نیز دارند:

• بروز رسانی آن ها مشکل تر است
• سرعت بارگذاری آن ها در مرورگر کمتر است.
• به خوبی چاپ نمی شوند.

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

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

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

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

نکات استفاده از جداول در سایت

گاهی در طراحی صفحات وب، روش جدول و CSS به صورت ترکیبی مورد استفاده قرار می گیرد. به این روش Transitional Layout گفته می شود. معمولا چنین صفحاتی به منظور سازگاری با مرورگرهای قدیمی مورد استفاده قرار می گیرند. در صورتی که تعداد زیادی از کاربران داریا مرورگرهای قدیمی باشند و ساختار صفحه مهم تر از محتوای سایت باشد، از این روش استفاده می کنند.

در چنین صفحاتی باید چندین نکته را در نظر داشته باشید:

حتی الامکان از جداول تو در تو استفاده نکنید.

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

اطلاعات موجود در صفحه را به صورت منطقی در کنار یکدیگر قرار دهید.

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

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

از به کار بردن خصوصیت های منسوخ شده خودداری کنید.

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

موقعیت عناصر را با استفاده از CSS تعیین کنید.

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

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

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

حال که با کاربرد جدول در طراحی وب آشنا شدیم، بهتر می توانیم از آن در صفحات خود بهره ببریم.