‎تگ رديف جدولHTML <tr> Tag -‎

Previous >    <Next  

‎تگtr كه ازtable row گرفته شده است، تگي است كه براي تعريف سطري از جدول در درون ‎تگtable قرار ميگيرد .تگهايth ياtd براي ايجاد سلولهاي جدول در داخلtr تگ ايجاد ميشوند .

‎مثال ـ جدول سادهHTML باسه سطر، يك سطرهدر ودوسطرداده 

<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>

--(go to editor for change code and run)

‎تعريف وكاربردDefinition and Usage

‎تگ‎<tr>‎ يك سطر براي جدولHTML تعريف مي نمايد. عنصرفوق محفط ايست كه ‎كه يا چند عنصر‎<td> , <th>‎ را شامل ميشود .

‎پشتيباني مرورگرBrowser Support -‎

Element Chorome Edge Firefox Safari Opera
<tr> Yes Yes Yes Yes Yes

‎ويژگي هاي جهانيGlobal Attributes -‎

‎تگ‎<tr>‎ از ويژگي هاي جهانيHTML پيروي ميكند.

‎ويژگي هاي رويداديEvent Attributes -‎

‎تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.

‎مثالهاي بيشتر

‎مثال ـ تراز محتوي عناصر‎<tr>‎ با CSS 

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

--(go to editor for change code and run)

‎تنظيم رنگ زمينه سطر جدول باCSS 

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

--(go to editor for change code and run)

‎مثال ـ تراز عمودي عناصر محتوي‎<tr>‎ با CSS 

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

--(go to editor for change code and run)

‎مثال ـ ايجاد هدر در جدولHTML 

<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>

--(go to editor for change code and run)

‎در مثال فوق دو جدول ايجاد ميشود، جدول اول دارا هدرافقي و جدول دوم داراي هدرعمودي.

‎مثال ـ ايجاد جدولHTML با عنوان 

<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>

--(go to editor for change code and run)

‎مثال ـ مجتمع كردن سلولها جدول در سطر وستون

<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>

--(go to editor for change code and run)

‎تنظيمات پيش فرضDefault CSS Settings -‎

‎اغلب مرورگرها نمايش عنصر‎<tr>‎ مطابق تنظيمات پيش فرضي زيرانجام ميدهند. 

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

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

Previous >    <Next