أحجام الجداول HTML Table Sizes

الدرس السابق الدرس التالي
يمكن أن تحتوي جداول HTML على أحجام مختلفة لكل عمود أو صف أو الجدول بأكمله.
استخدم سمة  style مع خصائص العرض(width) أو الارتفاع(height) لتحديد حجم جدول أو صف أو عمود.
عرض الجدول  - HTML Table Width
لتعيين عرض الجدول ، أضف سمة style إلى عنصر <table>:
مثال
اضبط عرض الجدول على 100٪:

 <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
<body>
<h2>جدول HTML عريض 100٪</h2>
<table style="width:100%">
  <tr>
    <th>الإسم</th>
    <th>اللقب</th> 
    <th>السن</th>
  </tr>
  <tr>
    <td>عمر</td>
    <td>بن الخطاب</td>
    <td>50</td>
  </tr>
  <tr>
    <td>حمزة</td>
    <td>عبد المطلب</td>
    <td>94</td>
  </tr>
  <tr>
    <td>عبد الله</td>
    <td>عبد مناف</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

ملاحظة: استخدام النسبة المئوية كوحدة حجم للعرض يعني مدى عرض هذا العنصر بالعنصر الأصلي ، والذي في هذه الحالة هو عنصر <body>.
 Table Column Width  -عرض عمود جدول
لتعيين حجم عمود معين ، أضف سمة  style إلى عنصر <th> أو <td>:
مثال
اضبط عرض العمود الأول على 70٪:

  <!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
<body>
<h2>اضبط العمود الأول على 70٪ من عرض الجدول</h2>
<table style="width:100%">
  <tr>
    <th style="width:70%">الاسم</th>
    <th>اللقب</th> 
    <th>السن</th>
  </tr>
  <tr>
    <td>امين</td>
    <td>جميل</td>
    <td>50</td>
  </tr>
  <tr>
    <td>عادل</td>
    <td>احمد</td>
    <td>94</td>
  </tr>
  <tr>
    <td>عمر</td>
    <td>سعد</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

ارتفاع صف الجدول HTML Table Row Height
لتعيين ارتفاع صف معين ، أضف سمة style إلى عنصر صف الجدول:
مثال
اضبط ارتفاع الصف الثاني على 200 بكسل:

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

<h2>اضبط ارتفاع الصف الثاني على 200 بكسل</h2>

<table style="width:100%">
  <tr>
    <th>الإسم</th>
    <th>اللقب</th> 
    <th>السن</th>
  </tr>
  <tr style="height:200px">
    <td>احمد</td>
    <td>زهير</td>
    <td>50</td>
  </tr>
  <tr>
    <td>فهد</td>
    <td>الكنري</td>
    <td>94</td>
  </tr>
  <tr>
    <td>سعد</td>
    <td>الاصيلي</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
الدرس السابق الدرس التالي
القسم: