تصميم جداول HTML باستخدام CSS

دليل موجز للعمل مع الجداول في CSS

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

اليوم مع Grid و Flexbox يمكننا إعادة الجداول إلى الوظيفة التي كان من المفترض القيام بها: جداول التصميم.

لنبدأ من HTML. هذا جدول أساسي:

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Flavio</th>
      <td>36</td>
    </tr>
    <tr>
      <th scope="row">Roger</th>
      <td>7</td>
    </tr>
  </tbody>
</table>

بشكل افتراضي ليست جذابة للغاية. يوفر المتصفح بعض الأنماط القياسية ، وهذا كل شيء:

يمكننا استخدام CSS لتصميم جميع عناصر الجدول ، بالطبع.

لنبدأ بالحدود. يمكن للحدود الجميلة أن تقطع شوطًا طويلاً.

يمكننا تطبيقه علىtableالعنصر ، وعلى العناصر الداخلية أيضًا ، مثلthوtd:

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

إذا قمنا بإقرانها ببعض الهامش ، نحصل على نتيجة جيدة

أحد الأشياء الشائعة مع الجداول هو القدرة على إضافة لون إلى صف واحد ولون مختلف إلى صف آخر. هذا ممكن باستخدام:nth-child(odd)أو:nth-child(even)المحدد:

tbody tr:nth-child(odd) {
  background-color: #af47ff;
}

هذا يعطينا:

اذا اضفتborder-collapse: collapse;بالنسبة لعنصر الجدول ، يتم طي كل الحدود في واحد:

تحميل مجانيكتيب CSS


المزيد من دروس css: