العنصر <td>

يُعرِّف العنصر <td> خليةً في الجدول الذي يحتويها.

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

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

راجع صفحة العنصر <table> لمزيدٍ من الأمثلة.

بطاقة العنصر

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	المحتوى التنظيمي.
الوسم المختصر	لا يجوز أن يُحذَف وسم البداية. يمكن حذف وسم النهاية للعنصر <td> إذا أتى وارءه مباشرةً العنصر <td> أو <th> أو إذا لم يعد هنالك محتوى آخر في العنصر الأب.
العناصر الأب	العنصر <tr>.
واجهة DOM	HTMLTableDataCellElement

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

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

الخاصيات

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

abbr

هذه الخاصية تحتوي على شرح مختصر عن محتوى الخلية، وبعض البرمجيات مثل قارئات الشاشة قد تعرض هذا الشرح قبل المحتوى نفسه.

يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5، ضع ببالك أن تبدأ الخلية بشرح للمحتوى قبل محتواها أو بكتابة وصف طويل للخلية وأن تضعه ضمن الخاصية title.

align

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

• left: عرض المحتوى على يسار الخلية
• center: توسيط المحتوى في الخلية
• right: عرض المحتوى على يمين الخلية
• justify: عرض المحتوى ملء السطر.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم left أو center أو right أو justify إلى الخاصية text-align.

axis

تحتوي هذه الخاصية على قائمة مؤلفة من سلاسل نصية يفصل بينها بفراغ، وكل سلسلة نصية تُمثِّل مُعرِّف ID لمجموعة من الخلايا التي تُطبَّق الترويسة عليها.

يجدر بالذكر أنَّ هذه الخاصية محذوفة في HTML5، ويجب استخدام الخاصية scope بدلًا منها.

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، وإنما يجب تنسيق العنصر <td> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام الخاصية background-color.

colspan

تحتوي هذه الخاصية على عدد صحيح موجب يُشير إلى عدد الأعمدة التي تمتد الخلية عليها. القيمة الافتراضية هي 1، وإذا ضُبِطَت هذه القيمة إلى 0 فستمتد الخلية إلى آخر عنصر في مجموعة الأعمدة (<colgroup>)، والقيم الأكبر من 1000 سيتعبرها المتصفح غير صحيحة وستُضبَط إلى القيمة الافتراضية (1).

مثال عن استخدام الخاصية colspan لجعل إحدى خلايا الجدول تمتد على عمودين:

<table>
  <tr>
    <th>الشهر</th>
    <th>المصروفات</th>
  </tr>
  <tr>
    <td>كانون الثاني</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>شباط</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">المجموع: $180</td>
  </tr>
</table>

headers

تحتوي هذه الخاصية على قائمة بالسلاسل النصية المفصول بينها بفراغ، وكل سلسلة نصية تُمثِّل خاصية id لعناصر <th> التي تنطبق على هذا العنصر.

مثال عن إسناد مُعرِّف id لعناصر <th>، ثم استخدام قيمة هذا المعرِّف مع الخاصية headers في عناصر <td> للإشارة إلى الترويسة التي تتبع هذه الخلية لها:

<table>
  <tr>
    <th id="name">الاسم</th>
    <th id="email">البريد الإلكتروني</th>
    <th id="phone">رقم الهاتف</th>
    <th id="addr">العنوان</th>
  </tr>
  <tr>
    <td headers="name">Bashir Al-Ameen</td>
    <td headers="email">bashir@gmail.com</td>
    <td headers="phone">+9639345485</td>
    <td headers="addr">سورية، حلب، المحافظة</td>
  </tr>
</table>

rowspan

تحتوي هذه الخاصية على عدد صحيح موجب يُشير إلى عدد الأسطر التي تمتد الخلية عليها، والقيمة الافتراضية هي 1، وإن ضُبِطَت هذه الخاصية إلى 0 فسيؤدي ذلك إلى امتداد الخلية إلى نهاية قسم الجدول (<thead> أو <tbody> أو <tfoot>) الذي تنتمي الخلية إليه. وأي قيمة أكبر من 65534 ستصبح 65534.

مثال يشابه المثال عن الخاصية colspan لخلية تمتد على سطرين:

<table>
  <tr>
    <th>الشهر</th>
    <th>المصروفات</th>
    <th>تجهيزات الحفلة</th>
  </tr>
  <tr>
    <td>كانون الثاني</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>شبط</td>
    <td>$80</td>
  </tr>
</table>

scope

هذه الخاصية تُعرِّف ما الذي تتعلق به الخلية المُعرَّفة في العنصر <td> أو <th>، وتأخذ إحدى القيم الآتية:

• row: ترتبط الترويسة بجميع الخلايا في السطر الذي تنتمي إليه.
• col: ترتبط الترويسة بجميع الخلايا في العمود الذي تنتمي إليه.
• rowgroup: تتعلق الترويسة بمجموعة أسطر وترتبط بجميع الخلايات الموجودة في تلك المجموعة.
• colgroup: تتعلق الترويسة بمجموعة أعمدة وترتبط بجميع خلاياها.
• auto.

valign

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

• baseline: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية، لكن ستكون المحاذاة على خط الأساس (baseline) للمحارف بدلًا من أسفلها، ولو كان للمحارف نفس الحجم فسيكون لهذه القيمة نفس تأثير القيمة bottom.
• bottom: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية.
• middle: توسيط النص في الخلية رأسيًا.
• top: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية vertical-align.

width

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

لاحظ أنَّ هذه الخاصية مهملة في HTML 4 ومحذوفة في HTML5 ويجب استخدام خاصية width في CSS بدلًا منها.

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

تعرض أغلبية المتصفحات العنصر <td> مع ضبط الخاصية display إلى table-cell ووراثة قيمة الخاصية vertical-align:

td {
  display: table-cell;
  vertical-align: inherit;
}

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

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