CSS: طراحی جدول. نمونه هایی از ثبت نام

ساخت جداول با CSS - درس جالب و مسئول. رویکرد به این کسب و کار نیاز به شایستگی، با آگاهی از تمام سبک های ممکن است. علاوه بر این، داشتن حس زیبایی به منظور به ترساندن کردن بازدید کنندگان خلاقیت خود لازم است.

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

مرز جدول

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

شما می توانید از کادر بیرونی برای کل جدول را مشخص کنید:

جدول {مرز: 3px را جامد سیاه و سفید؛ }

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

هفتم، TD {مرز: 3px را جامد سیاه و سفید؛}

ضخامت و رنگ، شما می توانید هر را مشخص کنید. به خاطر داشته باشید که مرزهای دو برابر زمانی که اتصال سلول.

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

این است که اغلب مورد استفاده قرار قاب جامد، به نظر می رسد جذاب تر می کند و توجه را از محتوای اصلی سایت منحرف نمی کند.

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

جدول {مرز بالا: 1px با رنگ قرمز ثابت؛ }

بنابراین شما می توانید قاب برای بالای تنها میز گذاشت. به طور مشابه به هر احزاب دیگر، به جای فقط بالای نوشتن: راست، چپ و یا پایین.

هدر جدول

هدر جدول را می توان با استفاده از تگ <عنوان> مشخص شده است. این تگ می توانید در CSS است به ثبت نام بسیاری از خواص برای ریز تنظیم. طراحی جدول CSS خوب است زیرا ممکن است به مانور عناصر راه که می خواهید.

این عنوان در همان راه به عنوان یک استاندارد در کتاب (مانند "جدول 1") نمایش داده شود.

شما می توانید محل از عنوان و ویژگی کنار عنوان (بالا یا پایین) مشخص کنید. هماهنگی سمت چپ یا راست توسط ویژگی text-align تعریف شده است.

جداول پس زمینه

سابقه و هدف از جدول می تواند هر رنگ یا الگوی. رنگ مجموعه خصوصیت background-color. نام خواص به طور کامل با استفاده در سخنرانی سازگار است. آن را تسهیل ذخیره سازی چند بار.

رنگ را می توان به عنوان نام، و کدگذاری مختلف مشخص شده است. علاوه بر این، شما می توانید زیر مشخص کنید:

• شفاف - شفاف.
• به ارث می برند - رنگ همان است که از عنصر پدر و مادر است.
• اولیه - به طور پیش فرض.

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

علاوه بر این، پس زمینه ممکن است یک تصویر. برای این کار، در سبک تجویز خصوصیت background-image. مسیر است مثل این:

آدرس ( "URL")

مسیر به فایل ممکن است به صورت نسبی یا مطلق.

پر بیشتر پیچیده را می توان با یک شیب انجام می شود:

• خطی با شیب ()؛
• شعاعی شیب ()؛
• تکرار خطی با شیب () و تکرار-شعاعی شیب () - شیب تکرار می شود.

سلول پس زمینه

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

علاوه بر این به تناوب، و شما می توانید تعدادی از یک ستون یا سطر خاص را مشخص کنید. به عنوان مثال مثل این:

• TR: n ام-کودک (حتی) {...} - مشخص هم آمیختن؛
• TR: n ام-کودک (1) {...} - نشانه ای از خواص یک ردیف خاص؛
• TD: n ام-کودک (حتی) {...} - نشانه ای از متناوب ستون؛
• TD: n ام-کودک (1) {...} - نشانه ای از خواص یک ستون خاص.

علاوه بر توالی و اعداد را می توان مشخص - اولین (TD: اول کودک) و یا گذشته (TD: آخرین فرزند).

فاصله بین سلول های

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

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

مرز فروپاشی: فروپاشی

اما آن را نیز اتفاق می افتد که از راه دور، در مقابل، باید افزایش یابد. علاوه بر این، به اندازه شکاف می تواند به عنوان ستون ها و بین خطوط مشخص شده است. نشان می دهد که یک مقدار (به جای سقوط):

مرز فروپاشی: جداگانه

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

مرز فاصله: 20px تنظیم کنید.

اگر شما می خواهید برای مشخص کردن یک فاصله های مختلف بین سطر و ستون، آن را نشان دو چیز است:

مرز فاصله: 10px20px.

تفاوت در مرورگرهای

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

بالا یک نمونه از ضخامت قاب را به ارزش های دیجیتال است.

برای این مثال، ضخامت قاب ثابت.

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

بنابراین، توسعه همیشه نتیجه را در مرورگرهای مختلف را ببینید.

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

توسعه دهندگان بسیار پیشرفته می توانید، بسته به مرورگر برای اتصال فایل های CSS کاملا متفاوت است. و یک نفر یک چک در هر یک و یا برخی از سبک خاص (کلاس).

اکثر مشکلات از سایه بوجود می آیند.

CSS: نمونه هایی از فرمت جدول

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

ما چند نمونه از جداول مختلف را. شکل بالا استفاده از شیب را نشان می دهد و بازی با رنگ پس زمینه و مرز.

بسیاری از آن ها مثال جالب از طراحی شسته و رفته و زیبا است که به کاربران چشم قطع نمی کند. این تجسم تقریبا در هر وضعیت مناسب است.

لبه های گرد می توان ساخته شده است. به نظر می رسد خیلی خوب است.

نتیجه

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

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

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