Semantica - ¿Como maquetarian esto?

[safe]

Tengo que maquetar un listado de peliculas con algunos datos de cada una.
El listado vendria a ser algo asi:

Código:

+  |  Nombre de pelicula  |  Genero  |  Duracion  |  Rating  |  Etc
-------------------------------------------------------------------------------
+  |  Dulce y Melancolico |  Drama   |  125 min.  |     8    |  Etc
+  |  Dulce y Melancolico |  Drama   |  125 min.  |     4    |  Etc
+  |  Dulce y Melancolico |  Drama   |  123 min.  |     5    |  Etc
+  |  Dulce y Melancolico |  Drama   |  122 min.  |     6    |  Etc
+  |  Dulce y Melancolico |  Drama   |  124 min.  |     7    |  Etc
+  |  Dulce y Melancolico |  Drama   |  145 min.  |     8    |  Etc

Eso claramente son datos tabulados, por lo que no dudo que lo correcto sea utilizar una tabla.

El problema es que si el usuario presiona el "+" tiene que desplegarse un fila abajo con la informacion ampliada de la pelicula, que ya no son datos tabulados. Y eso es lo que no se como manejar. Porque la solucion mas sencilla seria aañadir una fila con colspan=X y adentro poner toda la informacion. Pero dudo que eso sea semanticamente correcto. Pero la verdad es que todavia no se me ocurrio otra solucion.
Porque creo que lo correcto seria poner esa info en un celda de la misma fila. Pero como hago para posicionarla como una nueva fila?

Alguna idea?

[PatomaS]

Hola

De hecho, la solución que planteas es correcta.

Hay otras opciones como tener tablas separadas para cada fila y debajo un div con el contenido y la misma mecánica que planteas, seguramente algo así es lo que te hacía dudar, sin embargo, eso si es totalmente impráctico y poco semántico.

Yo usaría, sin duda alguna una solución con tablas, tal y como mencionas y una fila inferior con la información ampliada. al menos si tengo que usar esa maqueta.

Dado que vas a usar javascript, otra opción es que la información salga en una capa en alguna posición de la pantalla que el diseño te lo permita, no estando esta información incluida en la tabla si no en una serie de divs o en uno solo cuya información escribes en tiempo de ejecución o creando un div vacío, clonándolo y rellenándolo cada vez con datos de una variable relacionada con cada peli.

Esa parte tiene opciones, sin embargo, tu planteamiento es correcto.

Felicidad

[buzu]

Si realmente estas interesado en la semantica, me inclo mas por la solucion en la capa aprte.... quiza puedas adaptar el lightbox o hacer tu mismo algo similar... no es dificil, se me ocurre una capa superior a la que le pasas la informacion mediante javascript.y con javascript controlas la visiblidad de la capa.

[AlZuwaga]

Tal vez... ¿colocando la información ampliada de la película en la última columna, ocultando ésta a la vista con JS y luego mediante DOM manipular la tabla para que al hacer click en el ícono +/- la info de dicha columna se muestre/oculte en un <td colspan=X> generado al vuelo?

Navegadores que no interpreten/tengan deshabilitado JS mostrarán la "tabla ampliada" y navegadores que si lo interpreten dispondrán de una característica extra... ¿graceful degradation que le llaman?

Saludos

[safe]

Muchas gracias por todas las respuestas!
El tema es que yo solo tengo quemaquetar el HTML y el resto del codigo lo hace un programador. Entonces las soluciones que proponen son solo darle mas trabajo al programador y solo voy a lograr que me odie un poco mas...

Al final decidi hacerlo con una lista de peliculas con una sublista con la informacion de cada pelicula.
Va a ser un tanto complicado, pero creo que puede llegar a quedar bien. Y sino, ya tendran noticias mias.

[buzu]

pufffffffff.... si es buen programador para esl sera algo snecillo, si es un nuevo pero le gusta programar sera un reto que con gusto aceptara y si no, que se valla al diablo y se busque un empleo que le guste en realidad.

[AlZuwaga]

Saludos tardíos. Hace tiempo que terminé un script que cumple con el planteo que hice más arriba, pero por falta de memoria olvidé publicarlo. Acá lo dejo: Alterando una tabla con Javascript. Espero le sea de utilidad a alguien