HTML/table

يُمثِّل العنصر <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;
}

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

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.