Lista de TV lista de semántica. ¿No es una mesa?

Question

Necesito crear una lista de guías de TV basadas en la web.

Cuando comencé, pensé que todo lo que necesitaba era construir una tabla, ya que se trata de una tabla de datos.

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

pero lamentablemente esta no es la situación. Mientras que <th> son por cada 30 min. la duración del espectáculo puede ser desde 5 minutos. hasta unas pocas horas.

Puedo hacer trampa y hacer cada <th> con colspan = 6, por lo que la unidad secundaria será de 5 min. y luego jugar con el colspan de cada show para que sea length in time/5 (min.) y ese es mi colspan.

Pero (siempre hay un pero), ahora lo que tengo no es una tabla con datos tabulares, lo que tengo es una especie de tabla de espagueti.

¿Qué debo hacer?

Answer 1

Al final hemos decidido d que una guía de TV no es exactamente una tabla. Hay una sección del encabezado que muestra las horas y la parte del cuerpo que muestra los espectáculos por hora, pero aquí es donde termina la parte de la tabla.

Lo haremos como una lista de listas la primera lista es la cabecera y la lista de canales y en cada li habrá otra lista, en la cabecera habrá una lista de horas (en la que cada hora se un ancho constante) y en el resto de los li's (canal) habrá una lista de los shows para un canal específico y cada li obtiene un ancho basado en la duración del espectáculo.

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

No es una solución perfecta pero estamos viviendo en un mundo imperfecto.

Answer 2

¿Ha buscado inspiración en las guías de TV existentes?

La tabla con mucha opción de colspans es la que se usó here for example.

Creo que básicamente hay dos opciones.

• Use las tablas y colóquese. Solo puede tener una 'columna' por un período finito de tiempo, por lo que puede tener que redondear al más cercano, 5, 10 o 15 minutos, dependiendo de su número de columnas por hora y un programa de una hora de duración podría tener un colspan de 4, 6 o incluso 12, como usted señala en su pregunta.
• Utilice CSS con DIV simples (o incluso podría hacer que sean UL y LI, una UL para cada fila y un LI para cada bloque en esa fila, si realmente lo desea) y especifique el ancho de cada elemento por separado. Puede hacer esto en porcentaje (permitiendo que toda la fila se expanda y contraiga) o píxeles. Es posible que desee experimentar con los elementos internos, es decir, uno para cada programa, ya sea bloques flotados o bloques en línea. Los flotadores deben estar bien siempre que el error de redondeo no los haga envolventes.

Creo que semánticamente, la segunda opción es mejor. Como bien indica, se parece mucho a una tabla, por lo que una tabla debe ser adecuada, pero una vez que utiliza muchas más columnas de las que pretende mostrar, y colpanea para dimensionar áreas, pierde el atractivo semántico.

Answer 3

Los datos que está presentando son realmente similares a un gráfico o una tabla de géneros. No hay un elemento HTML que corresponda a esto. Yo diría que el enfoque de mesa tiene sentido. Dividir la tabla en 1/6 también tiene sentido. Es una limitación del medio que no puedes tener un colspan de 1.125. Dado que esta tabla se generará programáticamente, no creo que dividir cada celda lógica en 6 celdas físicas sea un problema importante. Simplemente pruebe una muestra en cualquier navegador no estándar que le interese, como un lector de pantalla.

Answer 4

Creo que has demostrado que tus datos no son realmente una tabla. Si te sientes cómodo con CSS, entonces te sugiero que vayas por la ruta de usar CSS y establezcas las reglas de esa manera.

Por ejemplo, podría tener clases como cinco minutos, diez minutos, quince minutos, treinta minutos, una hora, etc. ... cada una de estas reglas se configuraría para darle el ancho correcto y pronto. Para cualquier otra cosa fuera de lo común, podría simplemente calcular el tamaño sobre la marcha.

Answer 5

Esto definitivamente no es algo que deba resolver con <tabla>.

Utilice <div> s, cada una de ellas con pantalla en línea o bloque en línea configurado en CSS. Establezca su ancho, probablemente mejor utilizando clases CSS, p. Ej. de la siguiente manera:

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

A continuación, el HTML: Listados

<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

de televisión? Es una lista ...

Bueno, en realidad, hay algunos desacuerdos serios sobre esto:

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

Así que decide que prefiere y tomar su seleccione ...