متى سيتم استخدام الجدول
الآن ، لم تعد الجداول <Table> بشكل عام تستخدم للتخطيط العام لصفحات الويب. ومع ذلك ، عند مواجهة تصميمات محددة معينة ، مثل إدخال النموذج وعرض البيانات ، قد تكون النماذج هي الخيار الأنسب.
الانطباع البديهي للجدول هو أن العناصر مرتبة بدقة بواسطة خلايا متعددة ، والتي يمكن أن ترى بوضوح الصفوف والأعمدة. هذا يمكن أن يرتبط مع Excel. من موضع Excel في معالجة البيانات والإحصاءات ، يمكننا أن نفهم أهمية الجداول في صفحات الويب.
ببساطة ، عندما تتمكن من الشعور بشكل حدسي ، يتم ترتيب عناصر متعددة في مفهوم الصفوف والأعمدة ، فإن استخدام الجداول سيجعلك أسهل بكثير. على سبيل المثال ، نموذج الطلب في caniuse.com:
حساب تخطيط الجدوليعد استخدام جدول بسيطًا ، ولكن في بعض الأحيان ينتهي الجدول بكل شبكة ، والتي قد لا تكون ما تريد. على سبيل المثال ، إذا كانت بعض الشبكات تحتوي على كسر في الأسطر ، فإن الجدول بأكمله يبدو قبيحًا للغاية بسبب كسر الخط. خاصة بالنسبة للجداول المستخدمة لعرض البيانات ، يعد تخصيص العرض موضوعًا مهمًا للغاية. قد تحتاج إلى حساب العرض الإجمالي للجدول بعناية للبيانات التي قد يتم تقديمها في كل عمود من الشبكات.
وذلك لأن الجدول له خصائصه الخاصة في التصميم ، وسيتبع بعض المبادئ وتحديد تخطيطه الفعلي من خلال الحسابات. بعد ذلك ، تستخدم هذه المقالة أمثلة اختبار الجدول الفعلية لاستكشاف كيفية حساب الجداول تخطيطها الخاص.
البيان الأوليتركز هذه المقالة فقط على الأساليب الأكثر شيوعًا لتطبيق الجداول ولا تدرج جميع الحالات. تحتوي المتصفحات المختلفة على تحليلات مختلفة لبعض مفاهيم الجداول ، ولكن حسابات التخطيط متسقة بشكل أساسي (إذا كانت هناك اختلافات ، فسيتم ذكرها بشكل منفصل).
سيتم تقديم نماذج الاختبار التالية بهذه الطريقة (المحتوى مأخوذ من مسار الصفر):
في الوقت نفسه ، سيقوم الجدول بتعيين حدود الحدود: الانهيار ؛ ومساحة الحدود: 0 ؛. هذه هي أيضًا الممارسة الأكثر شيوعًا لتطبيق الجداول ، ويستخدم Csss هذا الجزء كتعريف تهيئة.
اثنين من الخوارزمياتستحدد طاولة جدول سمة CSS المحددة على العنصر <guand> الخوارزمية المطبقة على الجدول أثناء حساب التخطيط. له قيمتان ، تلقائيين وثابتة. في الحالات العادية ، يتم استخدام القيمة الافتراضية التلقائية.
الفرق بين هاتين الخوارزميات هو ما إذا كان تخطيط عرض الجدول مرتبطًا بمحتوى البيانات في الجدول. ستناقش هذه المقالة مبدأ حساب تخطيط الجداول عند أخذ هاتين القيمتين.
تخطيط الجدول التلقائي -Auto
تتمثل خاصية تخطيط الجدول التلقائي في أن تخطيط عرض الجدول مرتبط بجميع محتوى البيانات في الجدول. يحتاج إلى الحصول على جميع محتويات الجدول قبل تحديد تخطيط العرض النهائي ثم عرضه معًا.
وبهذه الطريقة ، فإن النقطة الأساسية هي أن المحتوى مناسب. ماذا لو حدد الجدول عرضًا ثابتًا (500 بكسل هنا) ولا تحدد جميع الخلايا العرض (فقط مناقشة CSS تحديد العروض) ، ماذا يحدث؟ انظر النتائج:
في الجدول أعلاه ، يتم كتابة الجزء الفارغ مع & nbsp ؛ المساحات. بعد المقارنة ، يمكننا العثور على النقاط التالية:
الأعمدة الثانية والثالثة لها نفس العرض.
يبدو أن عرض العمود 1 ونسبة عرض أي عمود يتبعه هو 2: 1.
أضف الحدود والهوامش الداخلية ، ويتم تلخيص عرض جميع الأعمدة ، مساوية للعرض المحدد بواسطة الجدول.
لا يوجد عرض محدد في كل خلية ، وبالتالي يتم تحديد تخطيط العرض بالكامل بواسطة بيانات المحتوى المحددة (معلومات النص). كيف تشرح مثل هذه النتيجة؟ يمكنك أولاً استنتاج هذا المنطق بشكل حدسي:
الخطوة 1: حدد النص الذي يحتوي على معظم محتوى النص من كل عمود (افهم أنه إذا لم يلف النص الخط ، فإن النص يشغل أوسع عرض) كممثل.
الخطوة 2: قارن عروض ممثلي كل عمود ، وقارنهم بالعرض الإجمالي للجدول ، بما في ذلك الحدود والهوامش الداخلية وفقًا لعلاقتهم النسبية عرضها.
بالإشارة إلى المنطق أعلاه ، ثم النظر إلى الجدول السابق ، هل هناك سبب ما؟ لاحظ أن نسبة العرض المذكورة سابقًا تبدو 2: 1 ، هل سيكون هذا؟ لنلقي نظرة على الإصدار الذي يزيل الهوامش الداخلية:
استخدم أداة تصحيح الأخطاء الأمامية للنظر في عرض الخلايا أعلاه ، وسوف تجد أن هذا الجدول مختلف عن السابق ، وأن النسبة قريبة جدًا من 2: 1 (نعم ، هناك أيضًا نقطة صغيرة بسبب الحدود ، ولكن بدون الحدود ، لا يمكنك تمييز الأعمدة).
يمكن ملاحظة أنه عند تحليل العلاقة النسبية للعرض ، سيتم أخذ عرض المحتوى والهامش الداخلي والحدود في الاعتبار. يوضح هذا أيضًا أنه ليس مقياسًا لعدد الكلمات ، ولكن مقياسًا للعرض أن الكلمات يمكن أن تشغلها في حالة عدم وجود خطوط خطية (تأتي هنا 2: 1 من حقيقة أن الأحرف الصينية متساوية في العرض). استخدم الهوامش الداخلية بشكل طبيعي فقط لصنع طاولة أكثر جمالا :).
ماذا يحدث عندما يكون هناك تعريف عرض؟ فيما يلي جدول بعرض محدد في جزء من الخلايا:
رمز HTML المقابل هو:
XML/HTML رمز نسخ المحتوى إلى الحافظة