جدول های زیبا با css

 جدول ها در css

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

ویژگی border برای جداول :

border جدول و border عنوان و ستون ها را مشخص می کند.

ویژگی border-collapse : تعیین می کند که جدول فقط یک border میتواند داشته باشد.

ارتفاع سطرها و عنوان جدول :

متن ها در جدول با ویژگی های text-align و vertical-align :

ویژگی text-align ترازبندی متن به صورت افقی(چپ،راست،وسط) و ویژگی vertical-align ترازبندی متن در ارتفاع (بالا، وسط، پایین)

می توانیم فضای بین محتوای جدول و border را با padding ایجاد کنیم (آموزش padding)

با ویژگی زیر می توانیم فقط boder پایین سطرها را نمایش دهیم:

تغییر رنگ سطرها با رفتن ماوس بر روی آنها :

یک در میان رنگ کردن سطرها با ویژگی nth-child :

سطرهای فرد یک در میان رنگ می شوند . برای رنگ شدن سطرهای زوج می بایست ویژگی را به این صورت نوشت : nth-child(even)

عنوان جدول را میتوانیم رنگی جداگانه بزنیم با تغییر رنگ کلاس th :

حالت رسپانسیو یا انعطاف پذیر برای جدول با ویژگی overflow-x:auto : برای اینکه جدولمان در نمایشگرها مختلف به خصوص کوچک درست نمایش داده بشود از این ویژگی استفاده می نماییم با اینکار در صورتی که صفحه از جدولمان کوچکتر باشد یک اسکرول برای جدول ایجاد شده تا کاربر براحتی بتواند به کلیه اطلاعات جدول دسترسی پیدا کند.

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

اشتراک گذاری :
آموزش CSS آموزش برنامه نویسی

درباره حسین رسولی

از سال 89 در زمینه طراحی اپلیکیشن های ویندوز ، موبایل و همچنین طراحی سایت فعالیت دارم و در حال حاضر مدیریت سایت جهان سورس را برعهده دارم و سعی می کنم روزانه آموزش ها و پروژه های برنامه نویسی را با شما به اشتراک بگذارم.

دیدگاه خود را بیان کنید

از ما حمایت کنید