الفرق بين المراجعتين ل"HTML/table"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (تغيير ترتيب التصنيفات)
ط (استبدال النص - 'backgournd' ب'background')
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 7: سطر 7:
 
<table>
 
<table>
 
   <tr>
 
   <tr>
−
     <td>Bashir</td>
+
     <td>الخلية الأولى في السطر الأول</td>
−
     <td>Al-Ameen</td>
+
     <td>الخلية الثانية في السطر الأول</td>
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
−
     <td>Mona</td>
+
     <td>الخلية الأولى في السطر الثاني</td>
−
     <td>Al-Ameen</td>
+
     <td>الخلية الثانية في السطر الثاني</td>
 
   </tr>
 
   </tr>
 
</table>
 
</table>
 +
 
</syntaxhighlight>مثال عن جدول بسيط له ترويسة (العنصر <code>[[HTML/td|<nowiki><th></nowiki>]]</code>):<syntaxhighlight lang="html">
 
</syntaxhighlight>مثال عن جدول بسيط له ترويسة (العنصر <code>[[HTML/td|<nowiki><th></nowiki>]]</code>):<syntaxhighlight lang="html">
 
<table>
 
<table>
 
   <tr>
 
   <tr>
−
     <th>First name</th>
+
     <th>الاسم</th>
−
     <th>Last name</th>
+
     <th>الرقم الجامعي</th>
 +
    <th>المعدل</th>
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
−
     <td>Bashir</td>
+
     <td>بشير</td>
−
     <td>Al-Ameen</td>
+
     <td>16464</td>
 +
    <td>82.5</td>
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
−
     <td>Bashir</td>
+
     <td>حسام</td>
−
     <td>Al-Ameen</td>
+
     <td>17464</td>
−
   </tr>
+
    <td>75.2</td>
 +
   </tr>    
 
</table>
 
</table>
 +
 
</syntaxhighlight>مثال عن جدول فيه ثلاثة أقسام: ترويسة (عبر العنصر <code>[[HTML/thead|<thead>]]</code>)، وجسم (عبر العنصر <code>[[HTML/tbody|<tbody>]]</code>)، وتذييل (عبر العنصر <code>[[HTML/tfoot|<tfoot>]]</code>):<syntaxhighlight lang="html">
 
</syntaxhighlight>مثال عن جدول فيه ثلاثة أقسام: ترويسة (عبر العنصر <code>[[HTML/thead|<thead>]]</code>)، وجسم (عبر العنصر <code>[[HTML/tbody|<tbody>]]</code>)، وتذييل (عبر العنصر <code>[[HTML/tfoot|<tfoot>]]</code>):<syntaxhighlight lang="html">
 
<table>
 
<table>
 
   <thead>
 
   <thead>
 
     <tr>
 
     <tr>
−
       <th>Header content 1</th>
+
       <th>الترويسة 1</th>
−
       <th>Header content 2</th>
+
       <th>الترويسة 2</th>
 
     </tr>
 
     </tr>
 
   </thead>
 
   </thead>
 
   <tbody>
 
   <tbody>
 
     <tr>
 
     <tr>
−
       <td>Body content 1</td>
+
       <td>خلية عادية 1</td>
−
       <td>Body content 2</td>
+
       <td>خلية عادية 2</td>
 
     </tr>
 
     </tr>
 
   </tbody>
 
   </tbody>
 
   <tfoot>
 
   <tfoot>
 
     <tr>
 
     <tr>
−
       <td>Footer content 1</td>
+
       <th>التذييل 1</th>
−
       <td>Footer content 2</td>
+
       <th>التذييل 2</th>
 
     </tr>
 
     </tr>
 
   </tfoot>
 
   </tfoot>
 
</table>
 
</table>
 +
 
</syntaxhighlight>مثال عن جدول فيه مجموعة أعمدة (عبر العنصر <code>[[HTML/colgroup|<colgroup>]]</code>) تمتد على أربعة أعمدة (الخاصية <code>span</code>):<syntaxhighlight lang="html">
 
</syntaxhighlight>مثال عن جدول فيه مجموعة أعمدة (عبر العنصر <code>[[HTML/colgroup|<colgroup>]]</code>) تمتد على أربعة أعمدة (الخاصية <code>span</code>):<syntaxhighlight lang="html">
 
<table>
 
<table>
 
   <colgroup span="4"></colgroup>
 
   <colgroup span="4"></colgroup>
 
   <tr>
 
   <tr>
−
     <th>Countries</th>
+
     <th>الدولة</th>
−
     <th>Capitals</th>
+
     <th>العاصمة</th>
−
     <th>Population</th>
+
     <th>عدد السكان</th>
−
     <th>Language</th>
+
     <th>اللغة</th>
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
−
     <td>USA</td>
+
     <td>الولايات المتحدة الأمريكية</td>
−
     <td>Washington D.C.</td>
+
     <td>واشنطن</td>
−
     <td>309 million</td>
+
     <td>309 مليون</td>
−
     <td>English</td>
+
     <td>الإنكليزية</td>
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
−
     <td>Sweden</td>
+
     <td>السويد</td>
−
     <td>Stockholm</td>
+
     <td>ستوكهولم</td>
−
     <td>9 million</td>
+
     <td>9 مليون</td>
−
     <td>Swedish</td>
+
     <td>السويدية</td>
 
   </tr>
 
   </tr>
 
</table>
 
</table>
سطر 79: سطر 85:
 
   </colgroup>
 
   </colgroup>
 
   <tr>
 
   <tr>
−
     <th>Lime</th>
+
     <th>التفاح</th>
−
     <th>Lemon</th>
+
     <th>الليمون</th>
−
     <th>Orange</th>
+
     <th>البرتقال</th>
 
   </tr>
 
   </tr>
 
   <tr>
 
   <tr>
−
     <td>Green</td>
+
     <td>أخضر</td>
−
     <td>Yellow</td>
+
     <td>أصفر</td>
−
     <td>Orange</td>
+
     <td>برتقالي</td>
 
   </tr>
 
   </tr>
 
</table>
 
</table>
 
</syntaxhighlight>مثال عن جدول له عنوان عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>:<syntaxhighlight lang="html">
 
</syntaxhighlight>مثال عن جدول له عنوان عبر العنصر <code>[[HTML/caption|<nowiki><caption></nowiki>]]</code>:<syntaxhighlight lang="html">
 
<table>
 
<table>
−
   <caption>caption</caption>
+
   <caption>عنوان الجدول</caption>
 
   <tr>
 
   <tr>
−
     <td>data</td>
+
     <td>البيانات الموجودة فيه</td>
 
   </tr>
 
   </tr>
 
</table>
 
</table>
 +
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 144: سطر 152:
 
* <code>center</code>: توسيط الجدول في المستند
 
* <code>center</code>: توسيط الجدول في المستند
 
* <code>right</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>.
+
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر ضبط الخاصية <code>[[CSS/margin-left|margin-left]]</code> و <code>[[CSS/margin-right|margin-right]]</code> إلى <code>auto</code> أو استخدام الخاصية <code>[[CSS/margin|margin]]</code> مع القيمة ‎<code>0 auto</code>.
 
=== <code>bgcolor</code> ===
 
=== <code>bgcolor</code> ===
 
تُعرِّف هذه الخاصية لون الخلفية للجدول، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام [https://www.w3.org/Graphics/Color/sRGB sRGB]، ويسبقها المحرف <code>#</code>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:
 
تُعرِّف هذه الخاصية لون الخلفية للجدول، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام [https://www.w3.org/Graphics/Color/sRGB sRGB]، ويسبقها المحرف <code>#</code>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:
سطر 197: سطر 205:
 
   </tr>
 
   </tr>
 
  </table>
 
  </table>
−
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>backgournd-color</code>.
+
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>[[CSS/background-color|background-color]]</code>.
  
 
=== <code>border</code> ===
 
=== <code>border</code> ===
 
هذه الخاصية تقبل أرقامًا صحيحةً تُمثِّل قياس الإطار الذي يُحيط بالجدول بواحدة البكسل، وإذا كانت قيمة هذه الخاصية <code>0</code> فستُضبَط قيمة الخاصية <code>frame</code> إلى <code>void</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><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر الخاصيات <code>[[CSS/border|border]]</code> و <code>[[CSS/border-color|border-color]]</code> و <code>[[CSS/border-width|border-width]]</code> و <code>[[CSS/border-style|border-style]]</code>.
  
 
=== <code>cellpadding</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><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر تطبيق الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> إلى العنصر <code><nowiki><table></nowiki></code> وضبط قيمتها إلى <code>collapse</code>، واستخدام الخاصية <code>[[CSS/padding|padding]]</code> على العنصر <code>[[HTML/td|<nowiki><td></nowiki>]]</code>.
 
=== <code>cellspacing</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><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر تطبيق الخاصية <code>border-spacing</code> إلى العنصر <code><nowiki><table></nowiki></code>، خاصية <code>[[CSS/border-spacing|border-spacing]]</code> لن يكون لها أي تأثير إن ضُبَطَت الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> إلى <code>collapse</code>.
 
=== <code>frame</code> ===
 
=== <code>frame</code> ===
 
تُحدِّد هذه الخاصية أي جانب من جوانب الجدول يجب عرضه، وقد تأخذ إحدى القيم الآتية:
 
تُحدِّد هذه الخاصية أي جانب من جوانب الجدول يجب عرضه، وقد تأخذ إحدى القيم الآتية:
سطر 223: سطر 231:
 
* <code>box</code>
 
* <code>box</code>
 
* <code>void</code>
 
* <code>void</code>
−
يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر تطبيق الخاصيتين <code>border-style</code> و <code>border-width</code>.
+
يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر تطبيق الخاصيتين <code>[[CSS/border-style|border-style]]</code> و <code>[[CSS/border-width|border-width]]</code>.
  
 
=== <code>rules</code> ===
 
=== <code>rules</code> ===
سطر 250: سطر 258:
 
تُحدِّد هذه الخاصية عرض الجدول، ويمكن ضبط هذه القيمة بالبكسل أو بالنسبة المئوية، وإذا استعملت النسبة المئوية فستُمثِّل جزءًا من الحاوية التي يقع فيها العنصر <code><nowiki><table></nowiki></code>.
 
تُحدِّد هذه الخاصية عرض الجدول، ويمكن ضبط هذه القيمة بالبكسل أو بالنسبة المئوية، وإذا استعملت النسبة المئوية فستُمثِّل جزءًا من الحاوية التي يقع فيها العنصر <code><nowiki><table></nowiki></code>.
  
−
يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر الخاصية <code>width</code>.
+
يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <code><nowiki><table></nowiki></code> باستخدام CSS، وذلك عبر الخاصية <code>[[CSS/width|width]]</code>.
 +
 
 +
== التنسيق الافتراضي ==
 +
تعرض أغلبية المتصفحات العنصر <code><nowiki><table></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>table</code>، والخاصية <code>[[CSS/border-collapse|border-collapse]]</code> إلى <code>separate</code>، والخاصية <code>[[CSS/border-spacing|border-spacing]]</code> إلى <code>2px</code>، والخاصية <code>[[CSS/border-color|border-color]]</code> إلى <code>gray</code>:<syntaxhighlight lang="css">
 +
table {
 +
  display: table;
 +
  border-collapse: separate;
 +
  border-spacing: 2px;
 +
  border-color: gray;
 +
}
 +
</syntaxhighlight>
  
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==
سطر 256: سطر 274:
 
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-table-element HTML5].
 
*مواصفة [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].
 
*مواصفة [https://www.w3.org/TR/html4/struct/tables.html#h-11.2.1 HTML 4.01].
−
[[تصنيف:HTML]]
+
[[تصنيف:HTML|{{SUBPAGENAME}}]]
−
[[تصنيف:HTML Elements]]
+
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
−
[[تصنيف:Table]]
+
[[تصنيف:HTML Table|{{SUBPAGENAME}}]]

مراجعة 07:49، 24 فبراير 2018

يُمثِّل العنصر <table> البيانات المجدّولة، أي المعلومات التي يُعبّر عنها عبر جدول ثنائي الأبعاد.

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

مثال عن جدول بسيط فيه سطرين وعمودين (عبر عناصر <tr> و <td>):

<table>
  <tr>
    <td>الخلية الأولى في السطر الأول</td>
    <td>الخلية الثانية في السطر الأول</td>
  </tr>
  <tr>
    <td>الخلية الأولى في السطر الثاني</td>
    <td>الخلية الثانية في السطر الثاني</td>
  </tr>
</table>

مثال عن جدول بسيط له ترويسة (العنصر <th>):

<table>
  <tr>
    <th>الاسم</th>
    <th>الرقم الجامعي</th>
    <th>المعدل</th>
  </tr>
  <tr>
    <td>بشير</td>
    <td>16464</td>
    <td>82.5</td>
  </tr>
  <tr>
    <td>حسام</td>
    <td>17464</td>
    <td>75.2</td>
  </tr>      
</table>

مثال عن جدول فيه ثلاثة أقسام: ترويسة (عبر العنصر <thead>)، وجسم (عبر العنصر <tbody>)، وتذييل (عبر العنصر <tfoot>):

<table>
  <thead>
    <tr>
      <th>الترويسة 1</th>
      <th>الترويسة 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>خلية عادية 1</td>
      <td>خلية عادية 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>التذييل 1</th>
      <th>التذييل 2</th>
    </tr>
  </tfoot>
</table>

مثال عن جدول فيه مجموعة أعمدة (عبر العنصر <colgroup>) تمتد على أربعة أعمدة (الخاصية span):

<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>الدولة</th>
    <th>العاصمة</th>
    <th>عدد السكان</th>
    <th>اللغة</th>
  </tr>
  <tr>
    <td>الولايات المتحدة الأمريكية</td>
    <td>واشنطن</td>
    <td>309 مليون</td>
    <td>الإنكليزية</td>
  </tr>
  <tr>
    <td>السويد</td>
    <td>ستوكهولم</td>
    <td>9 مليون</td>
    <td>السويدية</td>
  </tr>
</table>

مثال عن جدول فيه مجموعة من الأعمدة (العنصر <colgroup>) وعرّفنا داخله عمودًا (العنصر <col>) لون خلفيته أخضر:

<table>
  <colgroup>
    <col style="background-color: #0f0">
  </colgroup>
  <tr>
    <th>التفاح</th>
    <th>الليمون</th>
    <th>البرتقال</th>
  </tr>
  <tr>
    <td>أخضر</td>
    <td>أصفر</td>
    <td>برتقالي</td>
  </tr>
</table>

مثال عن جدول له عنوان عبر العنصر <caption>:

<table>
  <caption>عنوان الجدول</caption>
  <tr>
    <td>البيانات الموجودة فيه</td>
  </tr>
</table>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي.
المحتوى المسموح العنصر الآتية بالترتيب:
  • عنصر <caption> اختياري.
  • عنصر <colgroup> صفر مرة أو أكثر.
  • عنصر <thead> اختياري.
  • أحد العنصرين الآتيين:
    • عنصر <tbody> صفر مرة أو أكثر.
    • عنصر <tr> مرة واحدة أو أكثر.
  • عنصر <tfoot> اختياري.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM HTMLTableElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

align

تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة الجدول بالنسبة إلى المستند، وتقبل إحدى القيم الآتية:

  • left: عرض الجدول في الطرف الأيسر المستند
  • center: توسيط الجدول في المستند
  • right: عرض الجدول في الطرف الأيمن المستند

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب تنسيق العنصر <table> باستخدام CSS، وذلك عبر ضبط الخاصية margin-left و margin-right إلى auto أو استخدام الخاصية margin مع القيمة ‎0 auto.

bgcolor

تُعرِّف هذه الخاصية لون الخلفية للجدول، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام sRGB، ويسبقها المحرف #. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:

  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"

يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <table> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية background-color.

border

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

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

cellpadding

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

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <table> باستخدام CSS، وذلك عبر تطبيق الخاصية border-collapse إلى العنصر <table> وضبط قيمتها إلى collapse، واستخدام الخاصية padding على العنصر <td>.

cellspacing

تُعرِّف هذه الخاصية مقدار الفراغ بين خليتين إما بالبكسل أو بالنسبة المئوية، وستُطبَّق قيمة هذه الخاصية أفقيًا ورأسيًا إلى المسافة بين أعلى الجدول والخلايا في أوّل سطر، وبين يسار الجدول وأوّل عمود، ويمين الجدول وآخر عمود، وأسفل الجدول وآخر سطر.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب تنسيق العنصر <table> باستخدام CSS، وذلك عبر تطبيق الخاصية border-spacing إلى العنصر <table>، خاصية border-spacing لن يكون لها أي تأثير إن ضُبَطَت الخاصية border-collapse إلى collapse.

frame

تُحدِّد هذه الخاصية أي جانب من جوانب الجدول يجب عرضه، وقد تأخذ إحدى القيم الآتية:

  • above
  • below
  • hsides
  • vsides
  • lhs
  • rhs
  • border
  • box
  • void

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

rules

تُحدِّد هذه الخاصية متى يجب أن تظهر الخطوط (rules أو lines) في الجدول، ويمكن أن تقبل إحدى الخاصيات الآتية:

  • none: تعني أنَّه لا يجب عرض أي خط، وهذه القيمة الافتراضية.
  • groups: تؤدي إلى عرض الخطوط بين المجموعات المُعرَّفة عبر العناصر <thead> و <tbody> و <tfoot>، والعنصرين <col> و <colgroup>.
  • rows: تؤدي إلى عرض الخطوط بين الأسطر.
  • columns: تؤدي إلى عرض الخطوط بين الأعمدة.
  • all: تؤدي إلى عرض الخطوط بين الأسطر والأعمدة.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة ولا يجوز استعمالها، وإنما يجب استخدام CSS، وذلك عبر تطبيق الخاصية border إلى العنصر <thead> أو <tbody> أو <tfoot> أو <col> أو <colgroup> بما يلزم.

summary

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

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

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة، ويمكنك اختيار إحدى الطرائق الآتية لإضافة وصف للجدول:

  • أضف الشرح حول الجدول (لكن هذه الطريقة غير منظمة).
  • أضف الشرح ضمن عنصر <caption> داخل الجدول.
  • أضف الشرح ضمن العنصر <details> الموجود داخل العنصر <caption> داخل الجدول.
  • ضع العنصر <table> داخل العنصر <figure> وأضف الشرح بعده.
  • ضع العنصر <table> داخل العنصر <figure> وأضف الشرح ضمن العنصر <figcaption>.
  • عدِّل الجدول لكيلا يحتاج إلى شرحٍ خاصٍ به (مثلًا: استخدم العنصرين <th> و <thead>).

width

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

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

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <table> مع ضبط الخاصية display إلى table، والخاصية border-collapse إلى separate، والخاصية border-spacing إلى 2px، والخاصية border-color إلى gray:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

مصادر ومواصفات

مجلوبة من "https://wiki.hsoub.com/index.php?title=HTML/table&oldid=2764"