❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux 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>
جرب الكود

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

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

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;
}
جرب الكود