❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <tbody>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي

تعريفه

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


معلومة تقنية

في العادة عند تجميع سطر في الجدول أو بعض أسطره داخل هذا الوسم فإننا نقوم بتجميع باقي الأسطر بداخل وسوم أخرى هي الوسم <thead> الذي نضع فيه السطر أو الأسطر التي تعتبر بمثابة عناوين فيه, و الوسم <tfoot> الذي نضع فيه السطر أول الأسطر التي نضعها في آخره في حال كنا سنعرض نتائج فيها.

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

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

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 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>
<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>

جرب الكود

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

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

tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }
عودة للدرس❯ ❮عودة للدرس