تگ td در HTML

در این مقاله با تگ td در HTML آشنا می شوید.

نکات اصلی تگ td در HTML

• <td> مخفف داده های جدول است. با استفاده از آن ، می توانید یک سلول را در جدول تعریف کنید که حاوی داده های خاصی باشد.
• برای اینکه سلول های شما در یک ردیف باقی بمانند ، عناصر td باید در همان جفت تگ <tr> قرار بگیرند.
• تگ های tr می توانند هر تعداد تگ td در HTML را در خود جای دهند.
• بیشتر ویژگی های تگ td در HTML5 منسوخ شده است.

تعریف Table data

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

<table>
  <tr>
    <td style="border: 0.5px #333 solid;">First table cell</td>
    <td style="border: 0.5px #333 solid;">Second table cell</td>
  </tr>
</table>

ویژگی های تگ td که بیشتر مورد استفاده قرار می گیرند

برای تغییر عنصر td در HTML می توانید از سه ویژگی استفاده کنید:

• کلسپان
• سرصفحه ها
• قایق ردیف

colspan تعداد ستون های یک سلول را مشخص می کند:

<tr> 
  <td colspan="3">Apples are very good for your health</td>
</tr>

headers رابطه با عناصر هدر را نشان می دهد:

<tr>
  <td headers="fruit">Apple</td>
  <td headers="vitamins">C, E, B3</td>
  <td headers="color">Red, Green</td>
</tr>

rowspan تعریف می کند که یک عنصر باید چند ردیف داشته باشد:

<tr>
  <td>Apple</td>
  <td rowspan="3">C, E, B3</td>
  <td>Red, Green</td>
</tr>

ویژگی های منسوخ شده تگ td

برخی از صفات HTML td در HTML4 منسوخ شده و کاملاً در HTML5 حذف شده اند. با آن ها آشنا شوید ، اما از آن ها در کدهای خود استفاده نکنید.

متن تراز شده را با تراز انتخاب شده تراز کنید:

<tr>
   <td align="left">Align: left</td>
   <td align="center">Align: center</td>
   <td align="right">Align: right</td>
   <td align="justify">Align: justify</td>
   <td align="char">Align: char</td>
</tr>

توجه: به جای تراز کردن ، از ویژگی CSS-align استفاده کنید.

abbr ساخته شده روی صفحه متن را نشان می دهد محتوای عنصر:

<tr>
  <td>Car</td>
  <td abbr="vehicle">Audi</td>
</tr>
<tr>
  <td>Plane</td>
  <td abbr="plane">Boeing</td>
</tr>

bgcolor با استفاده از نام ، مقادیر RGB یا HEX اجازه تغییر رنگ پس زمینه را می دهد:

<tr>
  <td bgcolor="yellow">Background should be yellow</td>
  <td bgcolor="bisque">Background should be bisque</td>
</tr>

توجه: به جای bgcolor از ویژگی CSS-background background استفاده کنید.

axis یک نام دسته برای سلولها تعیین می کند:

<tr>
  <td axis="fruit">Apple</td>
  <td axis="internals">C, E, B3</td>
  <td axis="internals">Red, Green</td>
</tr>

ارتفاع سلول تعریف شده:

<tr>
 <td height="100">Apple</td>
  <td height="100">C, E, B3</td>
  <td height="100">Red, Green</td>
</tr>

توجه: به جای ارتفاع ، از ویژگی CSS height استفاده کنید.

char داده های جدول را در یک سلول با یک کاراکتر تراز می کند:

<tr>
  <td>Apple</td>
  <td char=",">C, E, B3</td>
  <td char=",">Red, Green</td>
</tr>

charoff اطلاعات را به سمت راست کاراکتر مشخص شده منتقل کرد:

<tr height="100">
  <td>Apple</td>
  <td align="char" charoff="2" char="," >C, E, B3</td>
  <td align="char" charoff="1" char="," >Red, Green</td>
</tr>

تراز کردن داده های جدول در یک سلول به صورت عمودی:

<tr height="100">
  <td valign="baseline">Apple</td>
  <td valign="bottom">C, E, B3</td>
  <td valign="top">Red, Green</td>
</tr>

توجه: به جای valign از ویژگی CSS vertical-align استفاده کنید.

nowrap بسته بندی متن را روی هیچ تنظیم کنید:

<table style="width: 10%;">
  <tr height="100">
    <td nowrap>Apples are very healthy</td>
    <td>Apples are very healthy</td>
  </tr>
</table>

توجه: به جای nowrap ، از ویژگی CSS white space استفاده کنید.

width td را تعریف کرد:

<table style="width: 100%;">
  <tr height="100">
    <td width="10%">Apples are very healthy</td>
    <td width="10px">Apples are very healthy</td>
    <td>Apples are very healthy</td>
  </tr>
</table>

توجه: برای تعریف عرض td از ویژگی CSS width استفاده کنید.

دامنه سلولهای خاصی را با عناوین خاص پیوند می دهد:

<table style="width: 100%;">
  <tr>
    <th scope="col">Apple</th>
    <th scope="col">Apple</th>
  </tr>
  <tr height="100%">
    <td scope="row">Apples are very healthy</td>
    <td scope="row">Apples are very healthy</td>
  </tr>
</table>

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

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.