HTML الوسم <tbody>

تعريفه

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

معلومة تقنية

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

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

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

خصائصه

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

إستخدامه

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

جرب الكود

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

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

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