CSS – تراز جداول (Table Alignment)
آخرین بروزرسانی:
تراز افقی
خاصیت text-align
تراز افقی محتوای داخل <th>
یا <td>
را تنظیم میکند (مانند چپ، راست یا وسط).
به طور پیشفرض، محتوای عناصر <th>
در وسط تراز شده و محتوای عناصر <td>
در سمت چپ تراز شده است.
مثال: تراز کردن محتوای <td>
در وسط
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
td {
text-align: center;
}
مثال: تراز کردن محتوای <th>
به سمت چپ
برای تراز کردن محتوای <th>
به سمت چپ، از text-align: left
استفاده کنید.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
th {
text-align: left;
}
تراز عمودی
خاصیت vertical-align
تراز عمودی محتوای داخل <th>
یا <td>
را تنظیم میکند (مانند بالا، پایین یا وسط).
به طور پیشفرض، تراز عمودی محتوای یک جدول در وسط است (برای هر دو عنصر <th>
و <td>
).
مثال: تراز کردن محتوای <td>
به سمت پایین
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
</table>
td {
height: 50px;
vertical-align: bottom;
}
با این تنظیمات، میتوانید تراز افقی و عمودی محتوای جدول را به دلخواه تنظیم کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام