टीवी गाइड लिस्टिंग semantics। क्या यह एक टेबल नहीं है?

Question

मुझे एक वेब आधारित टीवी गाइड लिस्टिंग बनाने की जरूरत है।

जब मैंने शुरू किया तो मैंने सोचा कि मुझे एक टेबल बनाने की ज़रूरत है क्योंकि यह एक सारणीबद्ध डेटा है।

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 मिनट के लिए हैं। शो की लंबाई 5min से कुछ भी हो सकती है। कुछ घंटों तक।

मैं धोखा दे सकता हूं और प्रत्येक <th> को colspan = 6 के साथ बना सकता हूं ताकि उप इकाई 5 मिनट हो। और फिर प्रत्येक शो के कोस्पेन के साथ समय/5 (मिनट) में लंबाई के साथ खेलते हैं और यह मेरा दल है।

लेकिन (हमेशा एक है लेकिन), अब मेरे पास टैब्यूलर डेटा वाला एक टेबल नहीं है, जो मेरे पास कुछ प्रकार की स्पेगेटी टेबल है।

मुझे क्या करना चाहिए?

Answer 1

अंत में हमने फैसला किया है डी कि एक टीवी गाइड बिल्कुल एक टेबल नहीं है। हेडर सेक्शन है जो घंटे और शरीर का हिस्सा दिखाता है जो शो द्वारा शो दिखाता है लेकिन यहां वह जगह है जहां टेबल भाग समाप्त होता है।

हम सूचियों पहली सूची शीर्षक है की एक सूची और चैनलों सूची के रूप में यह करना होगा और हर ली में एक और सूची होगी, शीर्षक में वहाँ (जहां हर घंटे हो जाता है घंटे की एक सूची हो जाएगा एक निरंतर चौड़ाई) और बाकी के ली (चैनल) में एक विशिष्ट चैनल के लिए शो की एक सूची होगी और प्रत्येक ली को शो की लंबाई के आधार पर चौड़ाई मिल जाएगी।

<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> 

यह एक सही समाधान नहीं है लेकिन हम एक अपूर्ण दुनिया में रह रहे हैं।

Answer 2

क्या आपने प्रेरणा के लिए मौजूदा टीवी गाइड देखा है?

बहुत सारे कोल्स्पन्स विकल्प वाली तालिका here for example है।

मुझे लगता है कि मूल रूप से दो विकल्प हैं।

• टेबल का उपयोग करें, और colspans है। आपके पास सीमित समय के लिए केवल एक 'कॉलम' हो सकता है, इसलिए आपको प्रति घंटा कॉलम की संख्या के आधार पर निकटतम, 5, 10, या 15 मिनट तक पहुंचना पड़ सकता है और एक घंटे के लंबे कार्यक्रम में हो सकता है जैसा कि आप अपने प्रश्न में इंगित करते हैं, 4, 6, या यहां तक ​​कि 12 का एक दल।
• सादा डीवीवी के साथ सीएसएस का उपयोग करें (या आप उन्हें प्रत्येक पंक्ति के लिए यूएल और एलआईएस, उस पंक्ति में प्रत्येक ब्लॉक के लिए एक एलआई भी बना सकते हैं यदि आप वास्तव में चाहते हैं) और प्रत्येक आइटम की चौड़ाई अलग से निर्दिष्ट करें। आप इसे प्रतिशत में कर सकते हैं (पूरी पंक्ति को विस्तार और अनुबंध करने की अनुमति देता है) या पिक्सल। आप आंतरिक तत्वों के साथ प्रयोग करना चाह सकते हैं, यानी प्रत्येक कार्यक्रम के लिए, या तो फ्लोट किए गए ब्लॉक या इनलाइन-ब्लॉक होने के कारण। फ़्लोट्स तब तक ठीक होनी चाहिए जब तक कि गोल करने की त्रुटि उन्हें लपेट न दे।

मुझे लगता है कि अर्थात्, दूसरा विकल्प बेहतर है। जैसा कि आप सही ढंग से इंगित करते हैं, यह एक टेबल की तरह बहुत अधिक है, इसलिए एक टेबल उचित होना चाहिए, लेकिन एक बार जब आप दिखाने के इरादे से कई कॉलम का उपयोग कर लेते हैं, और आकार क्षेत्रों में कोल्स्पन, यह अर्थपूर्ण अपील खो देता है।

Answer 3

जो डेटा आप पेश कर रहे हैं वह वास्तव में ग्राफ या चार्ट के समान है। इसमें कोई HTML तत्व नहीं है जो इसके अनुरूप है। मैं कहूंगा कि तालिका दृष्टिकोण समझ में आता है। तालिका को 1/6 वें स्थान पर विभाजित करना भी समझ में आता है। यह माध्यम की एक सीमा है कि आपके पास 1.125 का एक दल नहीं हो सकता है। चूंकि यह तालिका प्रोग्रामेटिक रूप से जेनरेट की जाएगी, मुझे नहीं लगता कि प्रत्येक लॉजिकल सेल को 6 भौतिक कोशिकाओं में विभाजित करना एक बड़ी समस्या होगी। बस स्क्रीन रीडर जैसे किसी गैर-मानक ब्राउज़र पर नमूना का परीक्षण करें।

Answer 4

मुझे लगता है कि आपने दिखाया है कि आपका डेटा वास्तव में एक तालिका नहीं है। यदि आप सीएसएस के साथ सहज हैं, तो मैं सुझाव दूंगा कि आप सीएसएस का उपयोग करने और इस तरह के नियमों को स्थापित करने के मार्ग पर जायेंगे।

उदाहरण के लिए आपके पास पांच मिनट, दस-मिनट, पंद्रह मिनट, तीस मिनट, एक घंटे आदि जैसे वर्ग हो सकते हैं .... इनमें से प्रत्येक नियम आपको सही चौड़ाई देने के लिए कॉन्फ़िगर किया जाएगा और शीघ्र। सामान्य से बाहर किसी और चीज के लिए, आप बस फ्लाई पर आकार की गणना कर सकते हैं।

Answer 5

यह निश्चित रूप से कुछ नहीं है जिसे आपको < तालिका > के साथ हल करना चाहिए।

एकाधिक <div> एस का उपयोग करें, प्रत्येक में सीएसएस में इनलाइन या इनलाइन-ब्लॉक सेट प्रदर्शित होता है। अपनी चौड़ाई निर्धारित करें, शायद सीएसएस-कक्षाओं का उपयोग करके सबसे अच्छा किया गया है, उदा। के रूप में इस प्रकार है:

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> 

Answer 6

TV सूची? यह एक सूची है ...

खैर वास्तव में, वहाँ कुछ गंभीर असहमति इस पर कर रहे हैं:

• the Radio Times does use a list
• TVGuide.co.uk uses a morass of 4 level nested tables
• Sky use a quite shocking number of divs and lot of javascript.

तो तय है जो आप पसंद करते हैं और अपने ले चुनें ...