More

[ دورة CSS ] التصميم CSS – الدرس السادس – تصميم الجداول

" Here you can search for everything you want and you will find it as soon as possible "

يمكن التعديل على الجداول من خلال CSS بشكل رهيب , انظر الجدول في هذا المثال

حدود الجدول

لتخصيص حدود الجدول يمكنك استخدام خاصية الحدود border
في المثال التالي تم تخصيص حدود الجدول table باللون الأسود بالاضافة الى ترويسة العنوان th وأيضاً الخلايات الافقية td

table, th, td
{
border: 1px solid black;
}

لاحظ في المثال السابق أن الجدول لديه حدود مضاعفة هذا بسبب كل من عناصر الجدول والعنوان والخلايا لديها حدود مستقلة

لإظهار حدود الجدول كخط واحد استخدم خاصية تقليص الحدود border-collapse

تقليص الحدود Collapse Borders

تقوم خاصية تقليص الحدود border-collapse بضبط فيما اذا كان الحدود مقلصّة أم لا

Click Here To Download 

مثال

Click Here To Download 
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

ارتفاع وعرض الجدول Table Width and Height

يتم تحديد عرض وارتفاع الجدول من خلال خاصيات width و height

في المثال التالي تم ضبط عرض الجدول 100% وارتفاع الجدول 50 بكسل

Click Here To Download 
table
{
width:100%;
}
th
{
height:50px;
}

محاذاة النص في الجدول

يمكن التحكم بمحاذاة النص في الجدول من خلال خاصيات text-align و vertical-align
تضبط خاصية text-align المحاذاة الأفقية للنص مثل يمين ويسار وفي الوسط left و right و center

مثال

td
{
text-align:right;
}

تضبط خاصية vertical-align المحاذاة العمودية للنص مثل للأعلى و للأسفل وفي الوسط
top و bottom و middle

مثال

td
{
height:50px;
vertical-align:bottom;
}

الهوامش الداخلية للجدول

يمكنك استخدام خاصية الهوامش الداخلية padding لتتحكم بالمسافة بين الجدول والمحتوى (النص) على المنتقى td و th

مثال

td
{
padding:15px;
}

لون الجدول

يوضّح المثال التالي لون حدود الجدول بشكل كامل بالاضافة الى لون عناوين الجدول th

table, td, th
{
border:1px solid green;
}
th
{
background-color: green;
color: white;
}

Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker