الجداول في CSS

يستخدم الجدول عادةً لعرض بيانات الجدول.

باستخدام جدول CSS

عند بناءجدول HTML، سيعرض المتصفحها دون أي حواف. يمكن لاستخدام أنماط CSS تحسين مظهر الجدول بشكل كبير.

في الفقرات التالية سيتم عرض كيفية استخدام CSS لتحكم في تنسيق وتصوير عناصر الجدول لإنشاء جدول نظيف ومتناسق.

إضافة حواف إلى جدول

CSS borderالخصائص هي أفضل طريقة لتحديد حواف الجدول.

في المثال التالي، سيتم تعيين حافة سوداء على<table>،<th>و<td>العنصر.

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

تحطيم حواف الجدول

إذا رأيت الناتج في المثال السابق، ستجد أن كل خلية جدول لها حافة منفصلة، ويوجد مسافة بين حواف خلايا الجدول المجاورة. يحدث هذا لأن حواف خلايا الجدول هي منفصلة افتراضيًا. ولكن يمكنك استخدام العنصرborder-collapseالخصائص على الجدول

في المثال التالي، ستجعل القواعد النمط تحطيم حواف خلايا الجدول وتطبيق حافة سوداء واحدة بعرض بكسل على عناصر جدول الجدول.

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

يمكنك أيضًا إزالة مساحة بين حواف خلايا الجدول باستخدام قيمة CSS:border-spacingالقيمة 0. ولكن، إنه فقط يزيل المساحة، وليس يتم دمجها مثل عندما تقوم بتعيين الحدود border-collapse إلى collapse.

تدبير المساحة الداخلية للجدول

بشكل افتراضي، الخلايا التي أنشأتها المتصفحات تكفي لتلبي احتياجات البيانات في الخلية. إذا كنت ترغب في إضافة مساحة إضافية حول محتوى خلية الجدول، يمكنك استخدام خاصية CSS padding، مثلما هو موضح أدناه:

th, td {
　　　　padding: 15px;
}

border-spacingإذا كانت حواف الجدول منفصلة (إعداد افتراضي)، يمكن أيضًا استخدام خاصية CSS لتحديد مسافة بين حواف الخلايا.

تطبيق هذه قواعد النمط بين جميع حواف الجدول بفارق 10 بكسل:

table　{
　　　　border-spacing: 10px;
}

تحكم في تنسيق الجدول

بشكل افتراضي، الجدول يتمدد وينكمش لتلبي احتياجات البيانات التي يحتويها. عند ملء البيانات في الجدول، سيستمر التوسع طالما كان هناك مساحة.

يمكنك استخدام مُحدد CSS table-layout لتنفيذ هذا. يحدد هذا المُحدد الخوارزمية المستخدمة لتنظيم خلايا الجدول، الصفوف والعمود. يأخذ هذا المُحدد قيمتين فقط:

• auto —استخدام نموذج تخطيط الجدول التلقائي. باستخدام هذا النموذج، يمكن تعديل عرض الجدول والخلايا ليتناسب مع المحتوى. هذا هو القيمة الافتراضية.

• fixed -استخدام نموذج تخطيط الجدول الثابت. باستخدام هذا النموذج، لا تعتمد تخطيط الجدول على محتوى الخلايا، بل يعتمد فقط على عرض الجدول، عرض الأعمدة، والهوامش أو المسافات بين الخلايا.

في المثال التالي، تُشير النماذج التالية للنصوص إلى أن الجدول يستخدم نموذج التخطيط الثابت، ويكون عرضه ثابتًا عند 300 بكسل.

table　{
　　　　width:　300px;
　　　　table-layout:　fixed;
}

بدون قيمة ثابتة لمُحدد table-layout، في الجداول الكبيرة، لن يرى المستخدم أي جزء من الجدول حتى يتم عرض الجدول بالكامل من قبل المتصفح.

معالجة الخلايا الفارغة

يتحكم مُحدد empty-cells في الحدود، ويُمكن أن يتم عرض الخلايا الفارغة في الجدول باستخدام نموذج الحدود المُفككة خلفية خلية الخلايا.

يمكن لهذا المُحدد أن يأخذ أحد الثلاثة أقيمات: show، hide أو inherit.

النماذج التالية للنصوص ستخفي الخلايا الفارغة في عنصر الجدول.

table　{
　　　　border-collapse:　separate;
　　　　empty-cells:　hide;
}

تحكم في موقع عنوان الجدول

يحدد مُحدد caption-side موقع العنوان الجانبي للجدول.

النماذج التالية للنصوص ستضع عناوين الجدول تحت الجدول الأبtext-alignالخصائص.

caption　{
　　　　caption-side:　bottom;
}