كيفية محاذاة الجداول في CSS - شرح text-align و vertical-align

🎯 دليل شامل لمحاذاة الجداول في CSS خطوة بخطوة

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

📝 لماذا نهتم بمحاذاة الجداول؟

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

الأهداف الرئيسية لمحاذاة الجداول:

• تحسين قابلية القراءة للمعلومات.
• إضافة لمسة جمالية وتنظيم بصري.
• تمييز أنواع البيانات المختلفة (مثل محاذاة الأرقام لليمين).

↔️ المحاذاة الأفقية باستخدام text-align

خاصية text-align هي السلاح الأول لمحاذاة المحتوى أفقياً داخل الخلية. يمكنك تطبيقها على العنصر <td> أو <th> مباشرة، أو على <table> نفسها لتطبيق النمط على جميع الخلايا.

القيم الأساسية لـ text-align:

• left: المحاذاة لليسار (القيمة الافتراضية للنصوص باللغة الإنجليزية).
• center: المحاذاة للوسط.
• right: المحاذاة لليمين.
• justify: توزيع النص على عرض الخلية بالكامل.

مثال عملي: محاذاة أعمدة مختلفة

لنفترض أن لدينا جدولاً بسيطاً للمنتجات، ونريد محاذاة الأسماء لليسار والأسعار لليمين والعناوين للوسط.

<table class="products">
  <tr>
    <th>اسم المنتج</th>
    <th>السعر</th>
    <th>الفئة</th>
  </tr>
  <tr>
    <td>كتاب تعلم CSS</td>
    <td>75 ريال</td>
    <td>كتب</td>
  </tr>
</table>

.products {
  width: 100%;
  border-collapse: collapse;
}

.products th {
  background-color: #f2f2f2;
  text-align: center; /* محاذاة عناوين الأعمدة للوسط */
}

.products td:first-child {
  text-align: left; /* محاذاة أسماء المنتجات لليسار */
}

.products td:nth-child(2) {
  text-align: right; /* محاذاة الأسعار لليمين */
}

.products td:nth-child(3) {
  text-align: center; /* محاذاة الفئة للوسط */
}

في هذا المثال:

• استخدمنا text-align: center; لعناوين الأعمدة لجعلها بارزة في المنتصف.
• استخدمنا text-align: right; للعمود الثاني (السعر) لأن محاذاة الأرقام لليمين هي الممارسة الشائعة والأسهل للمقارنة.
• استخدمنا محددات CSS مثل :first-child و :nth-child() لتطبيق أنماط مختلفة على أعمدة محددة.

↕️ المحاذاة الرأسية باستخدام vertical-align

ماذا عن المحاذاة عمودياً؟ هنا يأتي دور الخاصية vertical-align. هذه الخاصية تحدد موقع المحتوى داخل الخلية من الأعلى إلى الأسفل، وهي مهمة خاصة عندما تكون الخلايا مرتفعة.

القيم الأساسية لـ vertical-align:

• top: المحاذاة لأعلى الخلية.
• middle: المحاذاة لمنتصف الخلية (القيمة الافتراضية لخلايا الجدول).
• bottom: المحاذاة لأسفل الخلية.
• baseline: محاذاة حسب خط الأساس للنص (مفيدة عندما يكون هناك نصوص بأحجام مختلفة في نفس الصف).

مثال عملي: محاذاة الصور والنص معاً

لننشئ جدولاً للفريق، حيث كل خلية تحتوي على صورة وشخصية.

<table class="team">
  <tr>
    <td><img src="avatar1.jpg" alt="أحمد"><br>أحمد - مطور واجهات</td>
    <td><img src="avatar2.jpg" alt="سارة"><br>سارة - مصممة جرافيك</td>
  </tr>
</table>

.team img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.team td {
  height: 120px; /* جعل الخلايا مرتفعة */
  border: 1px solid #ddd;
  padding: 10px;
  vertical-align: top; /* محاذاة المحتوى لأعلى الخلية */
}

هنا، لأننا عيّنا vertical-align: top;، ستلتصق الصورة والنص بأعلى الخلية، مما يمنع وجود مسافة بيضاء غير مرغوب فيها في الأسفل عندما يكون المحتوى قصيراً.

⚡ دمج المحاذاة الأفقية والرأسية معاً

القوة الحقيقية تأتي من استخدام الخاصيتين معاً للحصول على تحكم كامل في موضع المحتوى داخل الخلية.

مثال شامل: جدول بيانات منظم

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

.data-table th {
  background-color: #4CAF50;
  color: white;
  /* محاذاة أفقية ورأسية معاً */
  text-align: center;
  vertical-align: middle;
  height: 50px;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 12px;
  /* محاذاة مختلفة بناءً على نوع البيانات */
  text-align: left;
  vertical-align: top; /* جيد للنصوص الطويلة */
}

.data-table .number-cell {
  text-align: right;   /* أرقام لليمين */
  vertical-align: middle; /* أرقام في المنتصف عمودياً */
}

.data-table .status-cell {
  text-align: center;  /* حالة في المنتصف */
  vertical-align: middle;
}

💡 نصيحة عملية: استخدم vertical-align: top; للخلايا التي تحتوي على فقرات نصية طويلة، فهذا يجعل بداية القراءة سهلة. استخدم vertical-align: middle; للخلايا التي تحتوي على بيانات قصيرة أو أرقام لتبدو متوازنة.

🎓 الخلاصة: قواعد ذهبية لمحاذاة الجداول

1. النصوص الطويلة: text-align: left; و vertical-align: top; هو المزيج الأمثل للقراءة.
2. العناوين والأرقام: text-align: center; أو right; مع vertical-align: middle; يمنح مظهراً منظماً.
3. تطبيق على <th>: دائماً اجعل عناوين الأعمدة text-align: center; و vertical-align: middle; لتمييزها.
4. الاختبار: دائماً اختبر جدولك بمحتوى حقيقي لترى كيف تتصرف المحاذاة مع بيانات متفاوتة الطول.