الجداول Tables

للدخول إلى إختبار الدرس يجب عليك تسجيل الدخول أولاُ
تسجيل الدخول

تنسيق وتصميم الجداول بإستخدام لغة CSS

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

إضافة الحدود للجداول

إن الخاصية border من لغة CSS هي أفضل طريقة لإضافة حدود للجداول.
في المثال التالي سنقم بإضافة حد أسود لعناصر <table> و <th> و <td>.

مثال

تشغيل

table, th, td {
border: 1px solid black;
}

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

دمج حدود الجداول

كما لاحظنا من الرسم التوضيحي السابق الشكل الافتراضي لحدود الجدول هي الحدود المزدوجة لكل خلية من خلايا الجدول حدودها المميزة الخاصة بها.
. باستخدام الخاصية border-collapse من لغة CSS يمكننا دمج حدود الجدول بحيث تشترك خلايا الجدول المجاورة في حد مشترك.

لنجرب المثال التالي لفهم كيفية عمل الخاصية border-collapse :

مثال

تشغيل

table {
border-collapse : collapse;
}
table , th, td {
border : 1px solid black;
}

ملاحظة:

يمكننا أيضًا إزالة المسافة بين حدود خلايا الجدول من خلال الخاصية border-spacing من لغة CSS مع القيمة 0. ومع ذلك ، فإنها تزيل المساحة فقط ولكن لا تقوم بدمج الحدود كما هو الحال عندما نقوم بإستخدام الخاصية border-collapse مع القيمة collapse.

تعديل المساحة داخل الجداول

بشكل افتراضي ، ينشئ متصفح الويب خلايا الجدول كبيرة بما يكفي لاحتواء البيانات في داخلها.
لإضافة مساحة أكبر بين محتويات خلية الجدول وحدود الخلية ، يمكنك ببساطة استخدام الخاصية padding من لغة CSS.

لنجرب المثال التالي ونرى كيفة عملها:

مثال

تشغيل

th, td {
padding : 15px;
}

يمكننا أيضًا ضبط التباعد بين حدود الخلايا باستخدام الخاصية border-spacing من لغة CSS ، إذا كانت حدود الجدول غير مدمجة (بالشكل الافتراضي).

لنجرب المثال التالي ونرى كيفة عملها

مثال

تشغيل

table {
border-spacing : 10px;
}

تحديد عرض وارتفاع الجدول

بشكل افتراضي ، سيتم عرض الجدول بشكل عريض وطويل بما يكفي لاحتواء كافة محتوياته.
ومع ذلك ، يمكنك أيضًا تحديد عرض الجدول وارتفاعه وكذلك خلاياه بشكل صريح باستخدام الخاصية width و الخاصية height من لغة CSS.

في المثال التالي سنقوم بتحديد عرض الجدول ب 100٪ ، وارتفاع الخلايا العنوانية th ب 40 بكسل.

مثال

تشغيل

table {
width : 100%;
}
th {
height : 40px;
}

التحكم في شكل الجدول النهائي

يتوسع الجدول ويتقلص لاستيعاب البيانات الموجودة بداخله. هذا هو السلوك الافتراضي. مع امتلاء البيانات داخل الجدول ، تستمر في التوسع طالما هناك مساحة. ومع ذلك ، في بعض الأحيان ، من الضروري تعيين عرض ثابت للجدول من أجل التحكم في الشكل النهائي للجدول.
يمكنك القيام بذلك بمساعدة الخاصية table-layout من لغة CSS. تحدد هذه الخاصية الخوارزمية التي سيتم استخدامها لعرض الجدول بالشكل النهائي (خلايا الجدول والصفوف والأعمدة). تأخذ هذه الخاصية واحدة من قيمتين:

auto - باستخدام هذه القيمة سيتم تعديل عرض الجدول وخلاياه لتناسب المحتوى. هذه هي القيمة الافتراضية.
fixed - باستخدام هذه القيمة ، لا يعتمد شكل الجدول النهائي على محتوى الخلايا ؛ يعتمد فقط على عرض الجدول وعرض الأعمدة والحدود أو تباعد الخلايا. عند استخدام هذه القيمة عادة ما يكون عرض الجدول داخل المتصفح أسرع من استخدام القيمة auto.

في المثال التالي سنقوم باستخدام القيمة fixed للخاصية table-layout وسنقوم بتحديد عرضه ب 300 بكسل.

مثال

تشغيل

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

نصيحة:

يمكننا تحسين أداء عرض الجدول من خلال تحديد القيمة fixed لخاصية table-layout. تؤدي القيمة fixed لهذه الخاصية إلى عرض تسريع الجدول داخل متصفح الويب وذلك بعرض الصفوف واحد تلو الاخر ، مما يوفر للمستخدمين المعلومات بوتيرة أسرع.

ملاحظة:

بدون استخدام القيمة fixed للخاصية table-layout في الجداول الكبيرة ، لن يرى المستخدمون أي جزء من الجدول حتى يقوم المتصفح بمعالجة الجدول بأكمله.

محاذاة النص داخل خلايا الجدول

يمكنك محاذاة محتوى النص داخل خلايا الجدول إما أفقيًا أو رأسيًا.

المحاذاة الأفقية لمحتويات الخلية

للمحاذاة النص افقيا داخل خلايا الجدول ، يمكنك استخدام الخاصية text-align بنفس الطريقة المستخدمة مع العناصر الأخرى. والقيم لهذه الخاصية هي left و right و center و justify.

في المثال التالي سنقوم بمحاذاة النص داخل عناصر <th> إلى اليسار.

مثال

تشغيل

th {
text-align : left;
}

ملاحظة:

تتم محاذاة النص الموجود داخل عناصر <td> بشكل افتراضي إلى اليسار ، بينما تكون محاذاة النص الموجود داخل عناصر <th> إلى الوسط ويظهر بخط غامق بشكل افتراضي.

المحاذاة الرأسية لمحتويات الخلية

وبالمثل ، يمكننا محاذاة محتوى الخلايا رأسيًا داخل عنصري <th> و <td> بإستخدام القيم top أو bottom أو middle للخاصية vertical-align من لغة CSS. القيمة الافتراضية لهذه الخاصية هي middle .

في المثال التالي سنقوم بمحاذاة النص داخل عناصر <th> رأسيًا إلى الاسفل.

مثال

تشغيل

th {
height : 40px;
vertical-align : bottom;
}

التحكم في موضع عنوان الجدول Table Caption

يمكننا تحديد موضع عنوان الجدول (تسمية الجدول) باستخدام الخاصية caption-side من لغة CSS.
يمكننا وضع عنوان الجدول إما في أعلى أو أسفل الجدول. الموضع الافتراضي هو في الأعلى.

مثال

تشغيل

caption {
caption-side : bottom;
}

نصيحة:

لتغيير المحاذاة الأفقية لنص عنوان الجدول (على سبيل المثال إلى اليسار أو اليمين) ، يمكننا ببساطة استخدام الخاصية text-align من لغة CSS ، كما نتعامل مع النص العادي.

التعامل مع الخلايا الفارغة في الجداول

في الجداول التي لها حدود منفصل (الوضع افتراضي) ، يمكننا أيضًا التحكم في عرض الخلايا التي ليس لها محتوى داخل متصفح الويب باستخدام الخاصية empty-cells .
تقبل هذه الخاصية القيمة show او hide. القيمة الافتراضية لهذه الخاصية هي show ، والتي تعرض الخلايا الفارغة مثل الخلايا العادية ، ولكن إذا تم تحديد القيمة ب hide، فلن يتم رسم حدود أو خلفيات حول الخلايا الفارغة. دعنا نجرب مثالًا لفهم كيفية عمله حقًا:

مثال

تشغيل

table {
border-collapse: separate;
empty-cells: hide;
}

ملاحظة:

إن وضع رمز المسافة   داخل خلية الجدول يجعلها غير فارغة. و حتى لو بدت تلك الخلية فارغة ، فإن القيمة hide لن تخفي الحدود والخلفيات.

إنشاء جداول مخططة

يعد تحديد ألوان خلفية مختلفة للصفوف المتعاقبة أسلوبًا شائعًا لتحسين إمكانية قراءة الجداول التي تحتوي على كمية كبيرة من البيانات.
يمكننا ببساطة تحقيق هذا التأثير باستخدام المحدد :nth-child() من نوع المحددات pseudo-class.

في المثال التالي سنقوم بإبراز كل الصفوف الفردية داخل الجدول .

مثال

تشغيل

tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}

عادةً ما يشبه الجدول المخطط في المثال السابق الصورة التالية.

جعل الجداول متجاوبة للعرض على اجهزة مختلفة

الجداول وبشكل افتراضي لا تكون متجاوبة للعرض على اجهزة مختلفة. ولدعم الأجهزة المحمولة ، يمكننا إضافة التجاوب لجداولك من خلال اضافة خاصية التمرير الأفقي على الشاشات الصغيرة. وللقيام بذلك سنقوم بإحاطة عنصر الجدول بعنصر <div> وتطبيق النمط overflow-x: auto عليه كما هو مبين في المثال التالي:

مثال

تشغيل

<div style="overflow-x:auto;>
<table>
... table content ...
</table>
</div>