HTML/tr

يُعرِّف العنصر <tr> سطرًا يحتوي على خلايا في جدول، وهذه الخلايا تُمثَّل عبر العنصرين <td> و <th>.

مثال عن جدول بسيط فيه سطرين وعمودين (عبر عناصر <tr> و <td>):

<table>
  <tr>
    <td>الخلية الأولى في السطر الأول</td>
    <td>الخلية الثانية في السطر الأول</td>
  </tr>
  <tr>
    <td>الخلية الأولى في السطر الثاني</td>
    <td>الخلية الثانية في السطر الثاني</td>
  </tr>
</table>

راجع صفحة العنصر <table> لمزيدٍ من الأمثلة.

بطاقة العنصر

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	صفر مرة أو أكثر من العنصرين <td> أو <th>، أو خليطٌ بينهما.
الوسم المختصر	لا يجوز أن يُحذَف وسم البداية. يمكن حذف وسم النهاية للعنصر <tr> إذا أتى وارءه مباشرةً عنصر <tr>، أو إذا لم يعد هنالك محتوى آخر في العنصر الأب (<thead> أو <tbody> أو <tfoot>).
العناصر الأب	العناصر <table> أو <thead> أو <tbody> أو <tfoot>.
واجهة DOM	HTMLTableRowElement

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

align

تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة كل خلية، وتقبل إحدى القيم الآتية:

• left: عرض المحتوى على يسار الخلية
• center: توسيط المحتوى في الخلية
• right: عرض المحتوى على يمين الخلية
• justify: عرض المحتوى ملء السطر.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS، عبر إسناد إحدى القيم left أو center أو right أو justify إلى الخاصية text-align.

bgcolor

تُعرِّف هذه الخاصية لون الخلفية لكل خلية في السطر، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام sRGB، ويسبقها المحرف #. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:

	black = "#000000"		green = "#008000"
	silver = "#C0C0C0"		lime = "#00FF00"
	gray = "#808080"		olive = "#808000"
	white = "#FFFFFF"		yellow = "#FFFF00"
	maroon = "#800000"		navy = "#000080"
	red = "#FF0000"		blue = "#0000FF"
	purple = "#800080"		teal = "#008080"
	fuchsia = "#FF00FF"		aqua = "#00FFFF"

يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <tr> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام الخاصية background-color.

valign

تُستخدم هذه الخاصية لتحديد كيف تكون المحاذاة الرأسية كل خلية من السطر، وتقبل إحدى القيم الآتية:

• baseline: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية، لكن ستكون المحاذاة على خط الأساس (baseline) للمحارف بدلًا من أسفلها، ولو كان للمحارف نفس الحجم فسيكون لهذه القيمة نفس تأثير القيمة bottom.
• bottom: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية.
• middle: توسيط النص في الخلية رأسيًا.
• top: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية vertical-align.

مثال

مثال بسيط

المثال البسيط الآتي يُظهِر جدولًا فيه أسماء لطلّاب مع بعض المعلومات الأخرى عنهم.

شيفرة HTML الآتية تظهر أبسط بنية للجدول، إذ لا توجد مجموعات أو خلايات تمتد على أكثر من سطر أو عمود، ولا عنوان للجدول، ولا يحتوي إلا على أربعة أسطر (بما فيها سطر الترويسة)، وكل سطر فيه أربعة أعمدة:

  <table>
    <tr>
      <th>الاسم</th>
      <th>الرقم الجامعي</th>
      <th>تاريخ التسجيل</th>
      <th>المعدل</th>
    </tr>
    <tr>
      <td>بشير</td>
      <td>16464</td>
      <td><time datetime="2012-07-01">تموز، 2012</time></td>
      <td>82.5</td>
    </tr>
    <tr>
      <td>حسام</td>
      <td>17464</td>
      <td><time datetime="2012-05-01">أيار، 2013</time></td>
      <td>75.2</td>
    </tr>      
    <tr>
      <td>جميل</td>
      <td>16267</td>
      <td><time datetime="2012-08-01">آب 2012</time></td>
      <td>83.2</td>
    </tr>      
  </table>

سنضيف شيفرة CSS بسيطة لإضافة إطار border إلى الجدول والخلايا:

table {
  border: 1px solid black;
}

th, td {
  border: 1px solid black;
}

امتداد الأعمدة والخلايا

إذا أردنا إضافة عمود لتاريخ التسجيل وآخر لتاريخ التخرج، وأردنا أن يكونا تحت العنوان الرئيسي «الحياة الجامعية»، فسنحتاج إلى إنشاء خلايا تمتد على أكثر من خلية واحدة.

أي سيكون الجدول على الشكل الآتي:

الاسم	الرقم الجامعي	الحياة الجامعية		المعدل
		تاريخ التسجيل	تاريخ التخرج
بشير	16464	تموز، 2012	آب، 2017	82.5
...	...	...	...	...

شيفرة HTML ستكون شبيهةً بالشيفرة السابقة، لكننا سنضيف الخاصية rowspan و colspan لجعل الخلايا تمتد على أكثر من سطر أو عمود، وسنضيف ترويسة «تاريخ التسجيل» و «تاريخ التخرج»:

<table>
  <tr>
    <th rowspan="2">الاسم</th>
    <th rowspan="2">الرقم الجامعي</th>
    <th colspan="2">الحياة الجامعية</th>
    <th rowspan="2">المعدل</th>
  </tr>
  <tr>
    <th>تاريخ التسجيل</th>
    <th>تاريخ التخرج</th>
  </tr> 
  <tr>
    <td>بشير</td>
    <td>16464</td>
    <td><time datetime="2012-07-01">تموز، 2012</time></td>
    <td><time datetime="2017-08-01">آب، 2017</time></td>
    <td>82.5</td>
  </tr>
  <tr>
    <td>حسام</td>
    <td>17464</td>
    <td><time datetime="2012-05-01">أيار، 2013</time></td>
    <td>لم يتخرج بعد</td>
    <td>75.2</td>
  </tr>      
  <tr>
    <td>جميل</td>
    <td>16267</td>
    <td><time datetime="2012-08-01">آب 2012</time></td>
    <td><time datetime="2017-11-01">تشرين الثاني، 2017</time></td>
    <td>83.2</td>
  </tr>      
</table>

لاحظ أنَّنا استخدمنا الخاصية rowspan لجعل خلايا الاسم والرقم الجامعي والمعدل تمتد على سطرين بدلًا من سطرٍ واحد؛ واستخدمنا الخاصية colspan لجعل خلية الحياة الجامعية تمتد على عمودين.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <tr> مع ضبط الخاصية display إلى table-row ووراثة القيم للخاصيتين vertical-align و border-color:

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

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.