في هذا الدرس 7تصفّح المواضيع
تتكون البيانات المجدولة من معلومات منظمة في شبكة هندسية ثنائية الأبعاد تلتقي فيها الصفوف الأفقية بالأعمدة الرأسية. في لغة HTML، صُمم عنصر الجدول
table خصيصاً لعرض البيانات ذات العلاقات المترابطة—مثل الجداول الحسابية والمالية ومواصفات المنتجات والجداول الزمنية وتقارير الإحصاءات—لتسهيل استيعابها برمجياً وبصرياً.
HTML
<table>
<tr>
<th>Course Track</th>
<th>Duration</th>
<th>Level</th>
</tr>
<tr>
<td>Web Development</td>
<td>12 Weeks</td>
<td>Starter</td>
</tr>
</table>عند صياغة البيانات داخل جدول HTML دلالي، يتمكن المتصفح والتقنيات المساعدة من بناء شجرة علاقات منطقية تربط كل رقم ومعلومة بعنوانه التفسيري المباشر. يتيح ذلك لقارئات الشاشة نطق الخلايا بسياقها الصحيح بدلاً من تلاوة أرقام مجردة تفقد قيمتها الفنية.
يعمل عنصر
<table> كحاوية خارجية ترسم حدود شبكة البيانات. تتبع لغة HTML نظام الترتيب الموجه بالصفوف الأفقية (Row-Major Order): لا يمكن وضع نصوص حرة أو خلايا بيانات منفردة مباشرة داخل وسم الجدول، بل يجب احتواؤها إلزامياً داخل صف منظم.
HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data A</td>
<td>Data B</td>
</tr>
</table>يقوم المتصفح بحساب أعمدة الجدول تلقائياً استناداً إلى عدد الخلايا الموجودة في كل صف أفقي. يُعد الحفاظ على تماثل عدد الخلايا عبر كافة الصفوف ركيزة أساسية لضمان استقرار الشبكة ومنع ظهور فراغات مشوهة.
يتحكم عنصر صف الجدول
<tr> في إنشاء كل خط أفقي مستقل داخل الشبكة. يتطلب هذا العنصر وسم فتح <tr> ووسم إغلاق </tr>، وهو الحاوية الوحيدة المصرح بها لاحتضان خلايا عناوين وأرقام الجدول.
HTML
<!-- Table with two distinct rows -->
<table>
<tr>
<th>Course</th>
<th>Level</th>
</tr>
<tr>
<td>HTML5 Mastery</td>
<td>Beginner</td>
</tr>
</table>يمكن تطبيق قواعد تنسيق CSS على وسوم
<tr> مباشرة، مثل تلوين الصفوف المتبادلة أو تعيين حدود الفواصل. مع ذلك، يُحظر تطبيق خصائص التموضع مثل float أو display: flex على صفوف الجداول لأنها تعطل حسابات المحاذاة الداخلية للمتصفح.يُحدد عنصر
<th> خلايا عناوين الجدول التي تصف فئة أو طبيعة بيانات عمود أو صف بأكمله. يقوم المتصفح تلقائياً بتمييز خلايا العناوين بخط عريض ومحاذاة مركزية، مما يمنحها أهمية بصرية ودلالية فارقة عن بقية الخلايا.
HTML
<table>
<tr>
<th scope="col">Device</th>
<th scope="col">Operating System</th>
<th scope="col">RAM</th>
</tr>
<tr>
<td>Workstation</td>
<td>Linux Mint</td>
<td>32 GB</td>
</tr>
</table>يمثل استخدام وسم
<th> بديلاً جوهرياً عن مجرد تضخيم خلايا البيانات العادية بخط عريض عبر CSS. تعتمد التقنيات المساعدة على خلايا العناوين كمعالم ملاحة رئيسية تمكن فاقدي البصر من التنقل مباشرة بين فئات البيانات دون التباس.يمثل عنصر
<td> خلية البيانات الفردية داخل شبكة الجدول. يحتضن هذا الوسم القيم والمعلومات الفعلية—مثل النصوص والأرقام والروابط التشعبية ومقتطفات الأكواد والصور—ويظهر افتراضياً بوزن خط عادي ومحاذاة إلى بداية السطر.
HTML
<table>
<tr>
<th scope="col">Framework</th>
<th scope="col">Language</th>
</tr>
<tr>
<td>Laravel</td>
<td>PHP</td>
</tr>
</table>يمكن لخلية بيانات الجدول أن تستضيف معظم عناصر HTML القياسية، بما في ذلك الروابط والقوائم والنصوص المنسقة. ومع ذلك، يُنصح بتجنب تكديس كتل نصية معقدة داخل الخلية الواحدة لمنع تشتت القراءة على الشاشات الصغيرة.
تحدد خاصية النطاق الدلالي
scope العلاقة المباشرة بين خلية العنوان وبقية خلايا البيانات المرتبطة بها. يؤدي تعيين scope="col" إلى ربط العنوان بكافة خلايا العمود الرأسي، بينما يربط scope="row" العنوان بخلايا الصف الأفقي.يوضح الجدول التالي القيم المعيارية لخاصية النطاق الدلالي
scope واستخدامها الصحيح في إتاحة الجداول:| تصريح الخاصية scope | اتجاه الارتباط | خلايا البيانات المستهدفة |
|---|---|---|
scope="col" |
رأسي | كافة خلايا البيانات الواقعة في العمود أسفل العنوان |
scope="row" |
أفقي | كافة خلايا البيانات الواقعة في الصف بجانب العنوان |
غياب scope |
تخميني | يخمن المتصفح العلاقة تلقائياً مما قد يسبب التباساً في الجداول المركبة |
HTML
<table>
<tr>
<th scope="col">Plan</th>
<th scope="col">Bandwidth</th>
</tr>
<tr>
<th scope="row">Basic</th>
<td>1 TB</td>
</tr>
</table>في البدايات الأولى لتطوير الويب قبل ظهور معايير CSS الحديثة، كان المطورون يعتمدون على جداول HTML لبناء وتخطيط صفحات المواقع وتقسيم الهيدر والشريط الجانبي والمحتوى. اليوم، يُحظر استخدام الجداول لتخطيط الصفحات حظراً باتاً وفق معايير W3C وWHATWG القياسية.
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>يؤدي استخدام الجداول في التخطيط إلى تدمير الدلالة الهيكلية لقارئات الشاشة، والتسبب في بطء تصيير المتصفح، وعجز الصفحة التام عن التجاوب مع شاشات الهواتف الذكية. استخدم دائماً أدوات التخطيط العصرية مثل CSS Grid وFlexbox لهندسة الواجهات، واحصر جداول HTML في عرض البيانات المجدولة فقط.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس دور جداول HTML في تنظيم البيانات، وبنيتها ثنائية الأبعاد القائمة على الصفوف tr وخلايا العناوين th وخلايا البيانات td، وضبط الإتاحة عبر خاصية scope، مع حظر استخدام الجداول في التخطيط. الخطوة التالية تنقلنا إلى استكشاف العناصر المتقدمة thead وtbody وtfoot وcolgroup.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Tabular Data البيانات المجدولة
- معلومات منظمة داخل شبكة هندسية من الصفوف والأعمدة تعبر عن علاقات مترابطة بين المتغيرات.
- للمراجعة
- 02 Row-Major Order الترتيب الموجه بالصفوف
- النمط الهيكلي الذي تُبنى بموجبه الجداول أفقياً صفاً تلو الآخر في كود HTML.
- للمراجعة
- 03 Table Header خلية عنوان الجدول
- خلية دلالية تقدم تسمية وصفية وتفسيرية لعمود أو صف بيانات كامل.
- للمراجعة
- 04 Scope Attribute خاصية النطاق الدلالي
- خاصية تحدد ارتباط خلية العنوان بالعمود أو الصف لمساعدة قارئات الشاشة في القراءة السليمة.
- للمراجعة
- 05 Table Data Cell خلية بيانات الجدول
- الحاوية الأساسية المخصصة لاحتضان القيم والمعلومات الفردية داخل صف الجدول.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 TR وسم TR
- Table Row
- عنصر في لغة HTML يُنشئ صفاً أفقياً مستقلاً داخل الجدول لاحتواء الخلايا.
- للمراجعة
- 02 TH وسم TH
- Table Header
- عنصر في لغة HTML يحدد خلية عنوان دلالية لعمود أو صف في الجدول.
- للمراجعة
- 03 TD وسم TD
- Table Data
- عنصر في لغة HTML يمثل خلية بيانات قياسية داخل صفوف الجدول.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/2مهام منجزة
-
أنشئ جدول HTML يتكون من 3 أعمدة و3 صفوف، مستخدماً th مع خاصية scope="col" للعناوين ووسوم td لقيم الأسعار.
-
أضف خاصية scope="row" لخلية th الأولى في كل صف بيانات لضمان ربط قارئات الشاشة للقيم بعنوانها الصحيح.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.