CSS — جدول - اندازه (Table Size)

آخرین بروزرسانی: 1404/07/14

قبلی: جدول - کادرها (Table Borders) بعدی: جدول - تراز (Table Alignment)

اندازه جدول در CSS (CSS Table Size)

در این راهنما «اندازه جدول در CSS» را گام به گام می بینید؛ بنابراین با ویژگی های width و height کار می کنیم تا جدول را تمام عرض، نصف عرض، عرض ثابت یا «خودکار» بسازیم و در پایان، ارتفاع سرفصل ها را تنظیم می کنیم.

عرض و ارتفاع جدول

عرض و ارتفاع جدول توسط دو ویژگی width و height تعیین می شود.

عرض جدول (width)

ویژگی width می تواند با درصد، طول ثابت پیکسل یا مقدار auto تنظیم شود:

درصد (%)
طول ثابت (px)
کلیدواژه auto

عرض 100٪ برای تمام عرض

برای جدول تمام عرض از width: 100%; استفاده کنید. در نمونه منبع ارتفاع سرستون ها نیز 70px است:

table{ width:100%; }
th{ height:70px; }

عرض 50٪ برای نصف عرض

برای اشغال نصف عرض صفحه مقدار 50٪ را اعمال کنید؛ بنابراین جدول جمع وجورتر می شود:

table{ width:50%; }

عرض ثابت با پیکسل

وقتی به اندازه دقیق نیاز دارید، یک مقدار ثابت بدهید:

table{ width:500px; }

عرض خودکار (auto)

با مقدار auto مرورگر عرض جدول را بر اساس محتوا و زمینه محاسبه می کند:

table{ width:auto; }

ارتفاع جدول (height)

ویژگی height نیز مانند عرض می تواند درصد، پیکسل یا auto باشد. نمونه زیر ارتفاع سرستون ها را ثابت می کند:

th{ height:70px; }

نکته: برای کنترل فضای داخلی سلول ها کنار «اندازه جدول در CSS»، از padding روی td و th استفاده کنید.

مسیر تکمیلی و منابع

ادامه مطالعه: کادر جدول در CSS، تراز و چینش جدول و نشانه گذاری این صفحه اندازه جدول در CSS برای رجوع سریع.