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 - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

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

نظرات

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

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