HTML الوسم <tr>

تعريفه

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

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

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

خصائصه

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

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 3 أسطر و كل سطر فيه 3 خانات.

<table>
	<!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين -->
	<tr>
		<th>ID</th>
		<th>User</th>
		<th>Phone</th>
	</tr>
	<!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية -->
	<tr>
		<td>1</td>
		<td>mhamad</td>
		<td>70123456</td>
	</tr>
	<!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية -->
	<tr>
		<td>2</td>
		<td>mira</td>
		<td>03102013</td>
	</tr>
</table>
		

جرب الكود

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

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

tr {
	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
}
	

نصائح و ملاحظات

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

في المثال التالي قمنا بتغيير لون خلفية الأسطر المفردة إلى رمادي و الأسطر المزدوجة إلى أبيض.

tr:nth-child(odd) {
	background-color: #f1f1f1;
}
tr:nth-child(even) {
	background-color: #fff;
}
		

جرب الكود