HTMLالوسم <tfoot>

تعريفه

نستخدم الوسم <tfoot> لتجميع الأسطر الموضوعة في آخر الجدول بهدف تعديل تصميمها بواسطة CSS لتظهر بشكل مختلف عن باقي الأسطر الموضوعة فيه.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <tfoot>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 5 أسطر مع تجميع أسطره على النحو التالي:

• السطر الأول وضعناه بداخل وسم <thead> لأنه يحتوي عناوين أسطر الجدول.
• الأسطر التي تليه وضعناها بداخل وسم <tbody> لأنها تحتوي معلومات الجدول العادية.
• السطر الأخير وضعناه بداخل وسم <tfoot> لأنه يحتوي النتائج النهائية لمعلومات الجدول.

جميع الخانات التي قمنا بوضعها في الجدول سيتم إعطاؤها تصميم بشكل تلقائي نسبةً لكود التصميم الذي وضعناه للوسم <thead> و <tbody> و <tfoot> التي وضعناها بداخلها.

<table>
    <!-- <thead> السطر الأول في الجدول وضعناه بداخل الوسم -->
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    <thead>
    <!-- <tbody> الأسطر التي تحتوي معلومات عادية في الجدول وضعناها بداخل الوسم -->
    <tbody>
        <tr>
            <td>1</td>
            <td>mhamad</td>
        </tr>
        <tr>
            <td>2</td>
            <td>rima</td>
        </tr>
        <tr>
            <td>3</td>
            <td>youssef</td>
        </tr>
    </tbody>
    <!-- <tfoot> السطر الأخير في الجدول وضعناه بداخل الوسم -->
    </tfoot>
        <tr>
            <td>Total</td>
            <td>3 users</td>
        </tr>
    </tfoot>
</table>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

tfoot {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}