تسمية <tfoot> في HTML

  • الصفحة السابقة <textarea>
  • الصفحة التالية <th>

التعريف والاستخدام

<tfoot> العلامة تستخدم لتجميع محتويات قدم الصندوق في صندوق HTML.

<tfoot> العنصر مع <thead> و <tbody> العناصر المدمجة لتحديد كل جزء من الصندوق (قدم، رأس، نص).

يمكن للمتصفح استخدام هذه العناصر لجعل رأس الصندوق وقدم الصندوق يظهر بشكل مستقل عند تمرير الصندوق. بالإضافة إلى ذلك، عند طباعة صندوق كبير يتجاوز الصفحات، يمكن لهذه العناصر جعل رأس الصندوق وقدم الصندوق يطبعان في أعلى وأسفل كل صفحة.

ملاحظة: يجب أن يحتوي العنصر <tfoot> على عنصر أو أكثر <tr> العلامة.

<tfoot> العلامة يجب استخدامها في السياق التالي: كـ <table> العناصر الفرعية للعنصر، في أي <caption>و<colgroup>و<thead> و <tbody> بعد العنصر.

إشارة:بافتراض الصندوق، <thead>، <tbody> و <tfoot> العناصر لا تؤثر على تصميم الصندوق. ولكن يمكنك استخدام CSS لتعيين أنماط هذه العناصر (انظر الأمثلة أدناه)!

مثال

مثال 1

صندوق HTML يحتوي على عناصر <thead>، <tbody> و <tfoot>:

<table>
  <thead>
    <tr>
      <th>الشهر</th>
      <th>ادخار</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>يناير</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>شهر فبراير</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

جربها بنفسك

مثال 2

استخدام CSS لضبط أنماط <thead>، <tbody> و <tfoot>:

<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>الشهر</th>
      <th>ادخار</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>يناير</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>شهر فبراير</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

جربها بنفسك

مثال 3

كيفية التوجيه <tfoot> المحتوى الموجود (استخدام CSS):

<table style="width:100%">
  <tr>
    <th>الشهر</th>
    <th>ادخار</th>
  </tr>
  <tr>
    <td>يناير</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>شهر فبراير</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

جربها بنفسك

مثال 4

كيفية التوجيه العمودي <tfoot> المحتوى الموجود (استخدام CSS):

<table style="width:100%">
  <tr>
    <th>الشهر</th>
    <th>ادخار</th>
  </tr>
  <tr>
    <td>يناير</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>شهر فبراير</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>المجموع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

جربها بنفسك

خصائص العالمية

<tfoot> يدعم العنصر خصائص العالمية في HTML.

خصائص الحدث

<tfoot> يدعم العنصر خصائص الحدث في HTML.

إعدادات CSS الافتراضية

معظم المتصفحات ستعرض القيم التالية كقيم افتراضية <tfoot> العنصر:

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <textarea>
  • الصفحة التالية <th>