اندازه جدول (Table Size)
می خواهی «اندازه جدول» را تنظیم کنی؟ «عرض (Width)» یعنی پهنا، «ارتفاع (Height)» یعنی بلندی. با چند قانون ساده می توانی جدول را تمام عرض کنی یا اندازه ثابت بدهی؛ مثل وقتی عکس پروفایل را کوچک و بزرگ می کنی.
تعریف اندازه جدول
اندازه با CSS و ویژگی های «width» و «height» تعیین می شود. می توانی درصد، پیکسل، یا «auto» بدهی. برای مطالعه کامل، همین صفحه اندازه جدول را نگه دار.
جدول تمام عرض با width: 100%
وقتی می خواهی جدول کل صفحه را پر کند، از 100٪ استفاده کن.
<style>
table {
width: 100%;
}
th {
height: 70px;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>پیتر</td>
<td>گریفین</td>
<td>$100</td>
</tr>
</table>
عرض نصف صفحه با width: 50%
اگر صفحه شلوغ است، عرض 50٪ بده تا کنار متن جا شود.
<style>
table {
width: 50%;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>لوئیس</td>
<td>گریفین</td>
<td>$150</td>
</tr>
</table>
عرض ثابت با پیکسل
برای اندازه دقیق و ثابت، مقدار پیکسلی بده؛ مثلاً 500px.
<style>
table {
width: 500px;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>جو</td>
<td>سوانسون</td>
<td>$300</td>
</tr>
</table>
تشخیص خودکار اندازه با auto
اگر مطمئن نیستی، «auto» بده تا مرورگر هوشمندانه حساب کند.
<style>
table {
width: auto;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>پیتر</td>
<td>گریفین</td>
<td>$100</td>
</tr>
</table>
تنظیم ارتفاع سطرها
ارتفاع سطرها را روی «th» یا «td» با «height» تنظیم کن.
<style>
th {
height: 70px;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>لوئیس</td>
<td>گریفین</td>
<td>$150</td>
</tr>
</table>
نکته: اگر مرزها دوتا شدند، به مرزهای جدول سر بزن و «border-collapse» را بررسی کن. همچنین برای فهرست های کناری، صفحه فهرست ها مفید است.
گام های عملی
- تصمیم بگیر: تمام عرض، نصف، یا ثابت؟
- «width» را با درصد یا پیکسل تنظیم کن.
- در تردید، «auto» را امتحان کن.
- در صورت نیاز، «height» سطرها را تعیین کن.
جمع بندی سریع
- اندازه جدول با width و height است.
- 100٪ یعنی تمام عرض صفحه.
- پیکسل یعنی اندازه ثابت دقیق.
- auto انتخاب خودکار مرورگر است.
- ارتفاع سطرها را روی th/td بده.