Телегид, перечисляющий семантику. Разве это не стол?

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

Это определенно не то, что вы должны решить с

Answer 2

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

Мы сделаем это как список списков первый список - заголовок и список каналов и в каждом 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 3

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

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

Answer 4

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

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

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

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

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

Answer 5

телепередач? Это список ...

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

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

Так что решайте, какой вы предпочитаете, и выбирайте ...

Answer 6

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