كيفية التحكم في حجم وعرض الجداول في CSS - شرح شامل للمبتدئين

📏 التحكم الكامل في حجم وعرض الجداول باستخدام CSS 🎯

في هذا الدرس، سنتعلم كيفية التحكم في حجم وعرض الجداول (Table Size) باستخدام لغة CSS. ستمنحك هذه المهارة القدرة على تصميم جداول جميلة ومنظمة تتناسب مع تصميم موقعك بالكامل. هيا بنا نبدأ! ✨

📐 لماذا نحتاج للتحكم في حجم الجداول؟

تظهر الجداول الافتراضية في المتصفح بعرض يتناسب مع محتواها الداخلي، مما قد يؤدي إلى مظهر غير متناسق. تخيل جدولاً صغيراً ضائعاً في صفحة واسعة، أو جدولاً كبيراً يتجاوز حدود الشاشة! 🫣 باستخدام CSS، يمكننا تحديد أبعاد الجدول بدقة ليكون متناسقاً وجميلاً.

🛠️ الأدوات الأساسية: width و height

هما الخصائص الأساسية للتحكم في الأبعاد. width للعرض و height للارتفاع.

1. تحديد العرض (width)

يمكننا تعيين عرض الجدول بعدة طرق:

table {
  width: 100%; /* يأخذ الجدول عرض العنصر الحاوي له بالكامل */
}

table {
  width: 600px; /* عرض ثابت مقداره 600 بكسل */
}

مثال عملي: لننشئ جدولاً بسيطاً ونحدد عرضه.

<!-- HTML -->
<table class="my-table">
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
</table>

/* CSS */
.my-table {
  width: 80%; /* سيكون عرض الجدول 80% من عرض العنصر الذي يحتويه */
  border: 1px solid #ccc; /* إطار بسيط لرؤية الحدود */
}

2. تحديد الارتفاع (height)

نستخدم height للتحكم في ارتفاع الجدول ككل. لكن انتبه ⚠️، عادةً ما نترك الارتفاع يتحدد تلقائياً بناءً على المحتوى، إلا إذا كان لدينا سبب محدد.

table {
  height: 300px; /* ارتفاع ثابت */
}

🔄 خاصية box-sizing الهامة

قد تلاحظ شيئاً غريباً! عندما نضيف padding أو border للجدول أو خلاياه، قد يتجاوز العرض الذي حددناه (width). لماذا؟ 🤔

السبب هو أن النمط الافتراضي (content-box) يحسب width و height على محتوى العنصر فقط، دون إضافة padding أو border.

الحل السحري: استخدام box-sizing: border-box; ✅ هذا يجعل المتصفح يحسب العرض والارتفاع ليشمل المحتوى والـ padding والـ border معاً، مما يمنع المفاجآت غير المرغوب فيها!

table {
  width: 500px;
  padding: 20px;
  border: 5px solid blue;
  box-sizing: border-box; /* السحر هنا! */
}

مع border-box، سيكون العرض الكلي للجدول 500px (تشمل الـ 20px padding والـ 5px border من كل جانب).

📱 جعل الجداول سريعة الاستجابة مع max-width

في عالم الهواتف الذكية، نحتاج لأن تكون جداولنا مرنة. خاصية max-width تضع حداً أقصى للعرض، لكن تسمح للجدول بالانكماش إذا كانت الشاشة أصغر.

.responsive-table {
  max-width: 100%; /* لن يتجاوز عرض الجدول عرض العنصر الحاوي */
  width: 800px; /* لكنه سيحاول أن يكون بعرض 800px إذا سمحت المساحة */
}

هذا يعني: "يا جدول، كن بعرض 800px إذا استطعت، ولكن مطلقاً لا تتعدى عرض والدك (الحاوي)." 🧑‍🍼

🧩 التحكم في حجم الخلايا (<td>, <th>)

يمكننا أيضاً تطبيق خصائص الحجم على الخلايا الفردية داخل الجدول.

th {
  width: 150px; /* جميع عناوين الأعمدة ستكون بعرض 150px */
}

td {
  height: 50px; /* جميع خلايا البيانات ستكون بارتفاع 50px */
}

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

<table class="student-table">
  <tr>
    <th>اسم الطالب</th>
    <th>المادة</th>
    <th>الدرجة</th>
  </tr>
  <tr>
    <td>سارة</td>
    <td>الرياضيات</td>
    <td>95</td>
  </tr>
</table>

.student-table {
  width: 90%; /* عرض مرن */
  max-width: 700px; /* لكن لا يزيد عن 700px */
  border-collapse: collapse; /* لدمج حدود الخلايا */
  box-sizing: border-box; /* لحساب الحجم بشكل صحيح */
  margin: 20px auto; /* لتوسيط الجدول */
}

.student-table th,
.student-table td {
  border: 1px solid #333;
  padding: 12px;
  text-align: center;
}

.student-table th {
  width: 33%; /* نجعل كل عمود يأخذ ثلث عرض الجدول تقريباً */
  background-color: #f2f2f2;
}

💡 نصائح ذهبية لتنسيق حجم الجداول

1. الأفضلية للقيم النسبية (%) 🥇: استخدم width: 100% أو max-width: 100% لجداول سريعة الاستجابة تتناسب مع الشاشات المختلفة.
2. لا تسرف في height 📏: تجنب تحديد ارتفاع ثابت للجدول إلا للضرورة، دعه يتمدد مع محتواه.
3. تذكر box-sizing 🧠: اجعل box-sizing: border-box; من عاداتك الأساسية عند العمل مع الحجوم لتجنب الأخطاء الشائعة.
4. التجربة هي المفتاح 🔑: جرب قيماً مختلفة وشاهد النتيجة مباشرة في المتصفح.

🎯 ختام الدرس

تهانينا! 🎉 لقد تعلمت اليوم كيفية التحكم في حجم وعرض الجداول باستخدام CSS. أنت الآن تعرف كيف تستخدم width، height، max-width، والخاصية الهامة box-sizing لإنشاء جداول ذات أبعاد دقيقة ومنسجمة مع تصميمك.