Семантика перечисления телегида.Разве это не стол?

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 мин.продолжительность шоу может составлять от 5 минут.до нескольких часов.

Я могу жульничать и заставлять каждого <th> с colspan = 6, таким образом, вспомогательный блок будет равен 5 мин.а затем воспроизведите с colspan каждого шоу, чтобы оно было длительностью по времени / 5 (мин.), и это мой colspan.

Но (всегда есть "но"), теперь у меня есть не таблица с табличными данными, а что-то вроде таблицы-спагетти.

Что мне следует делать?

Answer 1

В конце мы решили, что телегид - это не совсем таблица. В разделе заголовка показаны часы и часть тела, в которой показаны показы по часам, но здесь заканчивается часть таблицы.

Мы сделаем это как список списков первый список - заголовок и список каналов и в каждом li будет другой список, в заголовке будет список часов (где каждый час получает постоянную ширину), а в остальных li (канале) будет список шоу для определенного канал и каждый li получает ширину в зависимости от длины шоу.

<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

Это определенно не то, что вы должны решить с помощью < table >.

Используйте несколько < div > s, каждый из которых имеет встроенный или встроенный блок отображения в 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>

Answer 3

Вы просматривали существующие телегиды в поисках вдохновения?

Используется опция таблица с большим количеством значений colspans вот, например,.

Я думаю, что в основном есть два варианта.

• Используйте таблицы и имейте colspans.У вас может быть только один "столбец" в течение конечного промежутка времени, поэтому вам, возможно, придется округлять до ближайшего, 5, 10 или 15 минут, в зависимости от количества ваших столбцов в час, а программа продолжительностью в один час может иметь диапазон 4, 6 или даже 12, как вы указываете в своем вопросе.
• Используйте CSS с простыми DIVS (или вы могли бы даже сделать их ULS и LIS, UL для каждой строки и LI для каждого блока в этой строке, если вы действительно хотите) и укажите ширину каждого элемента отдельно.Вы могли бы сделать это в процентах (позволяя всей строке расширяться и сжиматься) или пикселях.Возможно, вы захотите поэкспериментировать с внутренними элементами, то есть по одному для каждой программы, представляющими собой либо плавающие блоки, либо встроенные блоки.С плавающими значениями должно быть все в порядке до тех пор, пока ошибка округления не приведет к их переносу.

Я думаю, семантически второй вариант лучше.Как вы справедливо заметили, это очень похоже на таблицу, поэтому таблица должна быть подходящей, но как только вы начинаете использовать гораздо больше столбцов, чем собираетесь показывать, и colspans для увеличения размеров областей, она теряет семантическую привлекательность.

Answer 4

Я думаю, вы показали, что ваши данные на самом деле не являются таблицей. Если вы знакомы с CSS, я бы посоветовал вам пойти по пути использования CSS и настройки правил таким образом.

Например, у вас могут быть такие классы, как пять минут, десять минут, пятнадцать минут, тридцать минут, один час и т. д. ... каждое из этих правил будет настроено так, чтобы дать вам правильную ширину и т. д. на. Для чего-то еще необычного, вы можете просто рассчитать размер на лету.

Answer 5

Представленные вами данные действительно похожи на график или диаграмму сортов. Нет HTML-элемента, который соответствует этому. Я бы сказал, что настольный подход имеет смысл. Разделение таблицы на 1/6 также имеет смысл. Это ограничение среды, что у вас не может быть colspan 1.125. Поскольку эта таблица будет сгенерирована программно, я не думаю, что разделение каждой логической ячейки на 6 физических ячеек будет серьезной проблемой. Просто протестируйте образец в любых нестандартных браузерах, например, для чтения с экрана.

Answer 6

Телепрограммы?Это список...

Ну, на самом деле, есть несколько серьезных разногласий по этому поводу:

• Radio Times действительно использует список
• TVGuide.co.uk использует болото из 4-уровневых вложенных таблиц
• Sky использует довольно шокирующее количество divs и много javascript.

Так что решайте, что вам больше нравится, и делайте свой выбор...