9 الفصل الرابع: الجداول والنماذج

تمام! هنتعلم في الفصل الرابع عن الجداول والنماذج في HTML، وهنبدأ أولًا مع الجداول ووسم <table> والخصائص المرتبطة بيه، بالإضافة لاستخدام <thead> و**<tbody>** و**<tfoot>**.

الفصل الرابع: الجداول والنماذج

1. الجداول

الجداول هي أحد العناصر المهمة في HTML لتنسيق البيانات وعرضها في شكل منظم. يُستخدم وسم <table> لإنشاء الجداول، ويحتوي الجدول على صفوف وأعمدة لعرض البيانات.

1.1. وسم <table> وخصائصه

الوسم <table> يُستخدم لإنشاء الجدول في HTML. لكن الجدول لا يحتوي فقط على الوسم <table>، بل يتضمن مجموعة من العناصر التي تحدد هيكل الجدول.

الخصائص الرئيسية لوسم <table>:

• border: يحدد سمك حدود الجدول.
• cellspacing: يُحدد المسافة بين الخلايا داخل الجدول.
• cellpadding: يُحدد المسافة بين محتويات الخلايا وحدودها.

مثال لإنشاء جدول:

<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
    <th>المدينة</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
    <td>القاهرة</td>
  </tr>
  <tr>
    <td>مريم</td>
    <td>22</td>
    <td>الإسكندرية</td>
  </tr>
</table>

• <tr>: يُستخدم لتعريف صف الجدول.
• <th>: يُستخدم لتعريف خلية رأسية في الجدول (عادةً ما يكون النص فيها غامقًا ومركزيًا).
• <td>: يُستخدم لتعريف خلية بيانات داخل الجدول.

في المثال ده، عندنا جدول يحتوي على 3 أعمدة (الاسم، العمر، المدينة) وصفين من البيانات.

1.2. استخدام <thead> و<tbody> و<tfoot>

لتنظيم الجدول بشكل أفضل، يمكن استخدام <thead> و**<tbody>** و**<tfoot>**. هذه العناصر تساعد في تحسين هيكل الجدول ووضوحه، خاصة عند التعامل مع جداول كبيرة.

<thead>:

• يُستخدم لتحديد رأس الجدول. يحتوي على <tr> و**<th>** لتعريف العناوين.

<tbody>:

• يُستخدم لتحديد الجسم الرئيسي للجدول، والذي يحتوي على بيانات الجدول.

<tfoot>:

• يُستخدم لتحديد ذيل الجدول. يُستخدم عادةً لعرض المجموعات أو الملاحظات التي تتعلق بالجدول.

مثال لاستخدام <thead> و<tbody> و<tfoot>:

<table border="1" cellspacing="0" cellpadding="10">
  <thead>
    <tr>
      <th>الاسم</th>
      <th>العمر</th>
      <th>المدينة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد</td>
      <td>25</td>
      <td>القاهرة</td>
    </tr>
    <tr>
      <td>مريم</td>
      <td>22</td>
      <td>الإسكندرية</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">تم التحديث في ديسمبر 2024</td>
    </tr>
  </tfoot>
</table>

في هذا المثال:

• <thead> يحتوي على رأس الجدول الذي يتضمن العناوين.
• <tbody> يحتوي على بيانات الجدول.
• <tfoot> يحتوي على ملاحظة في أسفل الجدول تُظهر وقت التحديث.

1.3. تنسيق الجدول باستخدام CSS

يمكنك تنسيق الجدول باستخدام CSS لجعل المظهر أفضل وأكثر احترافية.

مثال لتنسيق الجدول باستخدام CSS:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <thead>
    <tr>
      <th>الاسم</th>
      <th>العمر</th>
      <th>المدينة</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>أحمد</td>
      <td>25</td>
      <td>القاهرة</td>
    </tr>
    <tr>
      <td>مريم</td>
      <td>22</td>
      <td>الإسكندرية</td>
    </tr>
  </tbody>
</table>

• border-collapse: collapse;: يتم دمج الحدود بين الخلايا.
• nth-child(even): يقوم بتغيير لون خلفية الصفوف الزوجية.

ملخص الفصل الرابع – الجزء الأول: الجداول

• وسم <table>: يُستخدم لإنشاء الجداول في HTML.
• الخصائص:
  • border: لتحديد حدود الجدول.
  • cellspacing و cellpadding: لتحديد المسافات بين الخلايا.
• استخدام العناصر:
  • <thead>: لتحديد رأس الجدول.
  • <tbody>: لتحديد جسم الجدول.
  • <tfoot>: لتحديد ذيل الجدول.
• تنسيق الجدول باستخدام CSS: لتحسين مظهر الجدول.

ممكن دلوقتي تبدأ تطبق كل دي الأفكار في تصميم الجداول الخاصة بيك. لو عاوز تكمل في الفصل ده أو عندك أي أسئلة، أنا هنا علشان أساعدك! 😊