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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< مرجع HTML:تگ‌ها(تغییرمسیر از تگ td)
پرش به ناوبری پرش به جستجو
یک سلول را در یک جدول تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:display: table-cell; ,vertical-align: inherit;

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

مثال

یک جدول ساده HTML با دو ردیف در جدول:

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


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

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

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

یک جدول اچ‌تی‌ام‌ال دارای دو نوع سلول است:

  • سلول‌های سرآمد (header) - حاوی اطلاعات سرآمد هستند (با عنصر <th> ایجاد شده‌اند)
  • سلول‌های استاندارد - حاوی اطلاعات هستند (با عنصر <td> ایجاد شده‌اند)

متن درون <th> ضخیم (bold) بوده و به‌طور پیش‌فرض در مرکز قرار می‌گیرد.

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

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

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

ویژگی‌ها

ویژگی مقدار شرح
colspan number تعداد ستون‌هایی که یک سلول باید به آن‌ها گسترش یابد را مشخص می‌کند
headers header_id یک یا چند سلول سرآمد را که یک سلول به آن مربوط است مشخص می‌کند
rowspan number تعداد ردیف‌هایی که یک سلول باید به آن‌ها گسترش یابد را تنظیم می‌کند

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

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

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

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

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

مثال

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

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


مثال

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

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


مثال

چگونه ارتفاع یک سلول از جدول را تنظیم کنیم (با CSS):

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


مثال

چگونه عدم خط شکنی (word-wrapping) در یک سلول جدول را مشخص کنیم (با CSS):

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


مثال

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

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


مثال

چگونه پهنای یک سلول جدول را تنظیم کنیم (با CSS):

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


مثال

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

<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 اچ‌تی‌ام‌ال: شی TableData (TableData Object)

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

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

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

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


منابع آموزشی