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>
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
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; }