18- تجميل جداول HTML باستخدام CSS

استخدم CSS لجعل جداولك تبدو أكثر جاذبية وعصرية!

خطوط الحمار الوحشي (Zebra Stripes)

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

لتغيير مظهر كل صف ثانٍ في الجدول، استخدم مُحدّد :nth-child(even) في CSS هكذا:

tr:nth-child(even) {
  background-color: #D6EEEE;
}

ملاحظة: استخدام (odd) بدلاً من (even)

عند استخدام (odd) بدلاً من (even) في مُحدّد :nth-child، سيتم تطبيق التغييرات على الصفوف ذات الأرقام الفردية (1، 3، 5، …) بدلاً من الصفوف الزوجية (2، 4، 6، …).

خطوط الحمار الوحشي الرأسية في جداول HTML

لتحقيق تأثير خطوط الحمار الوحشي بشكل رأسي في جدولك، بدلًا من تغيير كل صف ثانٍ، ستقوم بتغيير كل عمود ثانٍ.

تطبيق :nth-child(even) على عناصر بيانات الجدول

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

ملاحظة: استهدف كلًا من رؤوس الأعمدة (th) وخلايا الجدول العادية (td) باستخدام :nth-child()

إذا كنت ترغب في تطبيق نفس التعديلات البصرية (لون، خط، تظليل، إلخ) على كل من رؤوس الأعمدة وخلايا الجدول العادية في جدولك، فلا تنسَ تضمين كلًا من عنصري th و td في مُحدّد :nth-child().

مزج خطوط الحمار الوحشي الأفقية والرأسية في جداول HTML

بإمكانك الجمع بين تقنيتَي خطوط الحمار الوحشي المذكورتين أعلاه، لتحصل على خطوط متناوبة على كل من الصفوف والأعمدة في جدولك.

استخدام ألوان شفافة لتأثير التداخل

استخدام لون rgba لتحديد شفافية اللون

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

الخطوط الأفقية

إذا قمت بتحديد حواف فقط في أسفل كل صف في الجدول، فسيحصل جدولك على خطوط أفقية تفصل بين الصفوف.

لإضافة خطوط أفقية، أضف خاصية border-bottom إلى جميع عناصر tr:

tr {
  border-bottom: 1px solid #ddd;
}

جدول تفاعلي مع التظليل عند التمرير

لتحويل جدولك إلى عنصر تفاعلي يبرز المعلومات عند التمرير، يمكنك استخدام مُحدّد :hover على عناصر tr (صف) في CSS لإضافة تظليل مؤقت عند مرور مؤشر الماوس فوقها.

tr:hover {background-color: #D6EEEE;}

عنصر colgroup في جداول HTML

يُستخدم عنصر <colgroup> في HTML لتحديد مجموعة من الأعمدة وتطبيق نفس الأنماط عليها في جدولك.

إذا أردت تحديد الأسلوب لعمودين الأول والثاني في الجدول، يمكنك استخدام <colgroup> و <col> كما يلي:

شرح مفصل لعنصر <colgroup> في جداول HTML:

الغرض: يستخدم عنصر <colgroup> لتحديد مجموعة من الأعمدة وتطبيق نفس الأنماط عليها في جدولك. بمعنى آخر، هو بمثابة حاوية لتعريف خصائص وتنسيق مجموعة محددة من الأعمدة.

مكونات <colgroup>:

• العمود الفرعي <col>: داخل عنصر <colgroup>، يتم تحديد كل عمود ضمن المجموعة باستخدام عنصر <col>. يمكنك تضمين عدة عناصر <col> داخل <colgroup> لتعريف كل الأعمدة في المجموعة.
• خاصية span: تستخدم خاصية span لتحديد عدد الأعمدة التي ستتأثر بنفس الأنماط المحددة داخل <col>. على سبيل المثال، إذا وضعت span="2" داخل <col>, سيتم تطبيق الأنماط على العمودين التاليين.
• خاصية style: يمكنك استخدام خاصية style داخل <col> لتحديد الأنماط المحددة التي ستطبق على الأعمدة. يمكنك تحديد خصائص CSS مختلفة مثل عرض العمود، لون الخلفية، سمك الخط، وغيرها.

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

يجب وضع عنصر <colgroup> داخل عنصر <table> ويجب وضعه قبل أي عناصر أخرى في الجدول، مثل <thead> و <tr> و <td> وما إلى ذلك. ولكن بعد عنصر <caption> إذا كان موجودًا.

خصائص CSS المسموح بها في عنصر colgroup

يُعد عنصر <colgroup> في جداول HTML مفيدًا لتطبيق نمط موحد على مجموعة محددة من الأعمدة، لكنه محدود في الخصائص التي يمكنك استخدامها. إليك قائمة بالخصائص المسموح بها فقط في <colgroup>:

• خصائص العرض (width): يمكنك تحديد عرض كل عمود في المجموعة باستخدام خاصية width. على سبيل المثال، colgroup { width: 150px; } سيجعل كل عمود في المجموعة بعرض 150 بكسل.
• خاصية الإظهار (visibility): يمكنك إخفاء مجموعة الأعمدة بالكامل باستخدام خاصية visibility: hidden;.
• خصائص الخلفية (background): يمكنك تحديد لون خلفية الأعمدة، والتدرج، والصور باستخدام خصائص background-color, background-image, وخصائص أخرى.
• خصائص الحواف (border): يمكنك تحديد سمك الحواف، ولونها، ونوعها (صلب، منقط، إلخ) على حواف الأعمدة باستخدام خصائص border-top, border-right, border-bottom, border-left.

تعديل عدة أعمدة بأنماط مختلفة باستخدام <colgroup>

إذا أردت تطبيق أنماط مختلفة على أعمدة متعددة في جدولك، يمكنك استخدام عناصر <col> متعددة داخل عنصر <colgroup> واحد.

مثال:

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

تخصيص أعمدة داخل جدول باستخدام <colgroup> “الفارغة”

إذا أردت تخصيص أعمدة معينة في منتصف الجدول، يمكنك استخدام عنصر <col> “فارغ” (بدون أنماط) لفصل الأعمدة التي لا تريد تخصيصها عن الأعمدة المطلوبة.

المثال:

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

إخفاء أعمدة الجداول باستخدام خاصية visibility: collapse;

يمكنك إخفاء أعمدة الجداول في HTML باستخدام خاصية visibility: collapse; في CSS. هذه الخاصية تجعل العمود غير مرئي بشكل كامل، وكأنّه لم يُضمّن في الجدول.

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...