Guia TV listando semântica. não é uma tabela?

https://stackoverflow.com/questions/626224

06-07-2019
|

Pergunta

Eu preciso construir um guia de TV baseado na web listagem.

Quando comecei, pensei que todos necessidade I é construir uma tabela, uma vez que é um conjunto de dados tabulares.

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

mas infelizmente esta não é a situação. Enquanto o <th> são para cada 30 min. o comprimento show pode ser qualquer coisa de 5min. até algumas horas.

Eu posso enganar e fazer todos os <th> com colspan = 6 para que a unidade sub será de 5 min. e depois jogar com a colspan de cada show para ser comprimento no tempo / 5 (min.) e que é a minha colspan.

Mas (há sempre um mas), agora o que eu tenho não é uma tabela com dados tabulares, o que eu tenho é uma espécie de uma mesa espaguete.

O que devo fazer?

Solução 4

No final nós decidimos que um guia de TV não é exatamente uma mesa. Existe a secção de cabeçalho que mostra a hora e a parte do corpo que mostra os programas por hora, mas aqui é onde termina a parte de mesa.

Vamos fazê-lo como uma lista de listas a primeira lista é o cabeçalho e a lista de canais e em cada li haverá uma outra lista, no cabeçalho haverá uma lista de horas (onde cada hora recebe uma largura constante) e no resto do li (canal) haverá uma lista dos programas para um específico canal e cada li recebe uma largura com base no comprimento show.

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

Não é uma solução perfeita, mas estamos vivendo em um mundo imperfeito.

Outras dicas

Este não é definitivamente algo que você deve resolver com

Use vários

s, cada um tendo em linha de exibição ou inline-block set em CSS. Definir sua largura, provavelmente o melhor feito usando CSS-classes, por exemplo, da seguinte forma:

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

Então, o 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>

Você já olhou para guias de TV existentes para a inspiração?

A tabela com lotes opção colspans de é o utilizado aqui por exemplo .

Eu acho que existem basicamente duas opções.

usar tabelas, e têm colspans. Você só pode ter uma 'coluna' para uma quantidade finita de tempo, então você pode ter de volta para o mais próximo, 5, 10 ou 15 minutos, dependendo do seu número de colunas por hora e um programa de uma hora de duração pode ter um colspan de 4, 6, ou mesmo 12, como você aponta na sua pergunta.
Use CSS com DIVs simples (ou você pode até mesmo torná-los MMSS e LIs, uma UL para cada linha e um LI para cada bloco nessa linha se você realmente quer) e especificar a largura de cada item separadamente. Você poderia fazer isso em porcentagem (permitindo que toda a fila para expandir e contrair) ou pixels. Você pode querer experimentar com os elementos internos, ou seja, um para cada programa, sendo blocos quer flutuavam ou inline-blocos. Flutuadores deve ser muito bem contanto que o arredondamento erro não fazê-los quebrar.

Eu acho que semanticamente, a segunda opção é melhor. Como você observam com razão, é muito parecido com uma tabela para uma tabela deve ser apropriado, mas quando você começa a usar muito mais colunas do que você pretende mostrar, e colspans para áreas de tamanho, ele perde o apelo semântica.

Eu acho que você mostrou que seus dados não é realmente uma mesa. Se você está confortável com CSS, então eu sugiro que você ir abaixo da rota de usar CSS e configuração de regras dessa forma.

Por exemplo, você poderia ter classes como cinco minutos, dez minutos, quinze minutos, trinta minutos, uma hora etc .... cada uma dessas regras seria configurado para dar-lhe a largura correta e assim em. Para qualquer outra coisa fora do comum, você poderia, então, basta calcular o tamanho em tempo real.

Os dados que você está apresentando é muito semelhante a um gráfico ou tabela das sortes. Não há nenhum elemento HTML que corresponde a este. Eu diria que a abordagem da tabela faz sentido. Dividindo a tabela em 1 / 6ths faz sentido bem. É uma limitação do meio que você não pode ter um colspan de 1,125. Desde esta tabela será gerada programaticamente eu não acho que a divisão cada célula lógica em 6 células físicas vai ser um grande problema. Apenas testar uma amostra em quaisquer navegadores não-padrão que se preocupam, tais como um leitor de tela.

TV Listings? É uma lista ...

Bem, na verdade, existem algumas divergências sérias sobre isso:

Portanto, decidir que você preferir e faça a sua escolha ...

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow