جداول HTML

الجدول هو مجموعة من الخلايا الصغيرة، وتكون هذه الخلايا مرتبة بشكل منظمناً، ولديها العديد من الصفوف والعناصر. هذا التخطيط الذي يتم إنشاؤه من الصفوف والعناصر، يُدعى جدولاً، والجدول يتم تعريفه باستخدام علامة table.

مثال جدول HTML:

مثال على الإنترنت

جداول HTML
هذا المثال يوضح كيفية إنشاء جدول في مستند HTML.

<table　border="1"　width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

جداول HTML

يتم تعريف الجدول باستخدام علامة <table>. لكل جدول عدة صفوف (تعريفها علامة <tr>)، وكل صف يتم تقسيمه إلى عدة خلايا (تعريفها علامة <td>). تشير حرف td إلى بيانات الجدول (table data)، وهي محتويات خلية البيانات. يمكن أن تحتوي خلية البيانات على نص، صورة، قائمة، جملة، نموذج، خط أفقي، جدول، وما إلى ذلك.

مثال جدول

<table border="1">
　　　　<tr>
　　　　　　　　<td>السطر 1،العمود 1</td>
　　　　　　　　<td>السطر 1،العمود 2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>السطر 2،العمود 1</td>
　　　　　　　　<td>السطر 2،العمود 2</td>
　　　　</tr>
</table>

يظهر في المتصفح كالتالي:

جدول HTML والحواف

إذا لم يتم تعريف خاصية الحواف، لن يتم عرض حواف الجدول. قد يكون ذلك مفيدًا أحيانًا، ولكن في معظم الأحيان نريد عرض الحواف.

استخدم خاصية الحواف لعرض جدول يحتوي على حواف:

<table border="1">
　　　　<tr>
　　　　　　　　<td>السطر 1،العمود 1</td>
　　　　　　　　<td>السطر 1،العمود 2</td>
　　　　</tr>
</table>

عناوين جدول HTML

يتم تعريف عناوين الجدول باستخدام علامة <th>.

سيقوم معظم المتصفحات بعرض العناوين كنص سميك مركز:

<table border="1">
　　　　<tr>
　　　　　　　　<th>عنوان أول</th>
　　　　　　　　<th>عنوان ثاني</th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>السطر 1،العمود 1</td>
　　　　　　　　<td>السطر 1،العمود 2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>السطر 2،العمود 1</td>
　　　　　　　　<td>السطر 2،العمود 2</td>
　　　　</tr>
</table>

يظهر في المتصفح كالتالي:

المزيد من الأمثلة

جدول بدون حواف
هذا المثال يظهر جدول بدون حواف.

رأس الجدول في الجدول
هذا المثال يظهر كيفية عرض رأس الجدول.

جدول يحتوي على عنوان
هذا المثال يظهر جدول يحتوي على عنوان (caption).

خلية جدول متعددة السطور أو الأعمدة
هذا المثال يظهر كيفية تعريف خلايا جدول متعددة السطور أو الأعمدة.

العلامات داخل الجدول
هذا المثال يظهر كيفية عرض العناصر داخل عناصر مختلفة.

هوامش الخلية (Cell padding)
هذا المثال يظهر كيفية استخدام Cell padding لإنشاء مساحة فارغة بين محتوى الخلية والهوامش.

مسافة الخلية (Cell spacing)
هذا المثال يظهر كيفية استخدام Cell spacing لزيادة المسافة بين الخلايا.

أعلام جدول HTML