برچسب <tr> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< مرجع HTML:تگ‌ها(تغییرمسیر از تگ tr)
پرش به ناوبری پرش به جستجو
یک ردیف را در یک جدول تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

یک جدول سادهٔ اچ‌تی‌ام‌ال، دارای دو ستون و دو ردیف:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

تعریف و کاربرد

برچسب <tr> یک ردیف را در یک جدول اچ‌تی‌ام‌ال تعریف می‌کند.[۱]

عنصر <tr> حاوی یک یا چند عنصر <th> یا | است.

پشتیبانی مرورگر

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<tr> بله بله بله بله بله

ویژگی‌های سراسری

همچنین برچسب <tr> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <tr> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

مثال‌های بیشتر

مثال

چگونه محتوای درون <tr> را تراز کنیم (با CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="text-align:right">
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


مثال

چگونه برای یک ردیف از جدول، رنگ پس‌زمینه اضافه کنیم (با CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
 </table>


مثال

چگونه محتوای درون <tr> را بصورت عمودی تراز کنیم (با CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


مثال

چگونه سرآمدهایی (headers) برای جدول ایجاد کنیم:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>123-45-678</td>
  </tr>
</table>


مثال

چگونه یک جدول با عنوان (caption) ایجاد کنیم:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


مثال

چگونه سلول‌های جدول را تعریف کنیم که به بیشتر از یک ردیف یا یک ستون گسترش یابند:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>


صفحات مرتبط

آموزش اچ‌تی‌ام‌ال: جدول‌های اچ‌تی‌ام‌ال (HTML Tables)

مرجع DOM اچ‌تی‌ام‌ال: شیء TableRow (TableRow object)

آموزش CSS: سبک‌دهی به جدول‌ها (Styling Tables)

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها عنصر <tr> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

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


منابع آموزشی