محبوبترینها
چگونه با ثبت آگهی رایگان در سایت های نیازمندیها، کسب و کارتان را به دیگران معرفی کنید؟
بهترین لوله برای لوله کشی آب ساختمان
دانلود آهنگ های برتر ایرانی و خارجی 2024
ماندگاری بیشتر محصولات باغ شما با این روش ساده!
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1846080925
چگونه یک جدول اطلاعات ساده اما بسیار حرفه ای ایجاد کنیم؟
واضح آرشیو وب فارسی:راسخون:
چگونه یک جدول اطلاعات ساده اما بسیار حرفه ای ایجاد کنیم؟ در این نوشته می خواهیم کمی در مورد Css و Table ها صحبت کنیم. اکثر طراحان وب می دانند که این روز ها متد های طراحی در حال تغییر است و طرح های حرفه ای محسوب می شوند که در ساختار آنها تا آنجا که امکان دارد از Table کمتر استفاده شده باشد و یا در اصطلاح Table less باشند.شاید پیاده سازی بسیار از موارد مورد نیاز در یک طراح با استفاده از دیگر عناصر XHTML بسیار ساده تر از استفاده از Table ها باشد اما در برخی مواقع هیچ راه گریزی نیست.یکی از خواسته های که پیاده سازی آن با Table می تواند راحت ترین راه ممکن باشد ، نمایش جداول اطلاعاتی است که در برخی از کارها نیاز به استفاده از آنها می شود. در برخی از این موارد ، کاربران و یا طراحان فکر می کنند که استفاده Table نمی تواند آنگونه که می خواهند طرح را نمایش دهد به عبارت دیگر فکر می کنند که Table ها زیاد انعطاف پذیر نیستند.اما با استفاده از Css می توان به عناصر Table نیز ظاهری متعارف داد تا هم حجم کمتری را به خود اختصاص دهند و هم بهتر نمایش داده شوند. اکنون می خواهیم یک نمونه جدول را با استفاده از Css پیاده سازی کنیم و ظاهری متناسب به آن دهیم.به سراغ طرح خود برویم، می خواهیم جدولی از اطلاعات مورد نظر شبیه چیزی که در تصویر می بینید ایجاد کنیم. ابتدا عناصر xhtml را پیاده سازی می کنیم.
در ویرایشگر خود یک پرونده جدید xhtml ایجاد کنید و کد های زیر را در بدنه صفحه قرار دهید. دقت کنید نوع قرار گیری کد های زیر برای نمایش صحیح تر طرح نهایی بسیار مهم هستند.بخش XHTML<table cellpadding="0" summary="لیست اجناس شرکت..." dir="rtl"><colgroup><col id="idCol" /><col /><col /><col /><col /></colgroup><thead><tr><th>ID</th><th>نام</th><th>بخش</th><th>قیمت</th><th>وضعیت</th></tr></thead><tbody><tr><td>19</td><td>دوربین دیجیتال</td><td>الکترونیک</td><td>$250</td><td>موجود</td></tr><tr><td>25</td><td>گوشی موبایل</td><td>الکترونیک</td><td>$600</td><td>موجود</td></tr><tr><td>37</td><td>Mp3 پلیر</td><td>الکترونیک</td><td>$75</td><td>وجود ندارد</td></tr><tr><td>78</td><td>پلی استیشن 3</td><td>بازی</td><td>$550</td><td>موجود</td></tr></tbody></table>بخش Cssدر ادامه به بخش Css می رسم ، اکنون می خواهیم نمای بهتری به Table خود بدهیم. ابتدا یک شکل ساده برای جدول خود در نظر می گیریم ، Css مورد نظر می تواند چیزی شبیه این باشد:table { border: #ccc 1px solid; border-collapse: collapse; font-family: Tahoma, Helvetica, sans-serif; font-size: 0.7em; height: 60px; text-align: right;}col { border-right: #ccc 1px solid;}col#idCol { width: 45px;}بعد از انجام این کار زمان آن می رسد که طرح مورد نظر را برای جدول خود پیاده سازی کنیم:th { border-right: #ccc 1px solid; font-size: 1em; height: 25px; text-align: right; padding: 0px 4px 0px 60px;}tbody tr { border-bottom: #eee 1px solid; font-size: .9em; line-height: 1.8em;}tbody tr:hover { background: #f1f1f1}td { padding: 0 4px 0 4px;}اکنون جدول ما نمای خیلی بهتری نسبت به قبل پیدا کرده است ، اما اگر بخواهیم نمای جالبتری به آن بدهیم می توانید برای عناوین ستون ها از تصویر بک گراند استفاده کنیم.th { background: #e6e2d9 url("thbackground.jpg") bottom left repeat-x; border-right: #ccc 1px solid; font-size: 1em; height: 25px; text-align: left; padding-right: 4px;}thead th:hover { background: url("thbackgroundhover.jpg") bottom left repeat-x;}توجه کنید که مشخصه hover عناصر در IE6 قابل اجرا نیست ، منتها می توانید با استفاده از jQuery این مشکل را نیز به سادگی حل کنید که به خودتان می سپارم حل آن را.منبع:http://ipooya.com/خ
این صفحه را در گوگل محبوب کنید
[ارسال شده از: راسخون]
[مشاهده در: www.rasekhoon.net]
[تعداد بازديد از اين مطلب: 2738]
-
گوناگون
پربازدیدترینها