تراز جدول (Table Alignment)
می خواهی متن های جدولت مرتب باشند؟ «تراز افقی (text-align)» جهت چپ، راست یا وسط را می دهد. «تراز عمودی (vertical-align)» جای متن در بالا، وسط یا پایین سلول است. مثل ردیف کردن دفتر و کتاب روی میز.
تراز افقی با text-align
به طور پیش فرض، متن داخل «th» وسط چین و داخل «td» چپ چین است. می توانی این رفتار را عوض کنی. برای مرجع کامل، لینک تراز جدول را نگه دار.
وسط چین کردن محتوای td
برای وسط چین، مقدار «center» بده.
<style>
td {
text-align: center;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>پیتر</td>
<td>گریفین</td>
<td>$100</td>
</tr>
</table>
چپ چین کردن محتوای th
اگر می خواهی سربرگ ها چپ چین شوند، همین را بزن.
<style>
th {
text-align: left;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>لوئیس</td>
<td>گریفین</td>
<td>$150</td>
</tr>
</table>
تراز عمودی با vertical-align
برای بالا/وسط/پایین قرار دادن متن در سلول، از «vertical-align» استفاده کن. پیش فرض معمولاً «middle» است.
قرار دادن متن در پایین سلول
گاهی نیاز است متن کف سلول بنشیند.
<style>
td {
height: 50px;
vertical-align: bottom;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>جو</td>
<td>سوانسون</td>
<td>$300</td>
</tr>
</table>
نکته: اگر جدولت جای بدی می شکند، اول اندازه آن را در اندازه جدول بررسی کن؛ سپس مرزها را در مرزهای جدول مرتب کن. برای دسترسی سریع، لینک تراز جدول را بوکمارک کن.
گام های عملی
- تصمیم بگیر: وسط، چپ یا راست؟
- روی «td» یا «th»، مقدار «text-align» را تنظیم کن.
- برای بالا/پایین/وسط، «vertical-align» را روی «td/th» بگذار.
- در صورت نیاز، «height» سلول را تعیین کن.
جمع بندی سریع
- text-align جهت افقی متن است.
- vertical-align جهت عمودی متن است.
- th پیش فرض وسط چین، td چپ چین است.
- برای پایین چین، height و bottom را بگذار.