جداول CSS
يمكن تحسين مظهر جدول HTML بشكل كبير باستخدام CSS:
شركة | اتصل | دولة |
---|---|---|
صندوق تغذية ألفريد | ماريا أندرس | ألمانيا |
سوبر ماركت بيرجلوند | كريستينا بيرغلوند | السويد |
مركز تسوق مونتيزوما | فرانسيسكو تشانغ | المكسيك |
تجارة جادة | رولان مندل | النمسا |
الجزيرة للتجارة | هيلين بينيت | المملكة المتحدة |
طعام ملكي | فيليب كريمر | ألمانيا |
يضحك باخوس Winecellars | يوشي تاناموري | كندا |
مستودعات الأغذية المجمعة | جيوفاني روفيلي | إيطاليا |
حدود الجدول
لتحديد حدود الجدول في CSS ، استخدم border
الخاصية.
يحدد المثال أدناه حدًا أسود لعناصر <table> و <th> و <td>:
مثال
table, th, td {
border: 1px solid black;
}
جدول كامل العرض
قد يبدو الجدول أعلاه صغيرًا في بعض الحالات. إذا كنت بحاجة إلى جدول يمتد على الشاشة بأكملها (بالعرض الكامل) ، أضف width: 100%
إلى عنصر <table>:
مثال
table {
width: 100%;
}
حدود مزدوجة
لاحظ أن الجدول في الأمثلة أعلاه له حدود مزدوجة. هذا لأن كلاً من الجدول وعنصر <th> و <td> لهما حدود منفصلة.
لإزالة الحدود المزدوجة ، ألق نظرة على المثال أدناه.
تصغير حدود الجدول
تحدد الخاصية ما border-collapse
إذا كان يجب طي حدود الجدول في حد واحد:
مثال
table
{
border-collapse: collapse;
}
إذا كنت تريد فقط حدًا حول الجدول ، فحدد فقط border
خاصية <table>:
مثال
table
{
border: 1px solid black;
}