albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

تصميم الجداول (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

 

لجعل الجدول متجاوب مع جميع الأحجام:

  1. أضف عنصر كحاوية (مثل <div>) للجدول.
  2. إضافة خاصية 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

شكرًا لك على مساعدتك لنا!

Advertisements