جداول 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>
العنوان الوصف
مقدمة عن لغة Html HTML هي لغة الترميز القياسية لإنشاء صفحات الويب
صور HTML كيفية ادراج الصور في صفحة html لتحسين تصميم ومظهر صفحة الويب

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


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

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

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

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

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

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

 


إضافة تعليق

لإضافة تسمية توضيحية إلى جدول استخدم العلامة او الوسم <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>
المدخرات الشهرية
الشهر المدخر
يناير $100
فبراير $50

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

 

دروس لغة Html اخرى