Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <tr>

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

تعريفه

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

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

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

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 مدعوم مدعوم مدعوم

خصائصه

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

إستخدامه

في المثال التالي قمنا بإنشاء جدول يتألف من 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>
<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;
}
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;
}
tr:nth-child(odd) { background-color: #f1f1f1; } tr:nth-child(even) { background-color: #fff; }

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة