HTML <tr> علامة

  • الصفحة السابقة <title>
  • الصفحة التالية <track>

التعريف والاستخدام

<tr> العنصر يحدد صف الجدول في HTML.

<tr> العنصر يحتوي على إحدى أو أكثر من <th> أو <td> العنصر.

انظر أيضًا:

دليل تعليمات HTML:HTML جدول

دليل مرجع HTML DOM:مفهوم TableRow

دليل تعليمات CSS:إعداد تنسيق الجدول

مثال

مثال 1

جدول بسيط من ثلاثة أسطر HTML؛ صف عنوان وصفبان بيانات:

<table>
  <tr>
    <th>الشهر</th>
    <th>المكسب</th>
  </tr>
  <tr>
    <td>يناير</td>
    <td>3400 ¥</td>
  </tr>
  <tr>
    <td>فبراير</td>
    <td>4500 ¥</td>
  </tr>
</table>

جرب بنفسك

مثال 2

كيفية تحديد التوجيه: <tr> المحتوى الموجود (استخدام CSS):

<table style="width:100%">
  <tr>
    <th>الشهر</th>
    <th>المكسب</th>
  </tr>
  <tr style="text-align:right">
    <td>يناير</td>
    <td>3400 ¥</td>
  </tr>
</table>

جرب بنفسك

مثال 3

كيفية إضافة لون الخلفية إلى صف الجدول (استخدام CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>الشهر</th>
    <th>المكسب</th>
  </tr>
  <tr>
    <td>يناير</td>
    <td>3400 ¥</td>
  </tr>
 </table>

جرب بنفسك

مثال 4

كيفية تحديد التثبيت العمودي: <tr> المحتوى الموجود (استخدام CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>الشهر</th>
    <th>المكسب</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>يناير</td>
    <td>3400 ¥</td>
  </tr>
</table>

جرب بنفسك

مثال 5

كيفية إنشاء عنوان الجدول:

<table>
  <tr>
    <th>الاسم</th>
    <th>البريد الإلكتروني</th>
    <th>الهاتف</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

جرب بنفسك

مثال 6

كيفية إنشاء جدول يحتوي على عناوين:

<table>
  <caption>المدخرات شهريًا</caption>
  <tr>
    <th>الشهر</th>
    <th>المكسب</th>
  </tr>
  <tr>
    <td>يناير</td>
    <td>3400 ¥</td>
  </tr>
  <tr>
    <td>فبراير</td>
    <td>4500 ¥</td>
  </tr>
</table>

جرب بنفسك

مثال 7

كيفية تعريف خلية جدول تتجاوز سطرين أو عمودين:

<table>
  <tr>
    <th>الاسم</th>
    <th>البريد الإلكتروني</th>
    <th colspan="2">هاتف</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

جرب بنفسك

خصائص العالمية

<tr> يدعم العلامة خصائص العالمية في HTML.

خصائص الحدث

<tr> يدعم العلامة خصائص الحدث في HTML.

إعدادات CSS الافتراضية

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <tr> العنصر:

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <title>
  • الصفحة التالية <track>