تراز جدول در CSS (CSS Table Alignment)
در این صفحه با «تراز جدول در CSS» آشنا می شوید. ابتدا تراز افقی با text-align را می بینیم، سپس تراز عمودی با vertical-align را تمرین می کنیم تا محتوای td و th دقیق تر نمایش یابد.
تراز افقی سلول ها
ویژگی text-align محتوای درون th یا td را به چپ، راست یا وسط تراز می کند. به صورت پیش فرض، th وسط چین و td چپ چین است.
وسط چین کردن محتوای <td>
برای وسط چین کردن همه سلول های داده، قانون زیر را بنویسید:
td{ text-align:center; }چپ چین کردن محتوای <th>
اگر می خواهید عنوان ها چپ چین باشند، برای th مقدار left را اعمال کنید:
th{ text-align:left; }نکته: ابتدا قوانین تراز کلی را بنویسید، سپس استثناها را با سلکتورهای دقیق تر بازنویسی کنید.
تراز عمودی سلول ها
ویژگی vertical-align تراز عمودی متن را تعیین می کند. به صورت پیش فرض، تراز عمودی در جدول «میانی» است.
مثال: تراز عمودی پایین
در نمونه زیر، ابتدا ارتفاع سلول ها را مشخص می کنیم و سپس متن را پایین می چینیم:
td{ height:50px; vertical-align:bottom; }هشدار: مقدار vertical-align روی عناصر بلاکیِ عادی اثر ندارد؛ آن را برای سلول های جدول یا عناصر inline/inline-block به کار ببرید.
مسیر تکمیلی و «تراز جدول در CSS»
برای مرور اندازه و کادر جداول پس از یادگیری تراز جدول در CSS، این بخش ها را ببینید: اندازه جدول در CSS و کادر جدول در CSS. همچنین برای استناد، به مستندات رسمی مراجعه کنید: