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

أحجام الجداول (Table Sizes) في HTML

في HTML، يمكنك التحكم في حجم الجدول باستخدام خاصية width وheight داخل وسم <table> أو باستخدام CSS.

---

✅ تحديد عرض الجدول باستخدام خاصية width:

<table width="100%" border="1">
  <tr>
    <th>الاسم</th>
    <th>الوظيفة</th>
  </tr>
  <tr>
    <td>علي</td>
    <td>مبرمج</td>
  </tr>
</table>

⬅ هذا الجدول يعرض بنسبة 100% من عرض الصفحة.

---

✅ تحديد العرض والارتفاع باستخدام CSS:

<style>
  table {
    width: 300px;
    height: 100px;
  }
</style>

<table border="1">
  <tr>
    <td>محتوى الجدول</td>
    <td>محتوى آخر</td>
  </tr>
</table>

⬅ باستخدام CSS تستطيع التحكم بدقة أكبر في الأبعاد.

---

✅ تحديد عرض أعمدة معينة:

<table border="1">
  <tr>
    <th width="70%">المنتج</th>
    <th width="30%">السعر</th>
  </tr>
  <tr>
    <td>هاتف ذكي</td>
    <td>3000 جنيه</td>
  </tr>
</table>

⬅ يمكن توزيع العرض النسبي بين الأعمدة باستخدام النسب المئوية.

---

💡 ملاحظات:

• يمكن استخدام وحدات قياس مختلفة مثل % أو px لتحديد الأحجام.
• يفضل استخدام CSS للتحكم في تنسيقات الجداول بدلاً من خصائص HTML القديمة.
• الخصائص width و height داخل الوسوم لا تزال مدعومة، لكن الأفضلية لتنسيق CSS.