تبلیغات
تبلیغات متنی
آموزشگاه آرایشگری مردانه شفیع رسالت
دکتر علی پرند فوق تخصص جراحی پلاستیک
بهترین دکتر پروتز سینه در تهران
محبوبترینها
راهنمای انتخاب شرکت‌های معتبر باربری برای حمل مایعات در ایران
چگونه اینورتر های صنعتی را عیب یابی و تعمیر کنیم؟
جاهای دیدنی قشم در شب که نباید از دست بدهید
سیگنال سهام چیست؟ مزایا و معایب استفاده از سیگنال خرید و فروش سهم
کاغذ دیواری از کجا بخرم؟ راهنمای جامع خرید کاغذ دیواری با کیفیت و قیمت مناسب
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
بهترین ماساژورهای برقی برای دیسک کمر در بازار ایران
آفریقای جنوبی چگونه کشوری است؟
بهترین فروشگاه اینترنتی خرید کتاب زبان آلمانی: پیک زبان
با این روش ساده، فروش خود را چند برابر کنید (تست‌شده و 100٪ عملی)
خصوصیات نگین و سنگ های قیمتی از نگاه اسلام
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1866315043
چگونه یک جدول اطلاعات ساده اما بسیار حرفه ای ایجاد کنیم؟
واضح آرشیو وب فارسی:راسخون:
چگونه یک جدول اطلاعات ساده اما بسیار حرفه ای ایجاد کنیم؟ در این نوشته می خواهیم کمی در مورد 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]
[تعداد بازديد از اين مطلب: 2757]
-
گوناگون
پربازدیدترینها