تگ td در html

تگ td (Table Data) برای تعریف سلول‌های داده در جدول HTML استفاده می‌شود. این سلول‌ها در سطرهای <tr> قرار می‌گیرند و محتوای اصلی جدول مانند متن، عدد، تصویر یا حتی عناصر HTML دیگر را در خود جای می‌دهند.

برای اضافه کردن داده به جدول، از <td> داخل هر <tr> استفاده می‌کنیم. می‌توان ویژگی‌های colspan و rowspan را برای گسترش سلول افقی یا عمودی به کار برد.

<table border="1">
  <tr>
    <th>نام</th>
    <th>شغل</th>
  </tr>
  <tr>
    <td>مریم</td>
    <td>طراح وب</td>
  </tr>
  <tr>
    <td colspan="2">متن سرتاسر ستون</td>
  </tr>
</table>

تعداد ستون‌هایی را که سلول باید عرض آن‌ها را پوشش دهد مشخص می‌کند.

<td colspan="3">این سلول سه ستون را پوشش می‌دهد</td>

تعداد سطرهایی را که سلول باید در آن‌ها امتداد یابد مشخص می‌کند.

<td rowspan="2">دو سطر را پوشش می‌دهد</td>

لیستی از شناسه‌های <th>های مرتبط با این سلول را مشخص می‌کند تا دسترس‌پذیری و ارتباط معنایی حفظ شود.

<td headers="th-name th-job">متن نمونه</td>

شکل کوتاه‌شده یا مخفف محتوای سلول را برای ابزارهای کمکی (screen readers) مشخص می‌کند.

<td abbr="سن کارمند<"30</td>

تگ <td> از ویژگی‌های عمومی HTML مانند id، class، style و title پشتیبانی می‌کند.

رویدادهایی مانند onclick، onmouseover و onmouseout می‌توانند به <td> اضافه شوند.

مرورگرها به‌صورت پیش‌فرض سلول‌های داده را به شکل زیر نمایش می‌دهند:

td {
  display: table-cell;
  padding: 1px 5px;
  vertical-align: top;
}