الفرق بين المراجعتين لصفحة: «HTML/tfoot»
ط تغيير ترتيب التصنيفات |
إضافة قسمين ومثال |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 5: | سطر 5: | ||
<thead> | <thead> | ||
<tr> | <tr> | ||
<th> | <th>الترويسة 1</th> | ||
<th> | <th>الترويسة 2</th> | ||
</tr> | </tr> | ||
</thead> | </thead> | ||
<tbody> | <tbody> | ||
<tr> | <tr> | ||
<td> | <td>خلية عادية 1</td> | ||
<td> | <td>خلية عادية 2</td> | ||
</tr> | </tr> | ||
</tbody> | </tbody> | ||
<tfoot> | <tfoot> | ||
<tr> | <tr> | ||
< | <th>التذييل 1</th> | ||
< | <th>التذييل 2</th> | ||
</tr> | </tr> | ||
</tfoot> | </tfoot> | ||
</table> | </table> | ||
</syntaxhighlight><span> لأمثلة أخرى عن هذا العنصر، راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.</span> | </syntaxhighlight><span> لأمثلة أخرى عن هذا العنصر، راجع صفحة العنصر <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.</span> | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 64: | سطر 66: | ||
* <code>right</code>: عرض المحتوى على يمين الخلية | * <code>right</code>: عرض المحتوى على يمين الخلية | ||
* <code>justify</code>: عرض المحتوى ملء السطر. | * <code>justify</code>: عرض المحتوى ملء السطر. | ||
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم <code>left</code> أو <code>center</code> أو <code>right</code> أو <code>justify</code> إلى الخاصية <code>text-align</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>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>. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا: | ||
| سطر 117: | سطر 119: | ||
</tr> | </tr> | ||
</table> | </table> | ||
يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><tfoot></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code> | يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <code><tfoot></code> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية <code>[[CSS/background-color|background-color]]</code> على خلايا <code>[[HTML/td|<nowiki><td></nowiki>]]</code> أو <code>[[HTML/th|<nowiki><th></nowiki>]]</code> الملائمة. | ||
=== <code>valign</code> === | === <code>valign</code> === | ||
| سطر 125: | سطر 127: | ||
* <code>middle</code>: توسيط النص في الخلية رأسيًا. | * <code>middle</code>: توسيط النص في الخلية رأسيًا. | ||
* <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية. | * <code>top</code>: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية. | ||
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية <code>vertical-align</code>. | يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية <code>[[CSS/vertical-align|vertical-align]]</code>. | ||
==التنسيق الافتراضي== | |||
تعرض أغلبية المتصفحات العنصر <code><tfoot></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>table-footer-group</code>، وتوسيطه رأسيًا (<code>[[CSS/vertical-align|vertical-align]]</code>)، ووراثة قيمة الخاصية <code>[[CSS/border-color|border-color]]</code>:<syntaxhighlight lang="css"> | |||
tfoot { | |||
display: table-footer-group; | |||
vertical-align: middle; | |||
border-color: inherit; | |||
} | |||
</syntaxhighlight> | |||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
*معيار [https://html.spec.whatwg.org/multipage/tables.html#the-tfoot-element HTML Living Standard]. | *معيار [https://html.spec.whatwg.org/multipage/tables.html#the-tfoot-element HTML Living Standard]. | ||
*مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element HTML5]. | *مواصفة [http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element HTML5]. | ||
*مواصفة [https://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 HTML 4.01]. | *مواصفة [https://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 HTML 4.01]. | ||
[[تصنيف:HTML]] | [[تصنيف:HTML|{{SUBPAGENAME}}]] | ||
[[تصنيف:HTML Elements]] | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] | ||
[[تصنيف:Table]] | [[تصنيف:HTML Table|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 07:07، 24 فبراير 2018
يُعرِّف العنصر <tfoot> مجموعةً من الأسطر التي تُمثِّل خلاصةً لأعمدة العنصر <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>
لأمثلة أخرى عن هذا العنصر، راجع صفحة العنصر <table>.
بطاقة العنصر
| تصنيفات المحتوى | لا يوجد. |
|---|---|
| المحتوى المسموح | العنصر <tr> صفر مرة أو أكثر.
|
| الوسم المختصر | لا يجوز أن يُحذَف وسم البداية.
يمكن حذف وسم النهاية للعنصر |
| العناصر الأب | العنصر <table>، ويجب أن يكون العنصر <tfoot> بعد أيّ عناصر <caption> أو <colgroup> و <thead> و <tbody> و <tr> لاحظ أنَّ هذا أمرٌ مطلوب في HTML5.
|
| واجهة DOM | HTMLTableSectionElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
align
تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة كل خلية من خلايا المجموعة، وتقبل إحدى القيم الآتية:
left: عرض المحتوى على يسار الخليةcenter: توسيط المحتوى في الخليةright: عرض المحتوى على يمين الخليةjustify: عرض المحتوى ملء السطر.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم left أو center أو right أو justify إلى الخاصية text-align.
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، وإنما يجب تنسيق العنصر <tfoot> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام خاصية background-color على خلايا <td> أو <th> الملائمة.
valign
تُستخدم هذه الخاصية لتحديد كيف تكون المحاذاة الرأسية كل خلية من المجموعة، وتقبل إحدى القيم الآتية:
baseline: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية، لكن ستكون المحاذاة على خط الأساس (baseline) للمحارف بدلًا من أسفلها، ولو كان للمحارف نفس الحجم فسيكون لهذه القيمة نفس تأثير القيمةbottom.bottom: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية.middle: توسيط النص في الخلية رأسيًا.top: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.
يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية vertical-align.
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <tfoot> مع ضبط الخاصية display إلى table-footer-group، وتوسيطه رأسيًا (vertical-align)، ووراثة قيمة الخاصية border-color:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مواصفة HTML 4.01.