Header Ads

تصميم الجداول


حدود الجدول


لتخصيص حدود الجدول يمكنك استخدام خاصية الحدود border
في المثال التالي تم تخصيص حدود الجدول table باللون الأسود بالاضافة الى ترويسة العنوان th وأيضاً الخلايات الافقية td
table, th, td
{
border: 1px solid black;
}





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

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




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


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

مثال
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}





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


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

في المثال التالي تم ضبط عرض الجدول 100% وارتفاع الجدول 50 بكسل
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;
}





يتم التشغيل بواسطة Blogger.