علامة <tfoot> HTML
مثال
جدول HTML به عنصر <thead> و <tbody> و <tfoot>:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تُستخدم <tfoot>العلامة لتجميع محتوى التذييل في جدول HTML.
يتم <tfoot>استخدام العنصر بالاقتران مع عنصري <رأس>
و < نص> لتحديد كل جزء من الجدول (تذييل ، رأس ، نص).
يمكن للمتصفحات استخدام هذه العناصر لتمكين التمرير في نص الجدول بشكل مستقل عن الرأس والتذييل. أيضًا ، عند طباعة جدول كبير يمتد على صفحات متعددة ، يمكن لهذه العناصر تمكين طباعة رأس الجدول وتذييله في أعلى وأسفل كل صفحة.
ملاحظة: يجب أن يحتوي <tfoot>العنصر على
علامة <tr> واحدة أو أكثر بداخله.
يجب <tfoot>استخدام العلامة في السياق التالي: بصفتك
عنصرًا فرعيًا لعنصر <table> ، بعد أي عناصر
<caption> و <colgroup> و
<thead> و <tbody> .
نصيحة: لن تؤثر <thead> و <tbody> <tfoot>والعناصر على تخطيط الجدول افتراضيًا. ومع ذلك ، يمكنك استخدام CSS لتصميم هذه العناصر (انظر المثال أدناه)!
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <tfoot> | Yes | Yes | Yes | Yes | Yes |
السمات العالمية
تدعم <tfoot>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <tfoot>العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
النمط <رأس> و <جسم> و <قدم> باستخدام CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
مثال
كيفية محاذاة المحتوى داخل <tfoot> (باستخدام CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="text-align:center">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
مثال
كيفية محاذاة المحتوى عموديًا داخل <tfoot> (باستخدام CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="vertical-align:bottom">
<tr
style="height:100px">
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <tfoot>العنصر بالقيم الافتراضية التالية:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}