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

حدود الجدول

لتخصيص حدود الجدول يمكنك استخدام خاصية الحدود 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;
}

---