آموزش و يادگيري تگ td در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <td> آشنا مي‌شويم. اين تگ براي تعريف يک سلول داده در جدول استفاده مي‌شود و معمولاً داخل رديف‌ها (<tr>) قرار مي‌گيرد.

تگ td در HTML چيست؟

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

مثال ساده از تگ td

<table border="1">
  <tr>
    <td>علي</td>
    <td>25</td>
  </tr>
  <tr>
    <td>مينا</td>
    <td>30</td>
  </tr>
</table>

در اين مثال، هر <td> يک سلول داده در رديف جدول ايجاد مي‌کند.

ويژگي‌هاي مهم تگ td

ويژگي	توضيح
colspan	ادغام سلول‌ها در ستون‌ها
rowspan	ادغام سلول‌ها در رديف‌ها
align	تراز افقي محتوا (left, center, right)
valign	تراز عمودي محتوا (top, middle, bottom)
bgcolor	رنگ پس‌زمينه سلول

مثال ترکيبي با CSS

<style>
td {
  padding: 8px;
  text-align: center;
  border: 1px solid #333;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #d1e7ff;
}
table {
  border-collapse: collapse;
  width: 50%;
}
</style>

<table>
  <tr>
    <td>علي</td>
    <td>25</td>
  </tr>
  <tr>
    <td>مينا</td>
    <td>30</td>
  </tr>
</table>

با CSS مي‌توان ظاهر سلول‌ها را زيباتر و خواناتر کرد و افکت‌هايي براي هاور يا رنگ‌بندي رديف‌ها ايجاد نمود.