برچسب <td> HTML

تعریف و استفاده

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

جدول‌های HTML دو نوع سلول دارند:

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

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

متن پیش‌فرض در عناصر <th> به صورت ایتالیک و در وسط قرار دارد.

لطفاً به: مراجعه کنید

آموزش HTML:جداول HTML

منابع HTML DOM:مجموعه داده‌های TableData

آموزش CSS:تنظیم استایل جدول

مثال

مثال 1

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

<table>
  <tr>
    <td> سلول A </td>
    <td> سلول B </td>
  </tr>
  <tr>
    <td> سلول C </td>
    <td> سلول D </td>
  </tr>
</table>

آزمایش کنید

مثال 2

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

<table style="width:100%">
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr>
    <td>اسفند</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>فروردین</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

آزمایش کنید

مثال 3

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

<table>
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">اسفند</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

آزمایش کنید

مثال 4

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

<table>
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr>
    <td style="height:100px">اسفند</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

آزمایش کنید

مثال 5

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

<table>
  <tr>
    <th>شعر</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">شعری از لی بائوژونگ، در میان ابرهای رنگارنگ سفید، هزار مایل از یوچین در یک روز بازمی‌گردد. صدای بوزین‌ها در دو ساحل متوقف نمی‌شود، قایق سبک از هزاران کوهستان عبور کرده است.</td>
  </tr>
</table>

آزمایش کنید

مثال 6

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

<table style="width:50%;">
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">اسفند</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

آزمایش کنید

مثال 7

چگونه عرض سلول‌های جدول را تنظیم کنیم (از طریق CSS):

<table style="width:100%">
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr>
    <td style="width:70%">اسفند</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

آزمایش کنید

مثال 8

چگونه عنوان جدول ایجاد کنیم:

<table>
  <tr>
    <th>نام</th>
    <th>ایمیل</th>
    <th>تلفن</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

آزمایش کنید

مثال 9

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

<table>
  <caption>پس‌انداز ماهانه</caption>
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr>
    <td>اسفند</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>فروردین</td>
    <td>￥4500</td>
  </tr>
</table>

آزمایش کنید

مثال 10

چگونه سلول‌های جدول را در چند خط یا چند ستون تعریف کنیم:

<table>
  <tr>
    <th>نام</th>
    <th>ایمیل</th>
    <th colspan="2">تلفن</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

آزمایش کنید

ویژگی

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

ویژگی‌های جهانی

<td> این برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.

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

<td> این برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های رویداد در HTML.

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

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

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی