HTML Table Sizes

▎راهنمای تنظیم اندازه جداول HTML

زمانی که با جداول HTML کار می‌کنید، می‌توانید اندازه‌های آن‌ها را با استفاده از ویژگی‌ها و خصوصیات CSS کنترل کنید. در زیر، راهنمایی برای تنظیم اندازه‌های جداول HTML، از جمله خود جدول، ردیف‌ها، ستون‌ها و سلول‌ها ارائه شده است.

▎۱. ساختار پایه جدول HTML

در اینجا یک مثال ساده از یک جدول HTML آورده شده است:

<table>
<tr>
<th>سرعنوان ۱</th>
<th>سرعنوان ۲</th>
</tr>
<tr>
<td>داده ۱</td>
<td>داده ۲</td>
</tr>
</table>

۲. تنظیم اندازه جدول با ویژگی‌ها

شما می‌توانید عرض و ارتفاع جدول را با استفاده از ویژگی‌های width و height مستقیماً در تگ <table> تنظیم کنید. اما این ویژگی‌ها در HTML5 منسوخ شده‌اند، بنابراین بهتر است از CSS استفاده کنید.

۳. تنظیم اندازه جدول با CSS

استفاده از CSS رویکرد پیشنهادی برای استایل‌دهی به جداول است. شما می‌توانید اندازه جدول را با استفاده از خصوصیات width و height در یک تگ <style> یا یک stylesheet خارجی تنظیم کنید.

<style>

table {

width: 500px; /* تنظیم عرض */

height: 300px; /* تنظیم ارتفاع */

border-collapse: collapse; /* اختیاری: برای بهبود استایل مرز */

}

th, td {

border: 1px solid black; /* اضافه کردن مرز به سلول‌ها */

padding: 10px; /* افزودن فاصله داخلی به سلول‌ها */

}

</style>

<table>

…

</table>

▎۴. تنظیم عرض ستون‌ها

شما می‌توانید همچنین عرض‌های ستون‌های فردی را با استفاده از عنصر <col> یا با تنظیم استایل‌ها مستقیماً روی عناصر <th> یا <td> مشخص کنید.

▎استفاده از <colgroup>

<table>
<colgroup>
<col style=width: “70%;”>
<col style=width: “30%;”>
</colgroup>
<tr>
<th>سرعنوان ۱</th>
<th>سرعنوان ۲</th>
</tr>
<tr>
<td>داده ۱</td>
<td>داده ۲</td>
</tr>

</table>

▎استفاده از استایل‌های درون‌خطی

<table>
<tr>
<th style=width:“70%;”>سرعنوان ۱</th>
<th style=width:“30%;”>سرعنوان ۲</th>
</tr>
<tr>
<td style=width:“70%;”>داده ۱</td>
<td style=width:“30%;”>داده ۲</td>
</tr>
</table>

▎۵. تنظیم ارتفاع ردیف‌ها

شما می‌توانید ارتفاع ردیف‌ها را نیز با استفاده از CSS تنظیم کنید:

<style>

tr {

height: 50px; /* تنظیم ارتفاع ردیف */

}

</style>

<table>

…

</table>

▎۶. جداول پاسخگو

برای طراحی‌های پاسخگو، ممکن است بخواهید از مقادیر درصدی برای عرض‌ها به جای مقادیر ثابت پیکسلی استفاده کنید. این اجازه می‌دهد تا جدول بر اساس اندازه صفحه نمایش تنظیم شود.

<style>

table {

width: 100%; /* عرض کامل کانتینر */

border-collapse: collapse;

}

th, td {

border: 1px solid black;

padding: 10px;

}

</style>

<table>

…

</table>

▎نتیجه‌گیری

با استفاده از CSS برای کنترل اندازه‌های جداول، ستون‌ها و سلول‌ها، می‌توانید جداول به خوبی ساختار یافته و بصری جذاب ایجاد کنید که همچنین پاسخگو هستند. همیشه ترجیح دهید که از CSS به جای ویژگی‌های منسوخ شده HTML استفاده کنید تا نگهداری و سازگاری با استانداردهای وب مدرن بهتر شود.