CSSطراحی سایتگوناگون

۹-فرمت دهی جداول در CSS

جداول در CSS

 

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

  مثال زیر جدولی است که توسط  CSS فرمت دهی شده است.  

 

 


لبه های جدول(Border)

 

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

در قطعه کد زیر برای عناصر table,th و td از خصوصیت border استفاده شده است:

تصویر قطعه کد بالا به شکل زیر است :

اگر دقت کرده باشید در مثال بالا دو لبه وجود دارد ،دلیل آن این است که هم برای table و هم برای th و td به صورت جداگانه border تنظیم شده است.

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

 


یکی کردن Border ها

 

برای تبدیل کردن لبه های دوخطی به لبه های یک خطی و مجزا از خاصیت border-collapse استفاده می گردد:

تصویر قطعه کد بالا به شکل زیر است :

 


عرض و ارتفاع یک جدول (Width/height )

 

از خصوصیات width و height برای تنظیم عرض و ارتفاع یک جدول استفاده می شود.

در مثال زیر عرض جدول ۱۰۰% و ارتفاع آن با ۵۰px تنظیم شده است:

تصویر قطعه کد بالا به شکل زیر است :

 


 تراز بندی متن جدول(Alignment)

 

میتوان متن داخل یک سلول جدول را با خصوصیات vertical-align و text-align تراز بندی کرد.

خصوصیت text-align نوشته موجود را در جهت افقی تراز بندی می کند.

تصویر قطعه کد بالا به شکل زیر است :

خصوصیت vertical-align نوشته موجود را در جهت عمودی تراز بندی می کند.

تصویر قطعه کد بالا به شکل زیر است :

 


padding یک جدول

 

برای کنترل و تنظیم کردن فاصله بین متن و لبه در جدول از خصوصیت padding استفاده می شود:

تصویر قطعه کد بالا به شکل زیر است :

 


رنگ جدول

 

در مثالی که در پایین زده شده ابتدا رنگ لبه های table,td,th ،سبز تنظیم شده و برای header جدول ،رنگ پس زمینه با رنگ سبز نوشته داخل آن رنگ سفید انتخاب شده است:

تصویر قطعه کد بالا به شکل زیر است :


ساخت یک جدول فانتزی

 

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

 


تنظیم مکان عنوان یا Caption یک جدول

 

این مثال به ما نشان میدهد که چگونه مکان Caption یک جدول را تنظیم کنیم.        کلیک کنید

 

 


بخش بعدی

بخش قبلی

 

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن