انقر هنا للعودة إلى العمود التعليمي HTML HTML.
أعلاه: لغة الترميز - العنوان
المصدر الأصلي
حلول التصميم الموحدة - كتيبالتمييز
والأناقة الجزء 1: انخفض مع بدء الترميز بالارتياح الفصل 2 الجدول الشر؟هل تعرف؟ لا أعرف متى بدأت ، باستخدام الجداول تحول إلى عمل خاطئ؟ في الواقع ، فإن أكبر أسطورة لكتابة صفحات الويب بناءً على معايير الويب هي التوقف عن استخدام الجداول بعد الآن ، أبدًا! يبدو وكأنه طاعون ، يجب تجنبه ، ويجب إغلاقه وإلقاؤه في خزانة متربة ، ويُعتبر عتيقًا ينتقل من الأيام الأولى لعصر تطوير الإنترنت.
من أين يأتي هذا الاشمئزاز؟ ربما كان الأمر بسيطًا جدًا في البداية ، على الأقل لسبب وجيه. سيكون الكثير من الناس واثقين في الترويج لفوائد التخلي عن التصميم التقليدي لتصوير الجدول وصور GIF فارغة ، وبدلاً من ذلك باستخدام تخطيط CSS منظم مرن. قد نبدأ في إزالة جميع الجداول بطريقة منفصلة ، وحتى نصر بعناد على طرد جميع الطاولات - لا يهم هذه المناسبة.
في وقت لاحق من الكتاب ، سنرى طريقة تخطيط CSS وجميع فوائد القيام بذلك. ولكن الآن دعونا نلقي نظرة على كيفية استخدام الجداول في الموقف الصحيح - أي عند وضع علامات على قوائم البيانات. سننظر في بعض الطرق البسيطة لجعل قوائم بياناتنا أسهل في الاستخدام وأكثر جمالا.
إنه شكل تماماعند وضع علامة على بيانات قائمة ، لا يوجد أي سبب على الإطلاق لعدم استخدام علامات الجدول. لكن انتظر ، ما هي بيانات القائمة؟ فيما يلي بعض الأمثلة: خط سير الرسم البياني في جدول بيانات التقويم
بالنسبة لهذه الأمثلة والعديد من الحالات الأخرى ، يجب استخدام تأثيرات CSS معقدة للغاية وصارمة لجعل البيانات تبدو وكأنها جدول. ربما يمكنك أن تتخيل أن استخدام عوامات CSS الذكية لتحديد موقع جميع المشاريع سيؤدي إلى نتائج غير متوافقة ومتناقضة ، ناهيك عن أنه بعد إزالة CSS ، فإن قراءة كل بيانات بدقة ستصبح مهمة مستحيلة. في الواقع ، ليس علينا أن نخاف من الجداول - يجب أن نستخدمها مع أهداف التصميم الأصلية.
أشكال للجميعأحد الأسباب وراء انتقاد الجداول هو أنه إذا لم يتم استخدامك بعناية ، فستكون هناك عيوب قابلية الاستخدام. على سبيل المثال: يصعب قراءة برامج قراءة الشاشة بشكل صحيح ، في حين أن أجهزة الشاشة الصغيرة غالباً ما يتم إزعاجها من خلال الجداول المستخدمة للتخطيط ، ولكن لدينا بعض الطرق البسيطة لزيادة قابلية استخدام جداول بيانات القائمة. في الوقت نفسه ، ننشئ بنية مرنة لتسهيل إعداد الأنماط مع CSS في المستقبل.
دعونا نلقي نظرة على المثال البسيط في الشكل 3-1 ، وهو سجل الدوري لرابطة البيسبول الأمريكية:
الشكل 3-1: مثال تمثيل البيانات النموذجي
ربما تكون هذه بيانات إحصائية محبط للغاية لمحبي Red Sox ، ولكن الشكل 3-1 هو مثال مثالي لبيانات القائمة. لديها ثلاثة رؤوس طاولة (السنة ، الخصم ، سجل الموسم (WL)) ، تليها بيانات أربع سنوات. على الجدول هو عنوان الجدول ، وهو ما يفسر محتوى الجدول.
طريقة وضع علامة على جدول البيانات هذا بديهي للغاية ، وقد نفعل ذلك برمز مثل هذا:
<p align = center> بطولة Boston Red Sox World Series </p>
<griding>
<tr>
<td align = center> <b> year </b> </td>
<td align = center> <b> الخصم </b> </td>
<td align = center> <b> سجل الموسم (wl) </b> </td>
</r>
<tr>
<td> 1918 </td>
<td> شيكاغو الأشبال </td>
<td> 75-51 </td>
</r>
<tr>
<td> 1916 </td>
<td> بروكلين روبنز </td>
<td> 91-63 </td>
</r>
<tr>
<td> 1915 </td>
<td> Philadelphia Phillies </td>
<td> 101-50 </td>
</r>
<tr>
<td> 1912 </td>
<td> New York Giants </td>
<td> 105-47 </td>
</r>
</table>
يجب أن تكون النتائج الموضحة بهذه الطريقة مشابهة جدًا للشكل 3-1 ، ولكن يمكننا إضافة بعض التحسينات إلى هذا الأساس.
أولاً ، يمكننا استخدام علامة <Saption> الدلالية لتخزين بطولة بوسطن ريد سوكس للسلسلة العالمية. يجب اتباع علامة <Saption> مباشرة بعد علامة التشغيل <guing> ، والتي يتم استخدامها عادة لتخزين عنوان الجدول أو وصف معلومات الجدول.
يبدو أنه يسهل على المستخدمين رؤية موضوع الجدول ، ويمكن أن يساعد أيضًا الأشخاص الذين يعرفون محتوى الويب بطرق أخرى.
دعنا نزيل الفقرة الأولى ونضيف <caption>:
<griding>
<Sption> بطولة بوسطن ريد سوكس للسلسلة العالمية </caption>
<tr>
<td align = center> <b> year </b> </td>
<td align = center> <b> الخصم </b> </td>
<td align = center> <b> سجل الموسم (wl) </b> </td>
</r>
<tr>
<td> 1918 </td>
<td> شيكاغو الأشبال </td>
<td> 75-51 </td>
</r>
<tr>
<td> 1916 </td>
<td> بروكلين روبنز </td>
<td> 91-63 </td>
</r>
<tr>
<td> 1915 </td>
<td> Philadelphia Phillies </td>
<td> 101-50 </td>
</r>
<tr>
<td> 1912 </td>
<td> New York Giants </td>
<td> 105-47 </td>
</r>
</table>
الأهم من ذلك ، يجب أن ينقل العنوان بسرعة موضوع المعلومات التالية. وفقًا للإعدادات الافتراضية ، فإن معظم المتصفحات المرئية تركز النص في علامة <Saption> في الجزء العلوي من الجدول. بالطبع ، يمكننا استخدام CSS لتغيير نمط الإعدادات الافتراضية لاحقًا - ستتم مناقشة هذه المشكلة في تمديد نصائح هذا الفصل. في الواقع ، يقع العنوان الآن في علامة فريدة ، مما يجعل عمل التعديل اللاحق أسهل وبسيط.
الصفحة السابقة 1 2 3 4 5 6 7 8 الصفحة التالية اقرأ النص الكامل