علامة HTML <tbody >
مثال
جدول HTML به عنصر <thead> و <tbody> و <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>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تُستخدم <tbody>
العلامة لتجميع محتوى النص في جدول HTML.
يتم <tbody>
استخدام العنصر بالاقتران مع عنصري <رأس> و <
قدم> لتحديد كل جزء من الجدول (نص ، رأس ، تذييل).
يمكن للمتصفحات استخدام هذه العناصر لتمكين التمرير في نص الجدول بشكل مستقل عن الرأس والتذييل. أيضًا ، عند طباعة جدول كبير يمتد على صفحات متعددة ، يمكن لهذه العناصر تمكين طباعة رأس الجدول وتذييله في أعلى وأسفل كل صفحة.
ملاحظة: يجب أن يحتوي <tbody>
العنصر على
علامة <tr> واحدة أو أكثر بداخله.
يجب <tbody>
استخدام العلامة في السياق التالي: بصفتك
عنصرًا فرعيًا لعنصر <table> ، بعد أي عناصر
<caption> و <colgroup> و
<thead> .
تلميح: لن تؤثر عناصر <رأس > <tbody>
و <قدم> على تخطيط الجدول افتراضيًا. ومع ذلك ، يمكنك استخدام CSS لتصميم هذه العناصر (انظر المثال أدناه)!
دعم المتصفح
Element | |||||
---|---|---|---|---|---|
<tbody> | Yes | Yes | Yes | Yes | Yes |
السمات العالمية
تدعم <tbody>
العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <tbody>
العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
النمط <رأس> و <جسم> و <قدم> باستخدام CSS:
<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>
مثال
كيفية محاذاة المحتوى داخل <tbody> (باستخدام 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>
مثال
كيفية محاذاة المحتوى عموديًا داخل <tbody> (باستخدام CSS):
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody style="vertical-align:bottom">
<tr
style="height:100px">
<td>January</td>
<td>$100</td>
</tr>
<tr
style="height:100px">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <tbody>
العنصر بالقيم الافتراضية التالية:
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}