100% کامل شده تا

ابعاد جدول در اچ‌تی‌ام‌ال (HTML Table Sizes)

از موتو کد، دانشنامهٔ برنامه‌نویسی


جداول 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>

مثال

table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>

<body>

<h2>100% wide HTML Table</h2>

<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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Responsive demo.svg


نکته: استفاده از درصد به عنوان واحد اندازه‌گیری برای عرض به این معنی است که این عنصر در مقایسه با عنصر والد خود چقدر گسترده‌است، که در این مورد عنصر <body> است.


عرض ستون جدول اچ‌تی‌ام‌ال (HTML Table 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>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

مثال

table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
<body>

<h2>Set the first column to 70% of the table width</h2>

<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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Responsive demo.svg



ارتفاع سطر جدول اچ‌تی‌ام‌ال (HTML Table Row Height)

برای تنظیم ارتفاع یک ردیف خاص، ویژگی style را روی عنصر سطر جدول اضافه کنید:

ارتفاع ردیف دوم را روی ۲۰۰ پیکسل تنظیم کنید:

     
     
     

مثال

ارتفاع ردیف دوم را روی ۲۰۰ پیکسل تنظیم کنید:

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

مثال

table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}

مثال

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
<body>

<h2>Set the height of the second row to 200 pixels</h2>

<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>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Responsive demo.svg


منابع آموزشی




به‌روزرسانی شده: ۳۶ روز پیش