سلول جدول (td)
تگ «td» یک «سلول جدول (Table Cell)» معمولی می سازد. اینجا داده های خام می آیند. برای عنوان ها از «th» استفاده کن. عبارت «سلول جدول td» را یادت باشد.
تعریف و کاربرد ساده
«td» یعنی خانه داده. «th» یعنی خانه عنوان. پیش فرضِ «td» متن معمولی و چپ چین است. پیش فرضِ «th» متن بولد و وسط چین است.
سلول ها داخل سطر «tr» قرار می گیرند. سپس همه سطرها داخل «table» می آیند. برای آشنایی بیشتر، به جدول (table) و سطر جدول (tr) سر بزن.
مثال پایه: دو سطر و چهار سلول
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
تراز متن داخل 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>
رنگ پس زمینه سلول
<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>
تعیین ارتفاع سلول
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="height:100px;">January</td>
<td style="height:100px;">$100</td>
</tr>
</table>
جلوگیری از شکستن کلمات
<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>
تراز عمودیِ محتوا
<table style="width:50%;">
<tr style="height:100px;">
<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>
عرض سلول ها با درصد
<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>
ادغام سلول ها با colspan/rowspan
<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>
مقادیر پیش فرض CSS برای td
td {
display: table-cell;
vertical-align: inherit;
}
نکته: برای عنوان ستون ها از سلول عنوان (th) استفاده کن. همچنین ویژگی های colspan و rowspan ادغام سلول ها را انجام می دهند.
جمع بندی سریع
- td خانه داده جدول است.
- th برای عنوان و وسط چین پیش فرض است.
- تراز و رنگ را با CSS بده.
- colspan و rowspan سلول ها را ادغام می کنند.
- td ها داخل tr می آیند.