مثال
جدول HTML مع <thead>, <tfoot> ، و <tbody> العنصر:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
انها محاولة لنفسك » تعريف واستخدام
و <tfoot> يستخدم كلمة دلالية لمحتوى تذييل المجموعة في جدول HTML.
و <tfoot> يستخدم عنصر بالتعاون مع <thead> و <tbody> العناصر لتحديد كل جزء من الجدول (تذييل الصفحة، رأس والجسد).
يمكن المتصفحات استخدام هذه العناصر لتمكين التمرير من الجسم الجدول بشكل مستقل عن رأس وتذييل الصفحة. أيضا، عند طباعة الجدول الكبير الذي يمتد على عدة صفحات، ويمكن لهذه العناصر ستمكن رأس الجدول وتذييل الصفحة المراد طباعتها في أعلى وأسفل كل صفحة.
و <tfoot> يجب أن تستخدم العلامة في السياق التالي: عندما كان طفلا ل <table> عنصر، بعد أي <caption>, <colgroup> ، و <thead> العناصر وقبل أي <tbody> و <tr> العناصر.
دعم المتصفح
| العنصر | |||||
|---|---|---|---|---|---|
| <tfoot> | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا |
نصائح وملاحظات
ملاحظة: <tfoot> العنصر يجب أن يكون واحد أو أكثر <tr> علامات الداخل.
تلميح: <thead>, <tbody> ، و <tfoot> العناصر لن يؤثر على تخطيط الجدول بشكل افتراضي.ومع ذلك، يمكنك استخدام CSS أسلوب هذه العناصر.
الخلافات بين HTML 4.01 و HTML5
ويدعم أيا من سمات HTML 4.01 في HTML5.
الصفات
| السمة | القيمة | وصف |
|---|---|---|
| align | right left center justify char | غير معتمدة في HTML5. محاذاة محتوى داخل <tfoot> العنصر |
| char | character | غير معتمدة في HTML5. محاذاة محتوى داخل <tfoot> العنصر إلى حرف |
| charoff | number | غير معتمدة في HTML5. يحدد عدد الأحرف محتوى داخل <tfoot> سيتم محاذاة عنصر من الحرف المحدد من قبل char السمة |
| valign | top middle bottom baseline | غير معتمدة في HTML5. عمودي بمحاذاة محتوى داخل <tfoot> العنصر |
السمات العامة
و <tfoot> كما يدعم بطاقة و السمات العامة في HTML .
سمات الحدث
و <tfoot> كما يدعم هذا الكود في حدث سمات في HTML .
الإعدادات الافتراضية CSS
معظم المتصفحات عرض <tfoot> العنصر مع القيم الافتراضية التالية:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}