تراز افقی
خاصیت 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;
}با این تنظیمات، می‌توانید تراز افقی و عمودی محتوای جدول را به دلخواه تنظیم کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام