جداول HTML

انشاء جدول HTML

يتم تعريف جدول HTML بالعلامة او الوسم <table>

يتم تعريف كل صف جدول بالعلامة او الوسم<tr>  يتم تعريف رأس الجدول بالعلامة او الوسم<th>  تبعًا للإعدادات الافتراضية ، تكون عناوين الجدول غامقة ومركزة. يتم تعريف جدول  خلية الجدول بالعلامة <td>

<table>
  <tr>
    <th>العنوان</th>
    <th>الوصف</th> 
  </tr>
  <tr>
    <td> مقدمة عن لغة Html</td>
    <td> HTML هي لغة الترميز القياسية لإنشاء صفحات الويب</td> 
  </tr>
  <tr>
    <td> صور HTML</td> 
    <td> كيفية ادراج الصور في صفحة html لتحسين تصميم ومظهر صفحة الويب</td>
 </tr>
</table>

ملاحظة : العناصر  <td> هي حاويات البيانات في الجدول يمكن أن تحتوي على جميع أنواع عناصر HTML  النص والصور والقوائم والجداول الأخرى ، إلخ.

الخلايا التي تحتوي العديد من الأعمدة

لجعل امتداد الخلية أكثر من عمود واحد استخدم سمة  colspan

<table>
  <tr>
    <th>الاسم</th>
    <th colspan="2">الهواتف</th>
  </tr>
  <tr>
    <td>عدلي</td>
    <td>0910000000</td>
    <td>0920000000</td>
  </tr>
</table>

الخلايا التي تحتوي العديد من الصفوف

لجعل امتداد الخلية أكثر من صف واحد استخدم سمة  rowspan

<table>
  <tr>
    <th>الاسم:</th>
    <td>عدلي</td>
  </tr>
  <tr>
    <th rowspan="2">الهواتف:</th>
    <td>0910000000</td>
  </tr>
  <tr>
    <td>0920000000</td>
  </tr>
</table>

إضافة تعليق

لإضافة تسمية توضيحية إلى جدول استخدم العلامة او الوسم <caption>

<table>
  <caption>المدخرات الشهرية</caption>
  <tr>
    <th>الشهر</th>
    <th>المدخر</th>
  </tr>
  <tr>
    <td>يناير</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>فبراير</td>
    <td>$50</td>
  </tr>
</table>

ملاحظة: يجب إدراج العلامة او الوسم <caption>  مباشرةً بعد العلامة او الوسم <table>