❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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%; }
جرب الكود

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

المثال الثاني

<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>
<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; }
جرب الكود

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

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


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

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

مثال

th, td {
padding: 10px;
text-align: left;
}
th, td { padding: 10px; text-align: left; }
جرب الكود

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

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

مثال

th, td {
border-bottom: 1px solid #ddd;
}
th, td { border-bottom: 1px solid #ddd; }
جرب الكود

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

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

مثال

tr:hover {
background-color: beige;
}
tr:hover { background-color: beige; }
جرب الكود

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

  • الأسطر التي يكون ترتيبها في الجدول فردي مثل (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 ) حيث أنه يظهر شريط تمرير إذا كان حجم الشاشة أصغر منه.

مثال

<div style="overflow-x:auto;">
<table>
...
...
</table>
</div>
<div style="overflow-x:auto;"> <table> ... ... </table> </div>
جرب الكود

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

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

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

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

مثال

table {
caption-side: bottom;
}
caption {
margin-top: 7px;
}
table { caption-side: bottom; } caption { margin-top: 7px; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق