اندازه جدول در 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 برای رجوع سریع.