آموزش طراحی جدول در سایت

آموزش طراحی جدول در سایت

 پنجشنبه 23 آبان 1398

به طور کلی هیچگاه از جدول برای طراحی فضای قالب وب استفاده نکنید. استفاده از سطرها و ستونهای زیاد برای انتظام بخشهای مختلف سایت صحیح نیست و باید از تگ Div و به کمک CSS به جای table استفاده کنید. برای طراحی جدول از برچسب table به صورت زیر استفاده کنید.

کدهای طراحی جدول

کدهای بالا جدولی ساده ایجاد می کند.

برچسب TR
با استفاده از این برچسب یک سطر اضافه می شود. درون برچسب
TR به تعداد لازم می توانید ستون اضافه کنید.

برچسب TD

با استفاده از این برچسب یک ستون اضافه می شود. درون برچسب TR به تعداد لازم می توانید با استفاده از TD ستون اضافه کنید.

تمرین : قطعه کدی که یک جدول با ۲ سطر و ۵ ستون ایجاد می کند بنویسید.

ویژگیهای عمومی جدول و دستکاری آنها

ویژگی border برای اندازه کادر جدول است. اگر مقدار آن ۰ باشد کادر حذف می شود.

ویژگی width برای تعیین عرض جدول است. اگر از جدول به عنوان بدنه صفحه استفاده می کنید مقدار ۸۰۰ مناسب است.

ویژگی height برای تعیین ارتفاع جدول استفاده می شود که استفاده از آن توصیه نمی شود.

ویژگی dir برای پشتیبانی از فارسی بهتر است برابر rtl و برای پشتیبانی از لاتین ltr باشد.

ویژگی id برای انتصاب جدول به یک سری style که با css تهیه شده استفاده می شود که در ادامه خواهد آمد.

ویژگی class نیز برای انتصاب جدول به یک سری style که با css تهیه شده استفاده می شود که در ادامه خواهد آمد.

ویژگی bgcolor برای تعیین رنگ جدول استفاده می شود. مشاهده معادل هگز رنگ ها

این ویژگی ها برای برچسب هائی مانند body, td, tr, div و برخی برچسب های دیگر نیز قابل استفاده است. اگر در یک تگ بزرگتر یک مقدار دلخواه را بکاربرده اید مجددا آنرا تکرار نکنید چون لزومی ندارد. برای نمونه اگر در تگ body از dir=rtl استفاده کرده این لزومی ندارد در تگ های زیر مجموعه مانند table, div, p و … مجددا از dir=rtl استفاده کنید.

ویژگیهای منحصر به فرد جدول

ویژگی cellSpacing : فاصله سطرها و ستونها را از حاشیه جدول تعیین می کند.

ویژگی cellPadding : فاصله نوشته ها را از سطرها و ستونها یا حاشیه جدول تعیین می کند.

مجموعه کدهای زیر را در نظر بگیرید.

اگر بخواهید در این بدنه از یک جدول استفاده کنید که تمام ۸۰۰ پیکسل بدنه را پرکند می توانید مقدار width جدول را ۱۰۰% وارد کنید. استفاده از درصد به جای یک مقدار ثابت سبب می شود تا جدول منعطف شود. در زیر یک نمونه از روش مقدار دهی به جدول آمده است.

طراحی جدول به کمک dreamweaver

با نرم افزار dreamweaver کار طراحی جدول به یک بازی شبیه است. از منوی insert گزینه table را اجرا کنید. در کادر ظاهر شده ویژگیهای جدول را مطابق آنچه گفته شد تنظیم کنید.

طراحی جدول رسپانسیو

تا حد ممکن از بکارگیری جدول در صفحات وب اجتناب کنید با این وجود اگر مجبورید از جدولی استفاده کنید برای اینکه در نسخه های موبایل با مشکل مواجه نشوید در فایل CSS‌ قالب خود کلاس یک کلاس به نام respontive بسازید. خاصیت overflow-x را روی auto !important قرار دهید.

از این به بعد همه جداول را درون یک div با کلاس respontive قرار دهید.

تنظیمات مربوط به انواع کادرها، نوع قلم و افکت های متن مانند فاصله حروف یا Bold , underline, color و … توسط فایل های جانبی CSS قابل طراحی و استفاده است. زبان HTML اینگونه تنظیمات را با استفاده از برچسب <table> و برچسب <font> انجام می دهد که CSS هر دو را منسوخ کرده است.

.

.

.

نوشته دکتر آرش حبیبی