🎨 تحويل الجداول المملة إلى تحف فنية باستخدام CSS!

مرحباً بك في درس تنسيق الجداول! إذا كنت قد استخدمت الجداول في HTML من قبل، فستلاحظ أنها تبدو بسيطة جداً بل ومملة. لكن مع CSS، يمكننا تحويل هذه الجداول إلى عناصر جذابة وسهلة القراءة تتناسب مع تصميم موقعك بالكامل. هيا نبدأ رحلة التنسيق! ✨

📝 لماذا ننسق الجداول؟

الجداول غير المنسقة قد تكون صعبة القراءة والمتابعة، خاصة إذا كانت تحتوي على الكثير من البيانات. تنسيق الجداول يساعد على:

  • تحسين إمكانية القراءة: فصل الصفوف والأعمدة بشكل واضح.
  • تحسين المظهر الجمالي: جعل الجدول متناسقاً مع بقية عناصر الصفحة.
  • تسليط الضوء على معلومات مهمة: مثل عناوين الصفوف أو الأعمدة أو بيانات معينة.

🎯 الهيكل الأساسي للجدول (مراجعة سريعة)

قبل البدء في التنسيق، دعنا نتذكر الهيكل الأساسي لجدول HTML الذي سنعمل عليه:

<!DOCTYPE html>
<html>
<head>
    <title>جدول المبيعات</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <table>
        <thead> <!-- رأس الجدول -->
            <tr> <!-- صف -->
                <th>الشهر</th> <!-- عنوان عمود -->
                <th>المبيعات</th>
            </tr>
        </thead>
        <tbody> <!-- جسم الجدول -->
            <tr>
                <td>يناير</td> <!-- خلية بيانات -->
                <td>5,000 ريال</td>
            </tr>
            <tr>
                <td>فبراير</td>
                <td>6,200 ريال</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

ملاحظة: <th> تستخدم لعناوين الأعمدة وعادة ما تكون غامقة وموزعة في المنتصف.

بدون أي تنسيق، سيبدو هذا الجدول بسيطاً جداً.

🖌️ الخطوة 1: إضافة الحدود (Border)

أول وأهم خطوة هي إضافة حدود لتوضيح هيكل الجدول. نستخدم الخاصية border.

/* هذا الكود نضعه في ملف style.css */
table {
  border: 2px solid #333; /* إضافة حد خارجي للجدول كله */
}

th, td {
  border: 1px solid #999; /* إضافة حد لكل من عناوين وخلايا الجدول */
}

الشرح: هنا أعطينا الجدول حداً خارجياً سميكاً (2px) بلون غامق، وحدوداً داخلية رفيعة (1px) بلون أفتح للخلايا.

مشكلة شائعة: ستلاحظ أن هناك مسافة مزدوجة بين الخلايا. لحل هذه المشكلة، نستخدم خاصية border-collapse.

table {
  border: 2px solid #333;
  border-collapse: collapse; /* دمج الحدود المزدوجة لتصبح حدوداً واحدة */
}

th, td {
  border: 1px solid #999;
}

الآن أصبحت الحدود أنظف وأكثر احترافية! ✅

🎨 الخطوة 2: إضافة المسافات الداخلية (Padding)

النص الملتصق بالحدود يصعب قراءته. الحل هو استخدام padding لخلق مسافة داخلية بين محتوى الخلية والحدود الخاصة بها.

th, td {
  border: 1px solid #999;
  padding: 10px 15px; /* 10px للأعلى والأسفل، 15px لليمين واليسار */
}

سيصبح النص الآن مريحاً للعين وسهلاً للقراءة.

🌈 الخطوة 3: تلوين خلفية الجدول

يمكن استخدام الألوان لتمييز أجزاء مختلفة من الجدول، مثل رأس الجدول.

thead {
  background-color: #4CAF50; /* لون أخضر */
  color: white; /* لون النص أبيض للتباين */
}

tbody tr:nth-child(even) { /* نختار الصفوف الزوجية (2, 4, 6, ...) */
  background-color: #f2f2f2; /* لون خلفية فاتح جداً */
}

الشرح: هذه التقنية تسمى "Zebra Striping" وهي مفيدة جداً لتسهيل متابعة الصفوف أفقياً في الجداول الطويلة.

✨ الخطوة 4: تأثير التمرير (Hover Effect)

إضافة تأثير بسيط عندما يمرر المستخدم مؤشر الفأرة فوق صف يجعل الجدول تفاعلياً.

tbody tr:hover {
  background-color: #ddd; /* يتغير لون الصف عندما يتم المرور فوقه */
  cursor: pointer; /* يتغير شكل المؤشر إلى يد للإشارة إلى أنه قابل للنقر */
}

📏 الخطوة 5: محاذاة النص (Text Alignment)

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

th {
  text-align: right; /* محاذاة عناوين الأعمدة إلى اليمين */
}

td {
  text-align: right; /* محاذاة بيانات الخلايا إلى اليمين */
}

td:first-child { /* نختار أول خلية td في كل صف (الشهر) */
  text-align: left; // نترك اسم الشهر بمحاذاة اليسار
}

💎 مثال نهائي متكامل

دعنا نجمع كل ما تعلمناه في مثال واحد:

table {
  width: 100%; /* لجعل الجدول يأخذ العرض الكامل المتاح */
  border-collapse: collapse;
  font-family: Arial, sans-serif; /* تغيير خط النص */
}

th, td {
  border: 1px solid #dddddd;
  padding: 12px 15px;
  text-align: right;
}

thead {
  background-color: #4CAF50;
  color: white;
}

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

tbody tr:hover {
  background-color: #f1f1f1;
}

بهذا نكون قد أنشأنا جدولاً جميلاً، سهل القراءة، ومتناسقاً مع التصميم الحديث للويب! 🎉