نماذج متعددة للجداول في HTML

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

1. جدول بسيط مع رأس وتنسيق أساسي:

<table border="1">

  <tr>

    <th>الاسم</th>

    <th>العمر</th>

    <th>المدينة</th>

  </tr>

  <tr>

    <td>محمد</td>

    <td>25</td>

    <td>الجزائر</td>

  </tr>

  <tr>

    <td>أحمد</td>

    <td>30</td>

    <td>وهران</td>

  </tr>

  <tr>

    <td>سارة</td>

    <td>28</td>

    <td>تلمسان</td>

  </tr>

</table>

2. جدول بتنسيق CSS مع خلفيات وألوان مختلفة:

<style>

  table {

    width: 80%;

    border-collapse: collapse;

    margin: 25px 0;

    font-size: 18px;

    text-align: center;

  }

  th, td {

    padding: 10px;

    border: 1px solid #ddd;

  }

  th {

    background-color: #4CAF50;

    color: white;

  }

  tr:nth-child(even) {

    background-color: #f2f2f2;

  }

</style>

<table>

  <tr>

    <th>الاسم</th>

    <th>العمر</th>

    <th>المدينة</th>

  </tr>

  <tr>

    <td>محمد</td>

    <td>25</td>

    <td>الجزائر</td>

  </tr>

  <tr>

    <td>أحمد</td>

    <td>30</td>

    <td>وهران</td>

  </tr>

  <tr>

    <td>سارة</td>

    <td>28</td>

    <td>تلمسان</td>

  </tr>

</table>

3. جدول مع صفوف قابلة للتوسيع (التمرير):

<style>

  table {

    width: 100%;

    border-collapse: collapse;

  }

  th, td {

    padding: 10px;

    border: 1px solid #ddd;

    text-align: center;

  }

  th {

    background-color: #333;

    color: white;

  }

  .scrollable-table {

    height: 200px;

    overflow-y: scroll;

    display: block;

  }

</style>

<div class="scrollable-table">

  <table>

    <tr>

      <th>الاسم</th>

      <th>العمر</th>

      <th>المدينة</th>

    </tr>

    <tr>

      <td>محمد</td>

      <td>25</td>

      <td>الجزائر</td>

    </tr>

    <tr>

      <td>أحمد</td>

      <td>30</td>

      <td>وهران</td>

    </tr>

    <tr>

      <td>سارة</td>

      <td>28</td>

      <td>تلمسان</td>

    </tr>

    <tr>

      <td>يوسف</td>

      <td>35</td>

      <td>قسنطينة</td>

    </tr>

    <tr>

      <td>نادية</td>

      <td>40</td>

      <td>عين الدفلى</td>

    </tr>

    <tr>

      <td>خالد</td>

      <td>32</td>

      <td>سطيف</td>

    </tr>

  </table>

</div>