سر ستون جدول (th)
سر ستون جدول (Table Header) با تگ th عنوان ستون را نشان می دهد. معمولاً متن آن بولد و وسط چین است. مثل تیتر «ماه» بالای نمره ها.
تعریف سر ستون جدول (th)
جدول دو نوع سلول دارد: سلول عنوان با th و سلول داده با td. به شکل پیش فرض، متن th بولد و وسط چین است. اما متن td معمولی و چپ چین است.
مثال 1: جدول ساده با th
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
مثال 2: تراز متن در th با CSS
<table style="width:100%;">
<tr>
<th style="text-align:left;">Month</th>
<th style="text-align:left;">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
مثال 3: رنگ پس زمینه برای th
<table>
<tr>
<th style="background-color:#FF0000;">Month</th>
<th style="background-color:#00FF00;">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
مثال 4: عرض ستون های عنوان
<table style="width:100%;">
<tr>
<th style="width:70%;">Month</th>
<th style="width:30%;">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
مثال 5: سر ستون ترکیبی با colspan
<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>
تمرین گام به گام
- یک جدول بساز و ردیف عنوان را با th بنویس.
- داده ها را در سطرهای td اضافه کن.
- با CSS تراز و رنگ th را تنظیم کن.
نکته: برای عنوان های ساختاری، از thead کمک بگیر. همچنین برای جمع بندی از tfoot استفاده کن. ارتباط th با td را روشن نگه دار.
جمع بندی سریع
- th عنوان ستون را نمایش می دهد.
- th پیش فرض بولد و وسط چین است.
- td داده های معمولی را نگه می دارد.
- تراز و رنگ را با CSS تغییر بده.
- برای گروه بندی از thead و tfoot کمک بگیر.