دلالات قائمة دليل التلفزيون.أليست طاولة؟

https://stackoverflow.com/questions/626224

06-07-2019
|

سؤال

أحتاج إلى إنشاء قائمة دليل تلفزيوني على شبكة الإنترنت.

عندما بدأت اعتقدت أن كل ما أحتاجه هو إنشاء جدول لأنه عبارة عن بيانات جدولية.

date       00:00   00:30   01:00   etc...
channel 1  show 1  show 2  show 3  etc...
channel 2  show 3  show 4  show 5  etc...

ولكن للأسف ليس هذا هو الوضع.بينما ال <th> هي لكل 30 دقيقة.يمكن أن يكون طول العرض أي شيء من 5 دقائق.ما يصل إلى بضع ساعات.

يمكنني الغش والقيام بكل شيء <th> مع colspan = 6 لذا ستكون الوحدة الفرعية 5 دقائق.ثم العب مع colspan لكل عرض بطول زمني / 5 (دقيقة) وهذا هو colspan الخاص بي.

ولكن (هناك دائمًا لكن)، ما لدي الآن ليس جدولًا يحتوي على بيانات جدولية، ما لدي هو نوع من جدول السباغيتي.

ماذا علي أن أفعل؟

المحلول 4

وفي نهاية قررنا أن دليل التلفزيون ليست بالضبط الجدول. هناك مقطع الرأس الذي يظهر ساعة، وجزء من الجسم الذي يظهر يظهر في كل ساعة ولكن هنا هو المكان الذي ينتهي الجزء الجدول.

ونحن سوف نفعل ذلك على شكل قائمة من القوائم القائمة الأولى هي رأس وقائمة القنوات وفي كل لى سوف يكون هناك قائمة أخرى، في رأس ستكون هناك قائمة من ساعة (حيث يحصل كل ساعة في عرض مستمر) وفي بقية لى (قناة) سوف يكون هناك قائمة من البرامج لأغراض محددة قناة وكل لى يحصل على عرض القائمة على طول العرض.

<ol>
    <li>date
        <ol>
            <li>00:00</li>
            <li>00:30</li>
            <li>01:00</li>
            <li>01:30</li>
            .
            .
            .
        </ol>
    </li>
    <li>Channel 1
        <ol>
            <li>Show 1</li>
            <li>Show 2</li>
            <li>Show 3</li>
            <li>Show 4</li>
            .
            .
            .
        </ol>
    </li>
    <li>Channel 2
    .
    .
    .
<ol>

وانها ليست الحل الأمثل لكننا نعيش في عالم غير كامل.

نصائح أخرى

وهذا هو بالتأكيد ليست شيئا يجب حل مع

استخدم متعددة

ق، ولكل منها مضمنة عرض أو مضمنة كتلة المنصوص عليها في CSS. تعيين العرض، وربما الأفضل القيام باستخدام الطبقات CSS، على سبيل المثال كما يلي:

div.channel div
{
   display: inline-block;
}
div.five { width: 1em; }
div.ten { width: 2em; }
div.fifteen { width: 3em; }
...

وثم HTML:

<div class="channel">
  <div class="five">Five minute program</div>
  <div class="fifteen">Fifteen minute program</div>
  <div class="five">Five minute program</div>
</div>
<div class="channel">
  <div class="ten">Ten minute program</div>
  <div class="fifteen">Fifteen minute program</div>
</div>

هل نظرت إلى أدلة التلفزيون الموجودة للإلهام؟

الجدول الذي يحتوي على الكثير من خيارات colspans هو الذي يستخدم هنا على سبيل المثال.

أعتقد أن هناك خيارين في الأساس.

استخدم الجداول، ولها colspans.لا يمكن أن يكون لديك سوى "عمود" واحد لفترة محدودة من الوقت، لذلك قد يتعين عليك التقريب إلى أقرب 5 أو 10 أو 15 دقيقة اعتمادًا على عدد الأعمدة في الساعة وقد يتطلب برنامج مدته ساعة واحدة colspan من 4 أو 6 أو حتى 12، كما أشرت في سؤالك.
استخدم CSS مع عناصر DIV عادية (أو يمكنك حتى جعلها UL وLIs، وUL لكل صف وLI لكل كتلة في هذا الصف إذا كنت تريد ذلك حقًا) وحدد عرض كل عنصر على حدة.يمكنك القيام بذلك بالنسبة المئوية (السماح للصف بأكمله بالتوسيع والتقلص) أو بالبكسل.قد ترغب في تجربة العناصر الداخلية، أي عنصر واحد لكل برنامج، إما على شكل كتل عائمة أو كتل مضمنة.يجب أن تكون العوامات جيدة طالما أن خطأ التقريب لا يؤدي إلى التفافها.

أعتقد من الناحية الدلالية أن الخيار الثاني هو الأفضل.كما أشرت بحق، فهو يشبه إلى حد كبير الجدول لذا يجب أن يكون الجدول مناسبًا، ولكن بمجرد أن تبدأ في استخدام العديد من الأعمدة أكثر مما تنوي إظهاره، وتمتد إلى حجم المساحات، فإنها تفقد جاذبيتها الدلالية.

وأعتقد أنك قد أظهرت أن البيانات الخاصة بك ليست في الحقيقة الجدول. إذا كنت راضيا CSS، ثم أود أن أقترح أن كنت السير في مسار باستخدام CSS وإعداد قواعد بهذه الطريقة.

وعلى سبيل المثال يمكن أن يكون الطبقات مثل خمسة دقائق، عشر دقائق، خمسة عشر مين، والثلاثين دقيقة، ساعة واحدة الخ .... سيتم تكوين كل من هذه القواعد لتعطيك العرض الصحيح وهكذا على. لأي شيء آخر خارج عن المألوف، هل يمكن بعد ذلك فقط حساب حجم على الطاير.

البيانات التي تقدمها تشبه في الواقع رسمًا بيانيًا أو مخططًا من نوع ما.لا يوجد عنصر HTML يتوافق مع هذا.أود أن أقول أن نهج الجدول منطقي.إن تقسيم الجدول إلى 1/6 أمر منطقي أيضًا.إنه تقييد للوسيط حيث لا يمكنك الحصول على colspan بقيمة 1.125.نظرًا لأنه سيتم إنشاء هذا الجدول برمجيًا، فلا أعتقد أن تقسيم كل خلية منطقية إلى 6 خلايا فعلية سيكون مشكلة كبيرة.ما عليك سوى اختبار عينة على أي متصفحات غير قياسية تهمك، مثل قارئ الشاشة.

قوائم التلفزيون؟إنها قائمة...

حسنًا، في الواقع، هناك بعض الخلافات الخطيرة حول هذا الأمر:

لذا قرر أيهما تفضل ثم اختر ما يناسبك..

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow