أحجام جداول HTML
يمكن أن تحتوي جداول HTML على أحجام مختلفة لكل عمود أو صف أو الجدول بأكمله.
استخدم styleالسمة مع
widthأو height
الخصائص لتحديد حجم جدول أو صف أو عمود.
عرض جدول HTML
لتعيين عرض الجدول ، أضف 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>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ملاحظة: استخدام النسبة المئوية كوحدة حجم للعرض يعني مدى عرض هذا العنصر بعنصره الأصلي ، وهو العنصر في هذه الحالة <body>
.
عرض عمود جدول HTML
لتعيين حجم عمود معين ، أضف style
السمة إلى عنصر <th>أو
<td>عنصر:
مثال
اضبط عرض العمود الأول على 70٪:
<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
السمة إلى عنصر صف الجدول:
مثال
اضبط ارتفاع الصف الثاني على 200 بكسل:
<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>