Problema con tablas HTML  

 
Miguel Ángel
 Miguel Ángel
Usuario eminente

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

Citar
Respondido : 18/09/2019 7:42 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 18/09/2019 8:22 pm

Cursos Gratuitos WordPress

Miguel Ángel
 Miguel Ángel
Usuario eminente

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.

ResponderCitar
Respondido : 18/09/2019 8:59 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 18/09/2019 11:00 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Miguel Ángel
 Miguel Ángel
Usuario eminente

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.

ResponderCitar
Respondido : 19/09/2019 1:12 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 19/09/2019 6:58 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Miguel Ángel
 Miguel Ángel
Usuario eminente

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

ResponderCitar
Respondido : 19/09/2019 9:38 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 19/09/2019 10:45 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Miguel Ángel
 Miguel Ángel
Usuario eminente

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.

ResponderCitar
Respondido : 19/09/2019 11:04 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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.

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 20/09/2019 12:15 am

Cursos Gratuitos WordPress

Miguel Ángel
 Miguel Ángel
Usuario eminente

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

, ¿no?

P.D.: Sigo sin entender cómo un tema de WordPress puede complicar tanto la creación de una tabla tan sumamente simple...

ResponderCitar
Respondido : 20/09/2019 1:11 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 20/09/2019 1:26 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Miguel Ángel
 Miguel Ángel
Usuario eminente

Perfecto, usaré esos códigos. Muchas gracias Jhon y Bulmaro.

ResponderCitar
Respondido : 20/09/2019 11:12 am

Por favor Iniciar Sesión o Registro