محبوبترینها
با چاپ روی وسایل یک کسب و کار پرسود بسازید
قیمت دیگ بخار و تولیدکننده اصلی دیگ بخار
معروف‌ترین هدیه و سوغاتی یزد مشخص شد!
آشنایی با انواع دوربین مداربسته ضد آب
پرداخت اینترنتی قبوض ساختمان (پرداخت قبض گاز، برق و آب)
بهترین دوره آموزش سئو محتوا در سال 1403 با نام طوفان ۱۴۰۳ در فروردین ماه شروع می شود
یک صرافی ارز دیجیتال چه امکاناتی باید داشته باشد؟
تعمیرگاه مجاز تعمیر ماشین لباسشویی در شرق تهران
تعمیرگاه مجاز تعمیر ماشین لباسشویی در شرق تهران
جراحی و درمان ریشه دندان عفونی با خانم دکتر صفوراامامی
چه مواردی بر قیمت کابین دوش حمام تاثیر دارند؟
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1798791698
چگونه یک جدول اطلاعات ساده اما بسیار حرفه ای ایجاد کنیم؟
واضح آرشیو وب فارسی:راسخون:
چگونه یک جدول اطلاعات ساده اما بسیار حرفه ای ایجاد کنیم؟ در این نوشته می خواهیم کمی در مورد 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]
[تعداد بازديد از اين مطلب: 2662]
-
گوناگون
پربازدیدترینها