تصميم الجداول (tables) فى CSS
سيعلمك هذا الفصل كيفية تصميم الجداول (tables) فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.
تصميم الجداول فى CSS
1. حدود الجدول – Table Borders
لتحديد حدود الجدول في CSS ، نستخدم خاصية border. كالتالى:
<style> table, tr, th, td { border: 1px solid #f00; } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>30</td> </tr> <tr> <td>Essam</td> <td>Male</td> <td>40</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Mohamed | Male | 30 |
Essam | Male | 40 |
يحدد المثال السابق حدًا أحمر لعناصر <table> و <th> و <td> و <tr>.
2. تصغير حدود الجدول – Collapse Table Borders
تحدد خاصية border-collapse ما إذا كان يجب طَي حدود الجدول إلى حد واحد، كالتالى:
<style> table { border-collapse: collapse; } table, tr, th, td { border: 1px solid #f00; } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>30</td> </tr> <tr> <td>Essam</td> <td>Male</td> <td>40</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Mohamed | Male | 30 |
Essam | Male | 40 |
3. المحاذاة الأفقية – Horizontal Alignment
تقوم خاصية text-align بتعيين المحاذاة الأفقية للمحتوى الخاص بالجدول.
بشكل افتراضي ، يتم محاذاة محتوى عناصر <th> إلى الوسط ومحاذاة محتوى عناصر <td> إلى اليسار.
مثال للتوضيح:
<style> table { border-collapse: collapse; } tr, th, td { border: 1px solid #f00; } tr { text-align: center; } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>30</td> </tr> <tr> <td>Essam</td> <td>Male</td> <td>40</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Mohamed | Male | 30 |
Essam | Male | 40 |
4. المحاذاة الرأسية – Vertical Alignment
تقوم خاصية vertical-align بتعيين المحاذاة الرأسية لمحتوى الجدول.
بشكل افتراضي ، تكون المحاذاة الرأسية للمحتوى في الجدول في المنتصف (لكل من عنصري <th> و <td>).
مثال للتوضيح:
<style> table { border-collapse: collapse; } tr, th, td { border: 1px solid #f00; } td { height: 50px; vertical-align: bottom; } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>30</td> </tr> <tr> <td>Essam</td> <td>Male</td> <td>40</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Mohamed | Male | 30 |
Essam | Male | 40 |
5. تغيير لون خلفية الصفوف عند تمرير الماوس فوقه – Hoverable Table
استخدم محدد الـ hover لـ <tr> لتمييز صفوف الجدول عند تمرير الماوس فوقه، كالتالى:
<style> table { border-collapse: collapse; width: 100%; } tr, th, td { border: 1px solid #f00; } tr:hover { background-color: rgb(194, 185, 185); } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>30</td> </tr> <tr> <td>Essam</td> <td>Male</td> <td>40</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Mohamed | Male | 30 |
Essam | Male | 40 |
6. المسافة الداخلية للجدول – Table Padding
للتحكم في المسافة بين الحد (border) والمحتوى (content) في الجدول، استخدم خاصية padding على عناصر <td> و <th>، كالتالى:
<style> table { border-collapse: collapse; width: 100%; } tr, th, td { border: 1px solid #f00; } th, td { padding: 10px; text-align: center; } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>30</td> </tr> <tr> <td>Essam</td> <td>Male</td> <td>40</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Mohamed | Male | 30 |
Essam | Male | 40 |
7. الجداول المخططة – Striped Tables
بالنسبة للجداول المخططة ، استخدم المحدد ()nth-child وأضف لون الخلفية إلى جميع صفوف الجدول (أو الفردية)، كالتالى:
<style> table { border-collapse: collapse; width: 100%; } tr, th, td { border: 1px solid #f00; } tr:nth-child(even) { background-color: rgb(194, 185, 185); } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>30</td> </tr> <tr> <td>Essam</td> <td>Male</td> <td>40</td> </tr> <tr> <td>Noor</td> <td>Female</td> <td>20</td> </tr> <tr> <td>Mona</td> <td>Female</td> <td>50</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Mohamed | Male | 30 |
Essam | Male | 40 |
Noor | Female | 20 |
Mona | Female | 50 |
8. لون وخلفية الجدول – Table Color & background
يمكنك إستحدام خاصية color لتحديد لون النص فى الجدول، وخاصية background-color لتحديد لون خلفية الجدول.
يحدد المثال التالى لون الخلفية والنص لعناصر <th>:
<style> table { border-collapse: collapse; width: 100%; } tr, th, td { border: 1px solid blue; text-align: center; } th { background-color: blue; color: white; } </style> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> </tr> <tr> <td>Noor</td> <td>Female</td> <td>20</td> </tr> <tr> <td>Mona</td> <td>Female</td> <td>50</td> </tr> </table>
Name | Gender | Age |
---|---|---|
Noor | Female | 20 |
Mona | Female | 50 |
9. الجداول المتجاوبة – Responsive Tables
لجعل الجدول متجاوب مع جميع الأحجام:
- أضف عنصر كحاوية (مثل <div>) للجدول.
- إضافة خاصية overflow-x بقيمة auto لعنصر div لجعله متجاوب.
سيعرض الجدول المتجاوب شريط تمرير أفقيًا إذا كانت الشاشة صغيرة جدًا لعرض المحتوى الكامل.
مثال للتوضيح:
<style> .container { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } tr, th, td { border: 1px solid blue; text-align: center; } th { background-color: blue; color: white; } </style> <div class="container"> <table> <tr> <th>Name</th> <th>Gender</th> <th>Age</th> <th>Favorite Color</th> </tr> <tr> <td>Noor</td> <td>Female</td> <td>20</td> <td>Black</td> </tr> <tr> <td>Mona</td> <td>Female</td> <td>50</td> <td>Pink</td> </tr> <tr> <td>Ibrahim</td> <td>Male</td> <td>34</td> <td>Red</td> </tr> <tr> <td>Mohamed</td> <td>Male</td> <td>60</td> <td>White</td> </tr> </table> </div>
Name | Gender | Age | Favorite Color |
---|---|---|---|
Noor | Female | 20 | Black |
Mona | Female | 50 | Pink |
Ibrahim | Male | 34 | Red |
Mohamed | Male | 60 | White |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!