شرح العنصر (tr) في لغة HTML

الشرح الشامل لعنصر <tr> في HTML

HTML

مقدمة عن عنصر <tr>

عنصر <tr> (اختصارًا لـ Table Row أو صف الجدول) هو أحد العناصر الأساسية المستخدمة في بناء الجداول HTML. هذا العنصر يُستخدم لإنشاء صف (سطر) في جدول HTML، ويحتوي عادةً على واحد أو أكثر من عناصر <td> (خلايا البيانات) أو <th> (خلايا العناوين).

البنية الأساسية

<table>

              <tr>

                <td>بيانات الخلية 1</td>

                <td>بيانات الخلية 2</td>

              </tr>

            </table>
    

السمات (Attributes) الخاصة بـ <tr>

السمات العامة

• align: محاذاة المحتوى (left, center, right, justify, char)
• valign: محاذاة رأسية (top, middle, bottom, baseline)
• bgcolor: لون خلفية الصف (غير موصى به في HTML5)
• style: تطبيق أنماط CSS مباشرة

سمات HTML5

• hidden: إخفاء الصف
• class: تحديد فئة للتصميم
• id: معرف فريد للصف
• data-*: سمات بيانات مخصصة

أمثلة عملية

جدول بسيط

 <table border="1">

              <tr>

                <th>الاسم</th>

                <th>العمر</th>

              </tr>

              <tr>

                <td>أحمد</td>

                <td>25</td>

              </tr>

            </table>

صف مع أنماط CSS

 <table>

              <tr style="background-color: #f2f2f2; font-weight: bold;">

                <td>المنتج</td>

                <td>السعر</td>

              </tr>

              <tr>

                <td>حاسوب محمول</td>

                <td>$800</td>

              </tr>

            </table>

صف مع سمة data-*

 <table>

              <tr data-category="electronics">

                <td>هاتف ذكي</td>

                <td>$500</td>

              </tr>

            </table>

استخدامات متقدمة

تجميع الصفوف

يمكن استخدام <thead>, <tbody>, و <tfoot> لتنظيم الصفوف:

   <table>

              <thead>

                <tr>

                  <th>العنوان 1</th>

                  <th>العنوان 2</th>

                </tr>

              </thead>

              <tbody>

                <tr>

                  <td>بيان 1</td>

                  <td>بيان 2</td>

                </tr>

              </tbody>

            </table>

دمج الخلايا

يمكن دمج خلايا في الصف باستخدام colspan و rowspan:

    <table border="1">

              <tr>

                <td colspan="2">خليتين مدمجتين أفقيًا</td>

              </tr>

              <tr>

                <td rowspan="2">خليتين مدمجتين عموديًا</td>

                <td>بيان 1</td>

              </tr>

              <tr>

                <td>بيان 2</td>

              </tr>

            </table>

الصفوف المتبادلة الألوان (Zebra Striping)

<style>

              tr:nth-child(even) {background: #f2f2f2}

              tr:nth-child(odd) {background: #fff}

            </style>


            <table>

              <tr><td>صف 1</td></tr>

              <tr><td>صف 2</td></tr>

              <tr><td>صف 3</td></tr>

            </table>

أفضل الممارسات

• استخدم <th> للعناوين: بدلاً من <td> مع أنماط نص غامق
• تجنب السمات القديمة: مثل bgcolor و align واستخدم CSS بدلاً منها
• أضف <thead> و <tbody>: لتحسين تنظيم الجدول وإمكانية الوصول
• استخدم scope في <th>: لتحديد ما إذا كان العنوان لعمود أو صف
• تأكد من إمكانية الوصول: استخدم aria-label أو aria-describedby عند الحاجة

التوافق مع المتصفحات

عنصر <tr> مدعوم في جميع المتصفحات الحديثة والقديمة، بما في ذلك:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

أداء <tr>

عند العمل مع جداول كبيرة:

• تجنب عدد كبير جدًا من الصفوف (أكثر من 1000 صف)
• استخدم التقسيم (Pagination) للبيانات الكبيرة
• فكر في استخدام <div> مع CSS للتصميمات المعقدة جدًا

استخدام <tr> مع JavaScript

يمكنك التعامل مع الصفوف باستخدام JavaScript:

  // إضافة صف جديد

            let table = document.getElementById("myTable");

            let row = table.insertRow(0); // إدراج في البداية

            let cell1 = row.insertCell(0);

            let cell2 = row.insertCell(1);

            cell1.innerHTML = "بيان جديد";

            cell2.innerHTML = "بيان آخر";


            // حذف صف

            table.deleteRow(0);

استخدام <tr> مع CSS

يمكنك تنسيق الصفوف باستخدام CSS:

  tr {

              border-bottom: 1px solid #ddd;

              transition: background-color 0.3s ease;

            }


            tr:hover {

              background-color: #f5f5f5;

            }


            tr.highlight {

              background-color: #ffeb3b;

            }

إمكانية الوصول (Accessibility)

لتحسين إمكانية الوصول:

• استخدم <th scope="col"> أو <th scope="row"> للعناوين
• أضف <caption> لوصف الجدول
• استخدم aria-label لوصف الصفوف المعقدة

 <table aria-label="مواعيد الاجتماعات">

              <caption>جدول مواعيد الاجتماعات الأسبوعية</caption>

              <tr>

                <th scope="col">اليوم</th>

                <th scope="col">الوقت</th>

              </tr>

            </table>

الخلاصة

عنصر <tr> هو لبنة أساسية في بناء الجداول HTML، ويجب فهمه جيدًا لأي مبرمج ويب. عند استخدامه بشكل صحيح مع عناصر الجدول الأخرى (<table>, <td>, <th>, إلخ) ومع CSS وJavaScript، يمكنك إنشاء جداول غنية بالوظائف وسهلة الاستخدام.

كيف كان المقال؟