Guía de TV que enumera la 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 crear una tabla, ya que son datos 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...

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

Puedo hacer trampa y hacer cada <=> con colspan = 6, por lo que la unidad secundaria será de 5 min. y luego jugar con el colspan de cada show para ser largo en el tiempo / 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 espaguetis.

¿Qué debo hacer?

Answer 1

Al final, hemos decidido que una guía de televisión no es exactamente una mesa. Existe la sección de 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 el encabezado y la lista de canales y en cada li habrá otra lista, en el encabezado habrá una lista de horas (donde cada hora tiene un ancho constante) y en el resto de las li (canal) habrá una lista de los programas para un horario específico canal y cada li obtiene un ancho basado en la longitud 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

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

Utilice múltiples < div > s, cada uno con pantalla en línea o bloque en línea establecido en CSS. Establezca su ancho, probablemente mejor usando clases CSS, p. de la siguiente manera:

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

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

¿Has mirado las guías de TV existentes para inspirarte?

La opción de tabla con muchos colspans es la utilizada aquí, por ejemplo .

Creo que básicamente hay dos opciones.

• Use tablas y tenga colspans. Solo puede tener una 'columna' durante un período de tiempo finito, por lo que es posible que tenga 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 señala en su pregunta.
• Use CSS con DIV simples (o incluso podría hacerlos UL y LI, un 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 flotantes o bloques en línea. Los flotadores deben estar bien siempre que el error de redondeo no los haga envolver.

Creo semánticamente, la segunda opción es mejor. Como señala correctamente, es muy parecido a una tabla, por lo que una tabla debería ser apropiada, pero una vez que comienza a usar muchas más columnas de las que pretende mostrar, y los colspans a las áreas de tamaño, pierde el atractivo semántico.

Answer 4

Creo que has demostrado que tus datos no son realmente una tabla. Si se siente cómodo con CSS, le sugiero que siga la ruta del uso de CSS y configure 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 así en. Para cualquier otra cosa fuera de lo común, puede calcular el tamaño sobre la marcha.

Answer 5

Los datos que está presentando son realmente similares a un gráfico o tabla de tipos. No hay elemento HTML que corresponda a esto. Yo diría que el enfoque de la mesa tiene sentido. Dividir la tabla en 1/6 también tiene sentido. Es una limitación del medio que no puede tener un colspan de 1.125. Dado que esta tabla se generará mediante programación, 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 6

Listados de TV? Es una lista ...

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

• el Radio Times usa una lista
• TVGuide.co.uk utiliza un pantano de tablas anidadas de 4 niveles
• Sky usa una cantidad bastante impactante de divs y gran cantidad de javascript.

Decide cuál prefieres y elige ...