CSSالجداول

خصائص الجداول
تحسين تصميم حدود الجدول
تحديد حجم الجدول
تحديد إتجاه و محاذات محتوى الجدول
تحسين تصميم الجدول
تصميم جدول متجاوب
تحديد مكان ظهور وصف الجدول

خصائص الجداول

بواسطة خصائص CSS يمكنك إظهار الجداول بشكل رائع حيث تستطيع ضبط شكل الحدود، تلوين الأسطر، تنسيق العناوين بشكل مختلف عن المعلومات العادية، بالإضافة إلى جعل الجداول متجاوبة ( Responsive ) حتى تظهر بشكل جميل على مختلف أحجام الشاشات بما فيها شاشة الهاتف.

User	Score	Country
Mhamad Harmush	545	Lebanon
Hala Hassan	480	Egypt
Aqlaa Al Rasheedy	425	KSA
Fadi al Aswadi	710	Yaman
Saad al Dabi	522	Yaman
Moncef Gaha	456	Algeria

تحسين تصميم حدود الجدول

إفتراضياً الجدول لا يظهر أي حدود و لكنك تستطيع إظهار حدوده بواسطة الخاصية border بالشكل الذي تريده.

في المثال التالي قمنا بإظهار الحدود الخارجية للجدول.

مثال

table {

border: 1px solid;

}

table { border: 1px solid; }

جرب الكود

في المثال التالي قمنا بإظهار حدود خلايا الجدول فقط.

مثال

th, td {

border: 1px solid;

}

th, td { border: 1px solid; }

جرب الكود

في المثال التالي قمنا بإظهار الحدود الخارجية للجدول و حدود الخلايا الموجودة فيه.

مثال

table, th, td {

border: 1px solid;

}

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

جرب الكود

دمج الحدود

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

لدمج حدود الخلايات المتقابلة و حدود الجدول نضيف الخاصية border-collapse: collapse; للجدول فقط.

مثال

table {

border-collapse: collapse;

}

table, th, td {

border: 1px solid;

}

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

جرب الكود

تحديد حجم الجدول

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

في المثال التالي جعلنا الجدول يظهر على كامل عرض الصفحة.

مثال

table {

width: 100%;

}

table { width: 100%; }

جرب الكود

إذا أردت تحديد حجم عمود في الجدول، قم بتحديد حجم خلية واحدة فيه و سيتم تحديد حجم الخلايا الموضوعة تحتها بشكل تلقائي.

مثال

<tr>

<th style="width:30%">Country</th>

<tr>

<td>Mhamad</td>

<td>Harmush</td>

<tr>

<td>Hassan</td>

<tr>

</table>

<table style="width:100%"> <tr> <th style="width:70%">User</th> <th style="width:30%">Country</th> <tr> <tr> <td>Mhamad</td> <td>Harmush</td> <tr> <tr> <td>Hala</td> <td>Hassan</td> <tr> </table>

جرب الكود

تحديد إتجاه و محاذات محتوى الجدول

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

في المثال التالي جعلنا محتوى جميع الخلايا يظهر من الناحية اليسرى و في الأعلى عمودياً.

مثال

table {

width: 100%;

height: 200px;

}

th, td {

text-align: left;

vertical-align: top;

}

table { width: 100%; height: 200px; } th, td { text-align: left; vertical-align: top; }

جرب الكود

تحسين تصميم الجدول

إضافة هامش داخلي

في المثال التالي قمنا بإضافة هامش داخلي حول الخلايات حتى لا تظهر بشكل ملاصق للحدود.

مثال

th, td {

padding: 10px;

text-align: left;

}

th, td { padding: 10px; text-align: left; }

جرب الكود

إظهار حدود الأسطر

في المثال التالي قمنا بإظهار الحدود السفلية للخلايا فقط.

مثال

th, td {

border-bottom: 1px solid #ddd;

}

th, td { border-bottom: 1px solid #ddd; }

جرب الكود

إضافة مؤثرات للأسطر

في المثال التالي قمنا بإظهار لون خلفية السطر الذي يتم تمرير مؤشر الماوس فوقه بشكل مختلف.

مثال

tr:hover {

background-color: beige;

}

tr:hover { background-color: beige; }

جرب الكود

تلوين خلفية الأسطر الفردية و الزوجية

الأسطر الفردية التي يكون ترتيبها في الجدول 1 - 3 - 5 إلخ.. يمكن تحديدها هكذا tr:nth-child(odd) أو هكذا tr:nth-child(2n+1).

الأسطر الزوجية التي يكون ترتيبها في الجدول 2 - 4 - 6 إلخ.. يمكن تحديدها هكذا tr:nth-child(even) أو هكذا tr:nth-child(2n).

في المثال التالي قمنا بتلوين خلفية الأسطر ذات الترتيب الزوجي بلون رمادي باهت.

مثال

tr:nth-child(even) {

background-color: #f1f1f1;

}

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

جرب الكود

في المثال التالي قمنا بتلوين خلفية الأسطر ذات الترتيب الفردي و كذلك قمنا بتلوين نص و خلفية العناوين بلون مميز.

مثال

th {

color: white;

background-color: #0d6efd;

}

tr:nth-child(even) {

background-color: #f1f1f1;

}

th { color: white; background-color: #0d6efd; } tr:nth-child(even) { background-color: #f1f1f1; }

جرب الكود

تصميم جدول متجاوب

لبناء جدول يظهر بشكل مناسب مهما كان حجم شاشة المستخدم يمكنك وضع الجدول بداخل وسم <div style="overflow-x"></div> و هكذا سيظهر شريط تمرير أسفل العنصر يسمح للمستخدم برؤية المحتوى الغير ظاهر من الجدول بدون أن يتسبب ذلك في تشويه تصميم الصفحة أو إزعاج المستخدم.

في المثال التالي قمنا ببناء جدول متجاوب الحجم ( Responsive Table ).

مثال

<table>

...

</table>

</div>

جرب الكود

تحديد مكان ظهور وصف الجدول

في حال أردت إضافة وصف للجدول بواسطة الوسم <caption> فإنه يظهر إفتراضياً فوق الجدول و لكنك تستطيع تحديد موقعه من خلال تمرير الخاصية caption-side و تمرير إحدى القيم التالية لها.

القيمة	معناها
top	لجعل وصف الجدول يظهر فوقه مباشرةً، و هذه القيمة الإفتراضية.
bottom	لجعل وصف الجدول يظهر تحته مباشرةً.

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

مثال

table {

caption-side: bottom;

}

caption {

margin-top: 7px;

}

table { caption-side: bottom; } caption { margin-top: 7px; }

جرب الكود

الدرس التالي❯ ❮الدرس السابق

CSSالجداول

خصائص الجداول

تحسين تصميم حدود الجدول

مثال

مثال

مثال

دمج الحدود

مثال

تحديد حجم الجدول

مثال

مثال

تحديد إتجاه و محاذات محتوى الجدول

مثال

تحسين تصميم الجدول

إضافة هامش داخلي

مثال

إظهار حدود الأسطر

مثال

إضافة مؤثرات للأسطر

مثال

تلوين خلفية الأسطر الفردية و الزوجية

مثال

مثال

تصميم جدول متجاوب

مثال

تحديد مكان ظهور وصف الجدول

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث