CSS TABLES جداول

 خاصية الجداول (Tables) في لغة CSS تُستخدم لتنسيق وتصميم الجداول التي يتم إنشاؤها باستخدام عنصر <table> في HTML. تُتيح لك CSS التحكم في مظهر الجدول بشكل كامل، بما في ذلك الحدود، والخلفيات، والألوان، والتباعد، والمحاذاة، وأكثر من ذلك.

إليك أهم الخصائص المُستخدمة لتنسيق الجداول في CSS:

1. خصائص الجدول (<table>):

• border-collapse: تُحدد ما إذا كانت حدود الخلايا مُنفصلة أم مُتداخلة.
  • collapse: تُدمج الحدود لتُصبح حدًا واحدًا. (شائعة الاستخدام)
  • separate: تُفصل الحدود عن بعضها.
• border-spacing: تُحدد المسافة بين حدود الخلايا (تُستخدم فقط مع border-collapse: separate).
• table-layout: تُحدد كيفية حساب عرض أعمدة الجدول.
  • auto: (القيمة الافتراضية) يعتمد عرض الأعمدة على محتوى الخلايا.
  • fixed: يعتمد عرض الأعمدة على عرض الجدول وعرض الأعمدة المُحددة. يُحسن أداء عرض الجداول الكبيرة.
• width: يُحدد عرض الجدول.
• caption-side: يُحدد مكان وضع عنوان الجدول (<caption>).
  • top: (القيمة الافتراضية) أعلى الجدول.
  • bottom: أسفل الجدول.

2. خصائص الخلايا (<th> و <td>):

• border: يُحدد حدود الخلية.
• padding: يُحدد المسافة بين محتوى الخلية وحدودها.
• text-align: يُحدد محاذاة النص داخل الخلية.
• vertical-align: يُحدد المحاذاة الرأسية للنص داخل الخلية.
• background-color: يُحدد لون خلفية الخلية.
• width: يُحدد عرض الخلية.
• height: يُحدد ارتفاع الخلية.

أمثلة:

مثال 1: جدول بحدود مُتداخلة:

HTML

<table>
  <caption>جدول بيانات</caption>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>30</td>
  </tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

هذا الكود يُنشئ جدولاً بعرض كامل الصفحة، وحدود مُتداخلة، وتباعد داخلي، وخلفية رمادية لرؤوس الأعمدة.

مثال 2: جدول بحدود مُنفصلة:

CSS

table {
  border-collapse: separate;
  border-spacing: 10px; /* المسافة بين الحدود */
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

هذا المثال يُظهر كيفيّة إضافة مسافة بين الخلايا باستخدام border-spacing.

مثال 3: استخدام table-layout: fixed:

CSS

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

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}

th:nth-child(1) { width: 200px; } /* تحديد عرض العمود الأول */
th:nth-child(2) { width: 300px; } /* تحديد عرض العمود الثاني */

هذا المثال يُحدد عرض الجدول ويُوزّع عرض الأعمدة بناءً على العروض المُحددة لرؤوس الأعمدة (<th>).

نصائح إضافية:

• استخدم <caption> لإضافة عنوان للجدول، مما يُحسن إمكانية الوصول.
• استخدم العناصر <thead> و <tbody> و <tfoot> لتنظيم محتوى الجدول بشكل منطقي، مما يُسهل تنسيقه.
• استخدم خاصية nth-child لاختيار عناصر معينة داخل الجدول وتنسيقها بشكل مُختلف.
• تجنب استخدام الجداول للتخطيط العام للصفحة، حيث توجد بدائل أفضل مثل Flexbox و Grid.

باستخدام هذه الخصائص، يُمكنك التحكم الكامل في مظهر الجداول في صفحات الويب وجعلها جذابة وسهلة القراءة.