HTML — جداول - اندازه ها (Table Sizes)

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

قبلی: جداول - حاشیه ها (Table Borders) بعدی: جداول - سرفصل ها (Table Headers)

جداول - اندازه ها (Table Sizes) در HTML

در HTML می توان اندازه جدول (Table)، ستون ها (Columns) و ردیف ها (Rows) را به راحتی تغییر داد. این کار با ویژگی style و استفاده از width یا height انجام می شود.

عرض جدول (Table Width)

برای تغییر عرض جدول، ویژگی style را به تگ <table> اضافه کنید. برای مثال می توانید جدول را به اندازه 100٪ عرض صفحه نمایش دهید.

<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>
</table>

نکته: اگر از درصد (%) استفاده کنید، مقدار عرض نسبت به عنصر والد (مانند <body>) محاسبه می شود.

عرض ستون (Column Width)

برای تغییر عرض یک ستون خاص، ویژگی 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>
</table>

ارتفاع ردیف (Row Height)

برای تغییر ارتفاع ردیف ها، ویژگی 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>
</table>

خلاصه

از width برای تغییر عرض جدول یا ستون ها استفاده کنید.
از height برای تغییر ارتفاع ردیف ها استفاده کنید.
مقادیر می توانند برحسب پیکسل (px) یا درصد (%) تعیین شوند.

برای مطالعه بیشتر به بخش حاشیه جدول در HTML و سرستون ها در HTML مراجعه کنید.