آموزش تراز کردن جدول در CSS

تراز کردن افقی(horizontal)

ویژگی text-align به صورت افقی(left یا right یا center) محتوای درون <th> یا <td> را در جدول تراز می کند. به طور پیش فرض، محتوای عناصر <th> در وسط(center-aligned) تراز می شوند و محتوای عناصر <td> در سمت چپ(left-aligned) تراز می شوند. برای تراز کردن محتوای عنصر <td> در وسط، می توانیم از دستور text-align: center استفاده کنیم:

td {
  text-align: center;
}

 برای چپ چین(left-align) کردن محتوای جدول، برای عناصر <th> و <td> ویژگی text-align: left را تنظیم کنید:

th {
  text-align: left;
}
td {
  text-align: left;
}

تراز عمودی(Vertical) در جدول

ویژگی vertical-align تراز عمودی(top و bottom یا middle) را برای محتوای عناصر <th> و <td> در جدول، مشخص می کند. به طور پیش فرض، تراز عمودی برای محتوای یک جدول،برای هردوی عناصر <th> و <td> در وسط(middle) قرار دارد. در مثال زیر، تراز عمودی متن، برای عناصر <td> روی bottom قرار دارد:

td {
  height: 50px;
  vertical-align: bottom;
}