Avisos
Vaciar todo
Buenas a todos,
Tengo un problema con las tablas HTML en mi WordPress. Quiero hacer una tabla con dos columnas: la primera de ellas dividida en tres filas, con texto en cada una de ellas; la segunda, con las tres filas unidas en una sola y una imagen dentro.
Tengo el código para hacerlo (usando rowspan), y lo he probado en editores HTML y se ve como quiero (de hecho. en el editor visual de WordPress se ve perfectamente), pero en mi blog no se ve bien. El problema es que se crea un hueco a la izquierda de la imagen y las filas de la columna izquierda no aparecen al principio de la tabla, sino mucho más abajo. Os dejo una captura:
Hasta he usado un plugin para crear tablas, Data Table Generator, y hace lo mismo (de hecho, esa captura es lo que muestra el plugin).
Entiendo que el problema está relacionado con el tema que uso, "Extra" de Elegant Themes, pero ahora mismo no sé qué tendría que añadir/quitar/modificar para que no se creen esos espacios a un lado de la imagen.
Muchas gracias de antemano por vuestra ayuda.
Un saludo.
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 18/09/2019 7:42 pm
Hola
Podrías enviarnos la url exacta en donde aparece la tabla que estas construyendo?
Envíanos también el código HTML que has usado para verificar.
Saludos.
Respondido : 18/09/2019 8:22 pm
Buenas Jhon. Muchas gracias por contestar.
Como la tabla no se veía como yo quería no la he publicado, así que no te puedo pasar url.
Te paso un ejemplo de código que en el editor visual de WordPress se ve como yo quiero pero que luego en la entrada del blog se ve mal. Ahí va el código:
| Título | |
| Autor | |
| Editorial |
y ahí va la imagen que me muestra el blog (en vista previa, no lo he publicado):
Espero vuestra respuesta. Un saludo.
Esta publicación ha sido modificada el hace 4 años por antonio
Respondido : 18/09/2019 8:59 pm
Hola
Es posible que haya algún tipo de conflicto con alguna regla CSS de tu theme, ya que veo que el código es correcto.
Otra opción sería que uses un código alterno, por ejemplo basado en flex y divs, sería:
Contenido solo visible a usuarios registrados
Saludos.
Esta publicación ha sido modificada el hace 4 años por antonio
Respondido : 18/09/2019 11:00 pm
Entiendo que el problema está ahí, en algún conflicto con el CSS del theme, pero la verdad es que no sé como buscarlo. Y no estoy familiarizado con el tipo de código que me comentas para las tablas. ¿Alguna guía para aprender sobre ello?
Por cierto, he incluido el código en una entrada antigua de mi blog, por si a partir de ahí se puede buscar el posible conflicto para poder solucionarlo:
Contenido solo visible a usuarios registrados
Muchas gracias. Un saludo.
Respondido : 19/09/2019 1:12 am
Hola Miguel
Pues vaya que si han sido muchos los estilos y otros elementos que he tenido que ir modificando y no me sorprenderá que algún detalle se me halla pasado, por favor házmelo saber si es el caso.
| Título | |
| Autor | |
| Editorial |
Esta publicación ha sido modificada el hace 4 años por antonio
Respondido : 19/09/2019 6:58 am
Buenas Bulmaro. Muchas gracias por contestar.
He incluido el código que proporcionas en la misma entrada en la que estaba el otro, y lo que se ve es lo siguiente:
Te dejo el enlace de nuevo para que lo veas:
Contenido solo visible a usuarios registrados
Vamos, que estamos como al principio :(.
Respondido : 19/09/2019 9:38 pm
Hola
Ya veo el conflicto, el problema es que hay un estilo que esta llevándolo a baselinea
Prueba agregar el siguiente código CSS:
table td{
vertical-align:middle;
}
Para agregar este código puedes revisar: https://www.webempresa.com/blog/como-agregar-codigo-css-en-wordpress.html
Saludos.
Respondido : 19/09/2019 10:45 pm
Buenas Jhon,
La modificación que me has propuesto ha solucionado en gran parte el problema. Ahora, con el código que me proporcionó Bulmaro y tu modificación la tabla se ve asi:
Lo que no sé es por qué no sale la línea vertical que debe dividir las dos columnas. Ah, y tampoco sé por qué las líneas divisorias de la tabla son iguales independientemente del valor que le dé a "border".
Perdonad por la insistencia, pero no llego a entender por qué algo tan sencillo como una tabla como ésta no llega a salir bien.
Muchas gracias.
Respondido : 19/09/2019 11:04 pm
Hola Miguel,
Tienes razón, no debería ser un problema una tabla html pero la realidad es que se vuelven complejas cuando se involucran muchos estilos CSS, en este caso del tema o detalles que simplemente se nos pasan o por alto o , dada la naturaleza del medio por el que nos comunicamos, mal entendemos los requerimientos. Solo necesitamos ser pacientes 😉
Prueba con lo siguiente:
| Título | |
| Autor | |
| Editorial |
Nota que modifiqué el estilo de la imagen, removí los anteriores estilos CSS y sólo la centré, si la deseas como estaba anteriormente basta con que la dejes como estaba. Quedo atento al tema.
Saludos.
Esta publicación ha sido modificada el hace 4 años por antonio
Respondido : 20/09/2019 12:15 am
Hola de nuevo Bulmaro. Antes de nada, muchas gracias por la paciencia.
La cosa ya se va pareciendo a una tabla html normal y corriente. Con tu código, ahora se ve así:
Entiendo que para que se vea bien debería copiar ese código en todos los
P.D.: Sigo sin entender cómo un tema de WordPress puede complicar tanto la creación de una tabla tan sumamente simple...
Respondido : 20/09/2019 1:11 am
Hola Miguel,
En efecto, aunque olvidé mencionarlo, ejemplifiqué la primer celda con los bordes de color distinto para que pudieras tu replicarlo en el resto y poner los colores que prefieras.
La linea que modifica el color es:
td{
border: 1px solid blue !important;
}
La propiedad border aplica para 4 bordes, si quisieras un color distinto por borde seria algo asi:
td{
border-right: 1px solid blue !important;
border-left: 1px solid yellow !important;
border-bottom: 1px solid red !important;
border-top: 1px solid green !important;
}
Respondido : 20/09/2019 1:26 am
Perfecto, usaré esos códigos. Muchas gracias Jhon y Bulmaro.
Respondido : 20/09/2019 11:12 am
