شرح العنصر (tfoot) في لغة HTML

الشرح الشامل لعنصر <tfoot> في HTML

HTML

دليل شامل لفهم واستخدام تذييل الجداول في تطوير الويب

مقدمة عن عنصر <tfoot>

عنصر <tfoot> (اختصارًا لـ "Table Footer" أو "تذييل الجدول") هو أحد العناصر الأساسية المستخدمة في تنظيم هيكل الجداول HTML. يُستخدم هذا العنصر لتجميع صفوف التذييل في جدول HTML، مما يوفر بنية واضحة للبيانات.

البنية الأساسية

                <table>

                  <thead>

                    <!-- رأس الجدول -->

                  </thead>

                  <tbody>

                    <!-- جسم الجدول -->

                  </tbody>

                  <tfoot>

                    <!-- تذييل الجدول -->

                  </tfoot>

                </table>
            

السمات (Attributes) الخاصة بـ <tfoot>

السمات العامة

• align: محاذاة المحتوى (left, center, right, justify, char)
• valign: محاذاة رأسية (top, middle, bottom, baseline)
• bgcolor: لون خلفية التذييل (غير موصى به في HTML5)
• style: تطبيق أنماط CSS مباشرة

سمات HTML5

• hidden: إخفاء التذييل
• class: تحديد فئة للتصميم
• id: معرف فريد للتذييل
• data-*: سمات بيانات مخصصة

أمثلة عملية

جدول مع تذييل أساسي

                <table border="1">

                  <thead>

                    <tr>

                      <th>المنتج</th>

                      <th>السعر</th>

                    </tr>

                  </thead>

                  <tbody>

                    <tr>

                      <td>حاسوب محمول</td>

                      <td>$800</td>

                    </tr>

                  </tbody>

                  <tfoot>

                    <tr>

                      <td>المجموع</td>

                      <td>$800</td>

                    </tr>

                  </tfoot>

                </table>
            

تذييل مع أنماط CSS

                <table>

                  <tfoot style="background-color: #f2f2f2; font-weight: bold;">

                    <tr>

                      <td>الإجمالي</td>

                      <td>$1500</td>

                    </tr>

                  </tfoot>

                </table>
            

استخدامات متقدمة

دمج الخلايا في التذييل

                <table border="1">

                  <tfoot>

                    <tr>

                      <td colspan="2">هذه خلية مدمجة عبر عمودين</td>

                    </tr>

                  </tfoot>

                </table>
           

تذييل متعدد الصفوف

                <table>

                  <tfoot>

                    <tr>

                      <td>المجموع الفرعي</td>

                      <td>$1200</td>

                    </tr>

                    <tr>

                      <td>الضريبة (15%)</td>

                      <td>$180</td>

                    </tr>

                    <tr>

                      <td>الإجمالي</td>

                      <td>$1380</td>

                    </tr>

                  </tfoot>

                </table>
            

أفضل الممارسات

• استخدم <tfoot> للملخصات: مثل المجاميع أو المتوسطات
• تجنب وضع بيانات أساسية هنا: احتفظ بها في <tbody>
• استخدم مع <thead> و <tbody>: لتحسين التنظيم
• اجعل التذييل واضحًا: استخدم أنماط مختلفة لتمييزه
• تحسين إمكانية الوصول: استخدم aria-label لوصف محتوى التذييل

الخلاصة

عنصر <tfoot> هو جزء أساسي من هيكل الجداول المنظمة، ويوفر مكانًا مخصصًا لملخصات البيانات، تحسينًا لتنظيم الجدول، تحسين إمكانية الوصول ومرونة في التنسيق والعرض.

كيف كان المقال؟