‎‎تگ بدنه جدولHTML <tbody> Tag -‎

Previous >    <Next  

‎‎مثال ـ يك جدول با عناصر‎<tbody> , <thead> , <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>

--(go to editor for change code and run)

‎‎تعريف وكاربردDefinition and Usage -‎

‎‎تگ‎<tbody>‎ براي گروه بندي محتوي بدنه جدول HTML مورد استفاده قرار ميگيرد .

‎تگ‎<tbody>‎ همراه تگهاي ‎<thead> , <tfoot>‎ در جدول براي ‎بدنه ، هدر وفوتر در هر قسمتي ميتوانند استفاده شوند.

‎مرورگرها ميتوانند ازاين عناصر براي فعال كردن پيمايش بدنه جدول مستقل ازهدر و پاورقي استفاده ‎كنند .همچنين هنگام چاپ يك جدول بزرگ كه چندين صفحه را در برميگيرد، اين عناصرميتوانند سرصفحه ‎وپاورقي را دربالا وپائين صفحه چاپ شوند.

‎

‎‎عنصر‎ نكته -‎<tbody>‎ بايد حداقل يك عنصر ‎<tr>‎در داخل داشته باشد .

‎تگ‎<tbody>‎ بايد بعنوان فرزند‎<table>‎ پس از تمام عناصر ‎<caption> ,<colgroup>‎‎و ‎<thead>‎ ظاهر شود .

‎

‎نكته ـ بصورت پيش فرض عناصر‎<tbody> , <thead> , <tfoot>‎ درطرح بندي جدول ‎تاثيري ندارد، اما ميتوان بااستفاده ازCSS استايل نمود .مشابه مثال بعدي .

‎‎پشتيباني مرورگرBrowser Support -‎

‎
‎Element‎ Chorome Edge Firefox Safari Opera
‎‎<tbody>‎‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<tbody>‎ از ويژگي هاي جهانيHTML پيروي ميكند.

‎‎ويژگي هاي رويداديEvent Attributes -‎

‎‎تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.

‎‎مثالهاي بيشتر

‎‎مثال ـ استايل نمودن بدنه ،هدر وفوتر جدول

‎ 
<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> 
</body>
</html>

--(go to editor for change code and run)

‎‎مثال ـ تراز كردن محتوي بدنه جدول باCSS

‎ 
<table style="width:100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

--(go to editor for change code and run)

‎‎مثال ـ تراز عمودي محتوي بدنه جدول

‎ 
<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tbody style="vertical-align:bottom">
    style="height:100px">
      <td>January</td>
      <td>$100</td>
    </tr>
    style="height:100px">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

--(go to editor for change code and run)

‎‎تنظيمات پيش فرضDefault CSS Settings -‎

‎‎اغلب مرورگرها نمايش عنصر‎<tbody>‎ مطابق تنظيمات پيش فرضي زيرانجام ميدهند.

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

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

Previous >    <Next