العنصر <td>
يُعرِّف العنصر <td>
خليةً في الجدول الذي يحتويها.
مثال عن جدول بسيط فيه سطرين وعمودين (عبر عناصر <tr>
و <td>
):
<table>
<tr>
<td>الخلية الأولى في السطر الأول</td>
<td>الخلية الثانية في السطر الأول</td>
</tr>
<tr>
<td>الخلية الأولى في السطر الثاني</td>
<td>الخلية الثانية في السطر الثاني</td>
</tr>
</table>
راجع صفحة العنصر <table>
لمزيدٍ من الأمثلة.
بطاقة العنصر
تصنيفات المحتوى | لا يوجد. |
---|---|
المحتوى المسموح | المحتوى التنظيمي. |
الوسم المختصر | لا يجوز أن يُحذَف وسم البداية.
يمكن حذف وسم النهاية للعنصر |
العناصر الأب | العنصر <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.