اندازه‌های جداول HTML
جداول HTML می‌تونن اندازه‌های مختلفی برای هر ستون، سطر، یا کل جدول داشته باشن.
برای اینکه اندازه یک جدول، سطر، یا ستون رو مشخص کنید، از ویژگی style همراه با ویژگی‌های width (عرض) یا height (ارتفاع) استفاده کنید.
عرض جدول HTML
برای تنظیم عرض یک جدول، ویژگی style رو به عنصر <table> اضافه کنید:
مثال:
عرض جدول رو ۱۰۰% تنظیم کنید:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>نکته: وقتی از درصد به عنوان واحد اندازه برای عرض استفاده می‌کنید، یعنی این عنصر نسبت به عنصر والدش (که در این مثال، عنصر <body> هست) چقدر پهنا خواهد داشت.
عرض ستون جدول HTML
برای تنظیم اندازه یک ستون خاص، ویژگی style رو به عنصر <th> (سربرگ جدول) یا <td> (داده جدول) اضافه کنید:
مثال:
عرض ستون اول رو ۷۰% تنظیم کنید:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ارتفاع سطر جدول HTML
برای تنظیم ارتفاع یک سطر خاص، ویژگی style رو به عنصر سطر جدول <tr> اضافه کنید:
مثال:
ارتفاع سطر دوم رو ۲۰۰ پیکسل تنظیم کنید:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>