HTML <td> سلول

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

<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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی