acordeon y tablas

[bibianaalvarez]

Buenas!
La verdad es que tengo un problema que no se como arreglar y me gustaría saber si alguien ha encontrado la solución.

Necesito utilizar un menú acordeon, lo he colgado en:
http://www.bibianaalvarez.com/acordeon.html

El problema es que necesito añadir una pequeña tabla de datos en uno de los apartados, y si insero una tabla el acordeón donde la coloco no se cierra.

Si intento ordenar los datos en capas, tampoco se cierra.

Alguien sabe si hay alguna solución? o es imposible.

Muchas gracias de antemano, y si a alguien le resulta interesante se lo pueden descargar en: http://www.bibianaalvarez.com/acordeon.zip

[IsaBelM]

no es necesario usar html para crear una tabla, lo puedes hacer con css

[ElMaestroLiendre]

Hazle caso al mensaje anterior, crea la tabla en css y haz la llamada a class="tabla". Debe funcionar...

[ElMaestroLiendre]

Completo mi mensaje anterior.

Si nunca has creado tablas mediante CSS, ya es hora que lo comiences a hacer. De cualquier forma puedes utilizar el siguiente enlace para bajarte diseños ya realizados. Son más de 80 los expuestos y, si acaso, sólo debes bajártelos y modificarlos a tu gusto.

http://klavina.com/csstablegallery

Aquí te dejo un código de una tabla elegante en CSS, como ejemplo.

table {font: 85% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;padding: 0; margin: 0; border-collapse: collapse; color: #333; background: #F3F5F7;}
table a {color: #3A4856; text-decoration: none; border-bottom: 1px solid #C6C8CB;}
table a:visited {color: #777;}
table a:hover {color: #000;}
table caption {text-align: left; text-transform: uppercase; padding-bottom: 10px; font: 200% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;}
table thead th {background: #3A4856; padding: 15px 10px; color: #fff; text-align: left; font-weight: normal;}
table tbody, table thead {border-left: 1px solid #EAECEE; border-right: 1px solid #EAECEE;}
table tbody {border-bottom: 1px solid #EAECEE;}
table tbody td, table tbody th {padding: 10px; background: url("td_back.gif") repeat-x; text-align: left;}
table tbody tr {background: #F3F5F7;}
table tbody tr.odd {background: #F0F2F4;}
table tbody tr:hover {background: #EAECEE; color: #111;}
table tfoot td, table tfoot th, table tfoot tr {text-align: left; font: 120% "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif; text-transform: uppercase; background: #fff; padding: 10px;}

Y ya sabes... class="table" y listo.

[bibianaalvarez]

Muchas gracias por la respuesta, de antemano,
pero tengo que decir que llevo horas intentando entender esto y no se como hacerlo.

Tengo que reconocer como ya veis que se muy poco de css.

He creado una hora de estilos css con la imformacion que me pasas, o cualquiera de la página del enlace, y la he adjuntado a mi documento html.

Pero ahora como se genera la tabla? Se que debo parecer tonta y eso pero...

El class no es para la etiqueta <table>?

Gracias si me podeis ayudar de nuevo, he probado de muchas maneras

[ElMaestroLiendre]

Olvida lo que comenté antes, he visto tu código y la solución debe ir por otros derroteros...

No soy un experto en javascript, pero si quieres que te de mi opinión, imagino que la solución partirá por no tener un texto "plano" donde quieras colocar una tabla, sino hacer una llamada a una función javascript que se encargue de generar la tabla y colocarlo en el lugar adecuado con el evento onclick o incluso con onfocus.

Algo parecido a:

function textoytabla(){
document.getElementById('id_elemento').innerHTML ("El texto que debas poner... <br><br><table border='1'><tr><td>...</td><td>...</td></tr></table>");
}

A pesar de todo no soy demasiado optimista, porque la función javascript que hace el efecto del acordeón, puede dar problemas por cualquier lado con un código para la que no ha sido diseñada.

Pruébala, y a ver si algún experto de javascript te echa un cable. Pero me parece que la cosa puede estar crudita... aunque otra posibilidad es que hagas una tabla muy rústica con retornos de carro y tabuladores, e intentar alinear los contenidos... (un poco chapucilla, verdad?).

[bibianaalvarez]

Muchas gracias por la respuesta, he encontrado una solución.
Hay una página (http://www.emenia.es/lista-desplegable-y-plegable-con-jquery/comment-page-1/#comment-329) en la que ofrecen otra posibilidad de acordeon, en la que no tengo el problema de la tabla.

Por si alguien mas la buscaba,

Un saludo