الكورس

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