جدول HTML

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


  1. <table>
  2. <thead>
  3. <th>
  4. <tbody>
  5. <tr>
  6. <td>
  7. <tfoot>
  8. <caption>
  9. <colgroup>
  10. <col>


جدول بسيط


<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>


يمثل هذا العنصر الحاوية للجدول بحيث تكون بداخله باقي العناصر الأخرى الخاصة بالجدول ، علامة الفتح والإغلاق لهذا العنصر مطلوبة


<table>

</table>


هذا العنصر يمثل رأس الجدول ويكون داخل عنصر <table> مباشرة


<table>
   <thead>
   </thead>
</table>


هذا العنصر يمثل صف من الجدول يمكن أن يتم إضافته داخل <thead> ، وأيضا يتم إضافته داخل عنصر <tbody> مباشرة


<table>
   <thead>
      <tr>
      </tr>
   </thead>
</table>

هذا العنصر يمثل خلية لعنوان عمود من الجدول ويتم إضافته داخل عنصر <tr> الموجود داخل العنصر <thead>


<table>
   <thead>
      <tr>
         <th>الدولة</th>
         <th>العملة</th>
         <th>القارة</th>
      </tr>
   </thead>
</table>

الدولة العملة القارة




هذا النصر يمثل جسم الجدول والذي يحتوى على مجموعة من الصفوف باستخدام العنصر <tr> والأعمدة اي الخلايا باستخدام العنصر <td>


<table>
   <thead>
      <tr>
         <th>الدولة</th>
         <th>العملة</th>
         <th>القارة</th>
      </tr>
   </thead>

   <tbody>
   </tbody>
</table>




هذا العنصر يمثل خلية واحدة من الجدول ويمكن تكرار هذا العنصر كما تريد ويكون هذا العنصر بداخل عنصر <tr>


<table>
   <thead>
      <tr>
         <th>الدولة</th>
         <th>العملة</th>
         <th>القارة</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>مصر</td>
         <td>الجنيه</td>
         <td>إفريقيا</td>
      </tr>
   </tbody>
</table>

الدولة العملة القارة
مصر الجنيه إفريقيا




<table border="1">
   <thead>
      <tr>
         <th>الدولة</th>
         <th>العملة</th>
         <th>القارة</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>مصر</td>
         <td>الجنيه المصري</td>
         <td>إفريقيا</td>
      </tr>
      <tr>
         <td>تونس</td>
         <td>دينار تونسي</td>
         <td>إفريقيا</td>
      </tr>
      <tr>
         <td>الجزائر</td>
         <td>دينار جزائري</td>
         <td>إفريقيا</td>
      </tr>
      <tr>
         <td>السعودية</td>
         <td>ريال سعودي</td>
         <td>آسيا</td>
      </tr>
      <tr>
         <td>الكويت</td>
         <td>دينار كويتي</td>
         <td>آسيا</td>
      </tr>
      <tr>
         <td>الولايات المتحدة</td>
         <td>دولار أمريكي</td>
         <td>أمريكا الشمالية</td>
      </tr>
      <tr>
         <td>المملكة المتحدة</td>
         <td>جنيه إسترليني</td>
         <td>أوروبا</td>
      </tr>
   </tbody>
</table>

الدولة العملة القارة
مصر الجنيه المصري إفريقيا
تونس دينار تونسي إفريقيا
الجزائر دينار جزائري إفريقيا
السعودية ريال سعودي آسيا
الكويت دينار كويتي آسيا
الولايات المتحدة دولار أمريكي أمريكا الشمالية
المملكة المتحدة جنيه إسترليني أوروبا


هذا العنصر يمثل تذييل الجدول أو ملخص لجدول البيانات مثلا العدد أو الحساب الإجمالي

هذا العنصر يمثل تسمية توضيحية أو عنوان رئيسي للجدول ويتم إضافته داخل عنصر <table> مباشرة

يستخدم هذا العنصر مجموعة من الأعمدة داخل الجدول وغالبا يتم استخدامه لتعيين خلفية مخصصة لعمود كامل داخل الجدول باستخدام العنصر <col>
عنصر <colgroup> هو عنصر فارغ

يستخدم هذا العنصر لتعيين خلفية مخصصة لعمود كامل داخل الجدول أو عدة أعمدة ويتم إضافة هذا العنصر بعد عنصر <colgroup> مباشرة
يجب إضافة السمة span ضمن العنصر <col> وتحديد القيمة رقمية كعدد صحيح مثل <col span="1"> فهذا الكود يدل على تحديد عمود واحد فإذا تم تغيير الرقم لـ 2 فهذا يدل على تحديد عمودين متجاورين