عرض مصدر HTML/td

<noinclude>{{DISPLAYTITLE:العنصر <code>&lt;td&gt;</code>}}</noinclude>
يُعرِّف العنصر <code><nowiki><td></nowiki></code> خليةً في الجدول الذي يحتويها.

مثال عن جدول بسيط فيه سطرين وعمودين (عبر عناصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code> و <code><nowiki><td></nowiki></code>):<syntaxhighlight lang="html">
<table>
  <tr>
    <td>الخلية الأولى في السطر الأول</td>
    <td>الخلية الثانية في السطر الأول</td>
  </tr>
  <tr>
    <td>الخلية الأولى في السطر الثاني</td>
    <td>الخلية الثانية في السطر الثاني</td>
  </tr>
</table>

</syntaxhighlight>راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code> لمزيدٍ من الأمثلة.

== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |تصنيفات المحتوى
|لا يوجد.
|-
! scope="row" |المحتوى المسموح
|المحتوى التنظيمي.
|-
! scope="row" |الوسم المختصر
|لا يجوز أن يُحذَف وسم البداية.
يمكن حذف وسم النهاية للعنصر <code><nowiki><td></nowiki></code> إذا أتى وارءه مباشرةً العنصر <code><nowiki><td></nowiki></code> أو <code>[[HTML/th|<nowiki><th></nowiki>]]</code> أو إذا لم يعد هنالك محتوى آخر في العنصر الأب.
|-
! scope="row" |العناصر الأب
|العنصر <code>[[HTML/tr|<nowiki><tr></nowiki>]]</code>.
|-
! scope="row" |واجهة DOM
|<code>HTMLTableDataCellElement</code>
|}
==دعم المتصفحات==
{| class="wikitable" style="width: 50%;"
!|Chrome
!Firefox
!Edge
!Safari
!Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}
==الخاصيات==
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.
===<code>abbr</code>===
هذه الخاصية تحتوي على شرح مختصر عن محتوى الخلية، وبعض البرمجيات مثل قارئات الشاشة قد تعرض هذا الشرح قبل المحتوى نفسه.

يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5، ضع ببالك أن تبدأ الخلية بشرح للمحتوى قبل محتواها أو بكتابة وصف طويل للخلية وأن تضعه ضمن الخاصية <code>title</code>.
===<code>align</code>===
تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة الخلية، وتقبل إحدى القيم الآتية:
*<code>left</code>: عرض المحتوى على يسار الخلية
*<code>center</code>: توسيط المحتوى في الخلية
*<code>right</code>: عرض المحتوى على يمين الخلية
*<code>justify</code>: عرض المحتوى ملء السطر.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم <code>left</code> أو <code>center</code> أو <code>right</code> أو <code>justify</code> إلى الخاصية <code>[[CSS/text-align|text-align]]</code>.
===<code>axis</code>===
تحتوي هذه الخاصية على قائمة مؤلفة من سلاسل نصية يفصل بينها بفراغ، وكل سلسلة نصية تُمثِّل مُعرِّف ID لمجموعة من الخلايا التي تُطبَّق الترويسة عليها.

يجدر بالذكر أنَّ هذه الخاصية محذوفة في HTML5، ويجب استخدام الخاصية <code>scope</code> بدلًا منها.
===<code>bgcolor</code>===
تُعرِّف هذه الخاصية لون الخلفية للخلية، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام [https://www.w3.org/Graphics/Color/sRGB sRGB]، ويسبقها المحرف <code>#</code>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:<table dir="ltr" style="width: 80%;"><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><td></nowiki></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام الخاصية <code>[[CSS/background-color|background-color]]</code>.
===<code>colspan</code>===
تحتوي هذه الخاصية على عدد صحيح موجب يُشير إلى عدد الأعمدة التي تمتد الخلية عليها. القيمة الافتراضية هي <code>1</code>، وإذا ضُبِطَت هذه القيمة إلى <code>0</code> فستمتد الخلية إلى آخر عنصر في مجموعة الأعمدة (<code>[[HTML/colgroup|<colgroup>]]</code>)، والقيم الأكبر من 1000 سيتعبرها المتصفح غير صحيحة وستُضبَط إلى القيمة الافتراضية (<code>1</code>).

مثال عن استخدام الخاصية <code>colspan</code> لجعل إحدى خلايا الجدول تمتد على عمودين:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
===<code>headers</code>===
تحتوي هذه الخاصية على قائمة بالسلاسل النصية المفصول بينها بفراغ، وكل سلسلة نصية تُمثِّل خاصية <code>id</code> لعناصر <code>[[HTML/th|<nowiki><th></nowiki>]]</code> التي تنطبق على هذا العنصر.

مثال عن إسناد مُعرِّف <code>id</code> لعناصر <code>[[HTML/th|<nowiki><th></nowiki>]]</code>، ثم استخدام قيمة هذا المعرِّف مع الخاصية <code>headers</code> في عناصر <code><nowiki><td></nowiki></code> للإشارة إلى الترويسة التي تتبع هذه الخلية لها:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
===<code>rowspan</code>===
تحتوي هذه الخاصية على عدد صحيح موجب يُشير إلى عدد الأسطر التي تمتد الخلية عليها، والقيمة الافتراضية هي <code>1</code>، وإن ضُبِطَت هذه الخاصية إلى <code>0</code> فسيؤدي ذلك إلى امتداد الخلية إلى نهاية قسم الجدول (<code>[[HTML/thead|<thead>]]</code> أو <code>[[HTML/tbody|<tbody>]]</code> أو <code>[[HTML/tfoot|<tfoot>]]</code>) الذي تنتمي الخلية إليه. وأي قيمة أكبر من 65534 ستصبح 65534.

مثال يشابه المثال عن الخاصية <code>[[HTML/td#colspan|colspan]]</code> لخلية تمتد على سطرين:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
===<code>scope</code>===
هذه الخاصية تُعرِّف ما الذي تتعلق به الخلية المُعرَّفة في العنصر <code><nowiki><td></nowiki></code> أو <code>[[HTML/th|<nowiki><th></nowiki>]]</code>، وتأخذ إحدى القيم الآتية:
*<code>row</code>: ترتبط الترويسة بجميع الخلايا في السطر الذي تنتمي إليه.
*<code>col</code>: ترتبط الترويسة بجميع الخلايا في العمود الذي تنتمي إليه.
*<code>rowgroup</code>: تتعلق الترويسة بمجموعة أسطر وترتبط بجميع الخلايات الموجودة في تلك المجموعة.
*<code>colgroup</code>: تتعلق الترويسة بمجموعة أعمدة وترتبط بجميع خلاياها.
*<code>auto</code>.
===<code>valign</code>===
تُستخدم هذه الخاصية لتحديد كيف تكون المحاذاة الرأسية كل خلية من السطر، وتقبل إحدى القيم الآتية:
*<code>baseline</code>: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية، لكن ستكون المحاذاة على خط الأساس ([[wikipedia:Baseline_(typography)|baseline]]) للمحارف بدلًا من أسفلها، ولو كان للمحارف نفس الحجم فسيكون لهذه القيمة نفس تأثير القيمة <code>bottom</code>.
*<code>bottom</code>: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية.
*<code>middle</code>: توسيط النص في الخلية رأسيًا.
*<code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية <code>[[CSS/vertical-align|vertical-align]]</code>.
===<code>width</code>===
تستعمل هذه الخاصية لتحديد عرض الخلية المستحسن، وإن كانت الخلية ضيقة جدًا ولا يتسع محتواها فيها فسيزداد عرضها بما يلزم.

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

== التنسيق الافتراضي ==
تعرض أغلبية المتصفحات العنصر <code><nowiki><td></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>table-cell</code> و<nowiki/>[[CSS/inherit|وراثة]] قيمة الخاصية <code>[[CSS/vertical-align|vertical-align]]</code>:<syntaxhighlight lang="css">
td {
  display: table-cell;
  vertical-align: inherit;
}
</syntaxhighlight>
==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/tables.html#the-td-element HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-td-element HTML5].
*مواصفة [https://www.w3.org/TR/html4/struct/tables.html#h-11.2.6 HTML 4.01].
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML Table|{{SUBPAGENAME}}]]