CSSالجداول

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

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

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

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

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

table {
    border: 1px solid;
}

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

th, td {
    border: 1px solid;
}

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

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

دمج حدود الجدول

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

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

table {
    border-collapse: collapse;
}

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

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

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

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

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>

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

إفتراضياً، محتوى الوسم <th> يظهر في الوسط و بخط عريض، في حين أن محتوى الوسم <td> فيظهر من الناحية اليسرى و بخط متوسط الحجم.

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

table {
    width: 100%;
    height: 200px;
}

th, td {
    text-align: left;
    vertical-align: top;
}

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

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

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

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

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

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

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

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

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

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

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;
}

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

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> 

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

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

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

table {
    caption-side: bottom;
}

caption {
    margin-top: 7px;
}