عرض مصدر HTML/table

<noinclude>{{DISPLAYTITLE:العنصر <code>&lt;table&gt;</code>}}</noinclude>
يُمثِّل العنصر <code><nowiki><table></nowiki></code> البيانات المجدّولة، أي المعلومات التي يُعبّر عنها عبر جدول ثنائي الأبعاد.

لا يجوز استخدام الجداول لإنشاء تخطيط للصفحة، فبعض مطوري الويب القدامى أخطؤوا في استخدامها لهذا الغرض، وإنما يجب استعمال CSS لإنشاء تخطيط الصفحة.

مثال عن جدول بسيط فيه سطرين وعمودين (عبر عناصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code> و <code>[[HTML/td|<nowiki><td></nowiki>]]</code>):<syntaxhighlight lang="html">
<table>
  <tr>
    <td>Bashir</td>
    <td>Al-Ameen</td>
  </tr>
  <tr>
    <td>Mona</td>
    <td>Al-Ameen</td>
  </tr>
</table>
</syntaxhighlight>مثال عن جدول بسيط له ترويسة (العنصر <code>[[HTML/td|<nowiki><th></nowiki>]]</code>):<syntaxhighlight lang="html">
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>Bashir</td>
    <td>Al-Ameen</td>
  </tr>
  <tr>
    <td>Bashir</td>
    <td>Al-Ameen</td>
  </tr>
</table>
</syntaxhighlight>مثال عن جدول فيه ثلاثة أقسام: ترويسة (عبر العنصر <code>[[HTML/thead|<thead>]]</code>)، وجسم (عبر العنصر <code>[[HTML/tbody|<tbody>]]</code>)، وتذييل (عبر العنصر <code>[[HTML/tfoot|<tfoot>]]</code>):<syntaxhighlight lang="html">
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>
</syntaxhighlight>مثال عن جدول فيه مجموعة أعمدة (عبر العنصر <code>[[HTML/colgroup|<colgroup>]]</code>) تمتد على أربعة أعمدة (الخاصية <code>span</code>):<syntaxhighlight lang="html">
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>
</syntaxhighlight>مثال عن جدول فيه مجموعة من الأعمدة (العنصر <code>[[HTML/colgroup|<colgroup>]]</code>) وعرّفنا داخله عمودًا (العنصر <code>[[HTML/col|<col>]]</code>) لون خلفيته أخضر:<syntaxhighlight lang="html">
<table>
  <colgroup>
    <col style="background-color: #0f0">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>
</syntaxhighlight>مثال عن جدول له عنوان عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>:<syntaxhighlight lang="html">
<table>
  <caption>caption</caption>
  <tr>
    <td>data</td>
  </tr>
</table>
</syntaxhighlight>

{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" | تصنيفات المحتوى
| عنصر تنظيمي.
|-
! scope="row" | المحتوى المسموح
| العنصر الآتية بالترتيب:
* عنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> اختياري.
* عنصر <code>[[HTML/colgroup|<colgroup>]]</code> صفر مرة أو أكثر.
* عنصر <code>[[HTML/thead|<thead>]]</code> اختياري.
* أحد العنصرين الآتيين:
** عنصر <code>[[HTML/tbody|<tbody>]]</code> صفر مرة أو أكثر.
** عنصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code> مرة واحدة أو أكثر.
* عنصر <code>[[HTML/tfoot|<tfoot>]]</code> اختياري.
|-
! scope="row" | الوسم المختصر
| لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
|-
! scope="row" | العناصر الأب
| أي عنصر يقبل المحتوى التنظيمي. 
|-
! scope="row" | واجهة DOM
| <code>HTMLTableElement</code>
|}
== دعم المتصفحات ==
{| class="wikitable" style="width: 50%;"
 !| Chrome
 ! Firefox
 ! Edge
 ! Safari
 ! Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}
== الخاصيات ==
يمكن استخدام الخاصيات العامة في هذا العنصر.

=== <code>align</code> ===
تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة الجدول بالنسبة إلى المستند، وتقبل إحدى القيم الآتية:
* <code>left</code>: عرض الجدول في الطرف الأيسر المستند
* <code>center</code>: توسيط الجدول في المستند
* <code>right</code>: عرض الجدول في الطرف الأيمن المستند
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر ضبط الخاصية <code>margin-left</code> و <code>margin-right</code> إلى <code>auto</code> أو استخدام الخاصية <code>margin</code> مع القيمة ‎<code>0 auto</code>.
=== <code>bgcolor</code> ===
تُعرِّف هذه الخاصية لون الخلفية للجدول، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام [https://www.w3.org/Graphics/Color/sRGB sRGB]، ويسبقها المحرف <code>#</code>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:
<table style="width: 80%;" dir="ltr">
   <tr>
    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>black</code> = "#000000"</td>
    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>green</code> = "#008000"</td>
   </tr>
   <tr>
    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>silver</code> = "#C0C0C0"</td>
    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>lime</code> = "#00FF00"</td>
   </tr>
   <tr>
    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>gray</code> = "#808080"</td>
    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>olive</code> = "#808000"</td>
   </tr>
   <tr>
    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>white</code> = "#FFFFFF"</td>
    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>yellow</code> = "#FFFF00"</td>
   </tr>
   <tr>
    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>maroon</code> = "#800000"</td>
    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>navy</code> = "#000080"</td>
   </tr>
   <tr>
    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>red</code> = "#FF0000"</td>
    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>blue</code> = "#0000FF"</td>
   </tr>
   <tr>
    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>purple</code> = "#800080"</td>
    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>teal</code> = "#008080"</td>
   </tr>
   <tr>
    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>fuchsia</code> = "#FF00FF"</td>
    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;">&nbsp;</td>
    <td><code>aqua</code> = "#00FFFF"</td>
   </tr>
 </table>
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>backgournd-color</code>.

=== <code>border</code> ===
هذه الخاصية تقبل أرقامًا صحيحةً تُمثِّل قياس الإطار الذي يُحيط بالجدول بواحدة البكسل، وإذا كانت قيمة هذه الخاصية <code>0</code> فستُضبَط قيمة الخاصية <code>frame</code> إلى <code>void</code>.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر الخاصيات <code>border</code> و <code>border-color</code> و <code>border-width</code> و <code>border-style</code>.

=== <code>cellpadding</code> ===
تُعرِّف هذه الخاصية مقدار الفراغ بين محتوى الخلية وبين إطارها (سواءً كان الإطار معروضًا أم لا)؛ وإذا كانت قيمة هذه الخاصية مُعرَّفة بواحدة البكسل فستُضاف مسافة إلى الجوانب الأربعة للخلية، أما لو كانت القيمة مئوية فسيتوسط المحتوى في الخلية وستُمثِّل المسافة الرأسية كلها (العلوية والسفلية) هذه القيمة، والمثل ينطبق على المسافة الأفقية (اليمينية واليسارية).

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر تطبيق الخاصية <code>border-collapse</code> إلى العنصر <code><nowiki><table></nowiki></code> وضبط قيمتها إلى <code>collapse</code>، واستخدام الخاصية <code>padding</code> على العنصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code>.
=== <code>cellspacing</code> ===
تُعرِّف هذه الخاصية مقدار الفراغ بين خليتين إما بالبكسل أو بالنسبة المئوية، وستُطبَّق قيمة هذه الخاصية أفقيًا ورأسيًا إلى المسافة بين أعلى الجدول والخلايا في أوّل سطر، وبين يسار الجدول وأوّل عمود، ويمين الجدول وآخر عمود، وأسفل الجدول وآخر سطر.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر تطبيق الخاصية <code>border-spacing</code> إلى العنصر <code><nowiki><table></nowiki></code>، خاصية <code>border-spacing</code> لن يكون لها أي تأثير إن ضُبَطَت الخاصية <code>border-collapse</code> إلى <code>collapse</code>.
=== <code>frame</code> ===
تُحدِّد هذه الخاصية أي جانب من جوانب الجدول يجب عرضه، وقد تأخذ إحدى القيم الآتية:
* <code>above</code>
* <code>below</code>
* <code>hsides</code>
* <code>vsides</code>
* <code>lhs</code>
* <code>rhs</code>
* <code>border</code>
* <code>box</code>
* <code>void</code>
يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر تطبيق الخاصيتين <code>border-style</code> و <code>border-width</code>.

=== <code>rules</code> ===
تُحدِّد هذه الخاصية متى يجب أن تظهر الخطوط (rules أو lines) في الجدول، ويمكن أن تقبل إحدى الخاصيات الآتية:
* <code>none</code>: تعني أنَّه لا يجب عرض أي خط، وهذه القيمة الافتراضية.
* <code>groups</code>: تؤدي إلى عرض الخطوط بين المجموعات المُعرَّفة عبر العناصر <code>[[HTML/thead|<thead>]]</code> و <code>[[HTML/tbody|<tbody>]]</code> و <code>[[HTML/tfoot|<tfoot>]]</code>، والعنصرين <code>[[HTML/col|<col>]]</code> و <code>[[HTML/colgroup|<colgroup>]]</code>.
* <code>rows</code>: تؤدي إلى عرض الخطوط بين الأسطر.
* <code>columns</code>: تؤدي إلى عرض الخطوط بين الأعمدة.
* <code>all</code>: تؤدي إلى عرض الخطوط بين الأسطر والأعمدة.
يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب استخدام CSS، وذلك عبر تطبيق الخاصية <code>border</code> إلى العنصر <code>[[HTML/thead|<thead>]]</code> أو <code>[[HTML/tbody|<tbody>]]</code> أو <code>[[HTML/tfoot|<tfoot>]]</code> أو <code>[[HTML/col|<col>]]</code> أو <code>[[HTML/colgroup|<colgroup>]]</code> بما يلزم.

=== <code>summary</code> ===
تُعرِّف هذه الخاصية نصًا بديلًا يلخص محتوى الجدول، وتسمح لزوار الموقع الذين يعانون مشاكل بصرية والذين قد يتصفحون الموقع عبر «شاشة بريل» (Braille screen).

المعلومات المُضافة إلى هذا الجدول لا تفيد الزوار الذين يعانون مشاكل بصرية فقط، وإنما تفيد غيرهم.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة، ويمكنك اختيار إحدى الطرائق الآتية لإضافة وصف للجدول:
* أضف الشرح حول الجدول (لكن هذه الطريقة غير منظمة).
* أضف الشرح ضمن عنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> داخل الجدول.
* أضف الشرح ضمن العنصر <code>[[HTML/details|<details>]]</code> الموجود داخل العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code> داخل الجدول.
* ضع العنصر <code><nowiki><table></nowiki></code> داخل العنصر <code>[[HTML/figure|<figure>]]</code> وأضف الشرح بعده.
* ضع العنصر <code><nowiki><table></nowiki></code> داخل العنصر <code>[[HTML/figure|<figure>]]</code> وأضف الشرح ضمن العنصر <code>[[HTML/figcaption|<figcaption>]]</code>.
* عدِّل الجدول لكيلا يحتاج إلى شرحٍ خاصٍ به (مثلًا: استخدم العنصرين <code>[[HTML/th|<nowiki><th></nowiki>]]</code> و <code>[[HTML/thead|<thead>]]</code>).

=== <code>width</code> ===
تُحدِّد هذه الخاصية عرض الجدول، ويمكن ضبط هذه القيمة بالبكسل أو بالنسبة المئوية، وإذا استعملت النسبة المئوية فستُمثِّل جزءًا من الحاوية التي يقع فيها العنصر <code><nowiki><table></nowiki></code>.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر الخاصية <code>width</code>.

==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/tables.html#the-table-element HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-table-element HTML5].
*مواصفة [https://www.w3.org/TR/html4/struct/tables.html#h-11.2.1 HTML 4.01].
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:Table|{{SUBPAGENAME}}]]