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;
}

با این تنظیمات، می‌توانید تراز افقی و عمودی محتوای جدول را به دلخواه تنظیم کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.