‎‎تگ سلول داده جدولHTML <td> Tag -‎

Previous >    <Next  

‎‎مثال ـ جدولي ساده با دوسطر وچهار سلول داده

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

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

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

‎‎تگ‎<td>‎ سلول داده استاندارد را در جدول HTML تعريف ميكند .

‎‎جدولHTML داراي دو نوع سلول ميباشد .

‎‎متن در عنصر‎<td>‎ معمولي و بصورت پيش فرض تراز سمت چپ است .

‎‎متن در عنصر‎<th>‎ پررنگ و در وسط سلول قرار ميگيرد .يعني تراز پيش فرض center

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

‎Element‎ Chorome Edge Firefox Safari Opera
‎‎<td>‎‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎

‎‎ويژگي هاAtttributes -‎

‎‎ويژگي ‎‎مقدار ‎‎شــرح
‎colspan‎ ‎‎number‎‎ ‎‎تعداد ستونهائيكه كه با يكي شوند مشخص ميكند.
‎headers‎ header_id‎‎ ‎‎يك يا چند سلول هدر رامشخص ميكند، كه سلول به آن مربوط است.
‎rowspan‎ number‎‎ ‎‎تعداد سطريكه بايد يكي شوند، مشخص ميكند.

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

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

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

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

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

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

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

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

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

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

td {
  display: table-cell;
  vertical-align: inherit;
}

‎‎مثال ـ تنظيم رنگ زمينه سلول داده در جدول

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

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

‎‎مثال ـ تنظيم ارتفاع سلول داده در جدول باCSS

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    style="height:100px">January</td>
    style="height:100px">$100</td>
  </tr>
</table> 

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

‎‎مثال ـ چگونه در سلول جدول هيچ كلمه را مشخص نكنيم.

<table>
  <tr>
    <th>Poem</th>
  </tr>
  <tr>
    style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table> 

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

‎‎مثال ـ تراز عمودي سلول داده جدول

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  style="height:100px">
    style="vertical-align:bottom">January</td>
    style="vertical-align:bottom">$100</td>
  </tr>
</table>

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

‎‎مثال ـ تنظيم عرض سلول داده در جدول

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    style="width:70%">January</td>
    style="width:30%">$100</td>
  </tr>
</table> 

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

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

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

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

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

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


Previous >    <Next