12-الجداول Tables في HTML

📘 الجداول في HTML | من الأساسيات إلى فهم سلوك العرض ما هو الجدول في HTML؟ 🤔 الجدول هو عنصر يُستخدم لتنظيم البيانات المترابطة في صفوف وأعمدة، لتسهيل قراءتها ومقارنتها، مثل جداول علامات الطلاب، وأسعار المنتجات، وتقارير المبيعات. 🔹 أولًا: العناصر الأساسية لبناء الجدول ▪️ العنصر table: لإنشاء الجدول الرئيسي. ▪️ العنصر tr: لإنشاء صف داخل الجدول. ▪️ العنصر th: لإنشاء خلية عنوان لعمود أو صف. ▪️ العنصر td: لإنشاء خلية بيانات عادية. 🔹 ثانيًا: تنظيم الجدول ▪️ العنصر thead: لتمثيل رأس الجدول، ويحتوي عادةً على عناوين الأعمدة. ▪️ العنصر tbody: لتمثيل جسم الجدول، ويحتوي على البيانات الأساسية. ▪️ العنصر tfoot: لتمثيل تذييل الجدول، ويُستخدم للمجاميع أو الخلاصة. ▪️ العنصر caption: لإضافة عنوان يوضح محتوى الجدول. 🔹 ثالثًا: دمج الخلايا ▪️ الخاصية colspan: تجعل الخلية تمتد أفقيًا عبر عدة أعمدة. ▪️ الخاصية rowspan: تجعل الخلية تمتد عموديًا عبر عدة صفوف. 💡 عند دمج خليتين، تشغل الخلية المدمجة مساحة الخليتين؛ لذلك لا نضيف خلية أخرى في المكان الذي أصبح مشغولًا بالدمج، حتى لا يختل ترتيب الجدول. 🔹 رابعًا: إمكانية الوصول (Accessibility) ▪️ القيمة scope="col": تحدد أن عنوان الخلية يخص عمودًا. ▪️ القيمة scope="row": تحدد أن عنوان الخلية يخص صفًا. تساعد هذه الخصائص قارئات الشاشة على فهم العلاقة بين العناوين والبيانات. 🔹 خامسًا: كيف يتصرف الجدول في المتصفح؟ لنفهم الفرق بين الجدول وعنصر div، علينا التعرف على خاصية CSS المسماة display. ▪️ القيمة display: table: هي قيمة العرض الافتراضية لعنصر الجدول، وتجعله يتصرف وفق نموذج تخطيط الجداول. ▪️ سلوك الجدول من حيث السطر: يظهر الجدول عادةً في سطر مستقل، فلا يجلس بجانب فقرة عادية ضمن تدفق الصفحة نفسه. ▪️ سلوكه من حيث العرض: لا يتمدد الجدول تلقائيًا دائمًا لملء عرض العنصر الأب؛ فقد يكون عرضه مناسبًا لمحتواه، وفق خوارزمية تخطيط الجدول ومحتواه والأنماط المطبقة عليه. 💻 مثال توضيحي: إذا وضعنا جدولًا يحتوي على اسم «أحمد» وعلامته «90» داخل عنصر أب div عرضه 500px، فقد يظهر الجدول بعرض أصغر من العنصر الأب، بينما تبقى المساحة المتبقية فارغة. أما عنصر div فعندما يكون display: block ولا توجد قيود أخرى على عرضه، فإنه يشغل عادةً العرض المتاح من العنصر الأب. ⚠️ ملاحظة تقنية: لا نصف الجدول بدقة بأنه يجمع بين block وinline؛ بل نقول إن له سلوكًا خاصًا بتخطيط الجداول. كما أن مصطلح shrink-to-fit لا ينطبق تلقائيًا على كل جدول، لأن عرضه يتأثر بخوارزمية تخطيط الجداول وقواعد CSS. 🔹 سادسًا: الجداول والشاشات الصغيرة عندما يتجاوز الجدول عرض المساحة المتاحة، يمكن استخدام الخاصية overflow-x: auto على حاوية خارجية للسماح بالتمرير الأفقي ورؤية بقية الأعمدة. 🎯 الخلاصة: الجدول ليس مجرد مربعات؛ بل بنية منظمة للبيانات، لها عناصر دلالية وخصائص للدمج وإمكانية الوصول، وفهم طبيعة عرضه يساعدك في بناء واجهات متجاورة واحترافية. #HTML #HTMLTables #WebDevelopment #DimaKhatib #ديما_خطيب