جداول HTML

يمكنك إنشاء جداول باستخدام HTML.

مثال

الجدول
يوضح هذا المثال كيفية إنشاء جداول في مستندات 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>

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

السطر 1، الخلية 1 السطر 1، الخلية 2
السطر 2، الخلية 1 السطر 2، الخلية 2

جدول والخصائص الحافات

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

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

<table border="1">
<tr>
<td>السطر 1، الخلية 1</td>
<td>السطر 1، الخلية 2</td>
</tr>
</table>

عناوين الجدول

يتم تعريف عناوين الجدول باستخدام وسم <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>

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

عنوان عنوان آخر
السطر 1، الخلية 1 السطر 1، الخلية 2
السطر 2، الخلية 1 السطر 2، الخلية 2

الخلية الفارغة في الجدول

في بعض المتصفحات، قد لا يظهر خلية بدون محتوى بشكل جيد. إذا كانت خلية فارغة (بدون محتوى)، قد لا يتمكن المتصفح من عرض حافة هذه الخلية.

<table border="1">
<tr>
<td>السطر 1، الخلية 1</td>
<td>السطر 1، الخلية 2</td>
</tr>
<tr>
<td></td>
<td>السطر 2، الخلية 2</td>
</tr>
</table>

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

الخلية الفارغة في الجدول

ملاحظة:لم يكن الحافات الموجودة في هذه الخلية空的显示出来。لمنع هذا النوع من الحالات، يمكن إضافة وسم مساحة فارغة كمدخل في الخلايا الفارغة لعرض الحافات.

<table border="1">
<tr>
<td>السطر 1، الخلية 1</td>
<td>السطر 1، الخلية 2</td>
</tr>
<tr>
<td> </td>
<td>السطر 2، الخلية 2</td>
</tr>
</table>

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

السطر 1، الخلية 1 السطر 1، الخلية 2
　 السطر 2، الخلية 2

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

جداول بدون حواف
هذا المثال يوضح جدول بدون حواف.
رأس الجدول في الجدول
هذا المثال يوضح كيفية عرض رأس الجدول في الجدول.
خلية فارغة
هذا المثال يوضح كيفية معالجة خلايا الجدول التي لا تحتوي على محتوى باستخدام " ".
جدول يحتوي على عنوان
هذا المثال يوضح جدول يحتوي على عنوان (caption).
خلية جدول متعددة السطور أو الأعمدة
هذا المثال يوضح كيفية تعريف خلايا الجدول المتعددة السطور أو الأعمدة.
العلامات داخل الجدول
هذا المثال يوضح كيفية عرض العناصر داخل عناصر مختلفة.
مسافة الخلية (Cell padding)
هذا المثال يوضح كيفية استخدام "Cell padding" لإنشاء مساحة بين محتوى الخلية والحواف.
مسافة الخلية (Cell spacing)
هذا المثال يوضح كيفية استخدام "Cell spacing" لزيادة المسافة بين الخلايا.
إضافة لون الخلفية أو صورة الخلفية إلى جدول
هذا المثال يوضح كيفية إضافة خلفية إلى جدول.
إضافة لون الخلفية أو صورة الخلفية إلى خلايا الجدول
هذا المثال يوضح كيفية إضافة خلفية إلى خلايا الجدول الواحدة أو أكثر.
ترتيب المحتوى داخل خلايا الجدول
هذا المثال يوضح كيفية استخدام خاصية "align" لترتيب محتوى الخلايا لإنشاء جدول جميل.
خاصية "frame"
هذا المثال يوضح كيفية استخدام خاصية "frame" لتحكم في الحواف المحيطة بالجدول.

علامات الجدول

الجدول الوصف
<table> تعريف الجدول.
<caption> تعريف عنوان الجدول.
<th> تعريف رأس الجدول.
<tr> تعريف السطر في الجدول.
<td> تعريف الخلية في الجدول.
<thead> تعريف رأس الجدول.
<tbody> تعريف الجسم الرئيسي للجدول.
<tfoot> تعريف رأس الجدول.
<col> تعريف الخصائص المستخدمة لأعمدة الجدول.
<colgroup> تعريف مجموعة أعمدة الجدول.