الفارق بين الجداول وتخطيط الصفحات

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في البدايات الأولى لتطوير الويب قبل ظهور معايير CSS الحديثة، كان المطورون يعتمدون على جداول HTML لبناء وتخطيط صفحات المواقع وتقسيم الهيدر والشريط الجانبي والمحتوى. اليوم، يُحظر استخدام الجداول لتخطيط الصفحات حظراً باتاً وفق معايير W3C وWHATWG القياسية.

الصف 2 صورة توضيحية

مقارنة الاستخدام المعياري للجداول لعرض البيانات مقابل حظر استخدامها لتخطيط الصفحات

الصف 3 كود برمجي

HTML

<h2>Cloud Hosting Plans</h2>
<p>Compare monthly server specifications:</p>
<table>
  <tr>
    <th scope="col">Plan</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <td>Starter</td>
    <td>$5 / month</td>
  </tr>
</table>

جرّب بنفسك

الصف 4 شرح توضيحي

يؤدي استخدام الجداول في التخطيط إلى تدمير الدلالة الهيكلية لقارئات الشاشة، والتسبب في بطء تصيير المتصفح، وعجز الصفحة التام عن التجاوب مع شاشات الهواتف الذكية. استخدم دائماً أدوات التخطيط العصرية مثل CSS Grid وFlexbox لهندسة الواجهات، واحصر جداول HTML في عرض البيانات المجدولة فقط.

الصف 5 ملاحظة هامة

الصف 6 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: أتقنت في هذا الدرس دور جداول HTML في تنظيم البيانات، وبنيتها ثنائية الأبعاد القائمة على الصفوف tr وخلايا العناوين th وخلايا البيانات td، وضبط الإتاحة عبر خاصية scope، مع حظر استخدام الجداول في التخطيط. الخطوة التالية تنقلنا إلى استكشاف العناصر المتقدمة thead وtbody وtfoot وcolgroup.

Tabular Data vs Page Layout الفارق بين الجداول وتخطيط الصفحات

شرح صفوف ومحتوى الفقرة

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

جميع فقرات هذا الدرس (الجداول في لغة HTML)