Problema con tablas HTML  

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.

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:

y ahí va la imagen que me muestra el blog (en vista previa, no lo he publicado):

 

Espero vuestra respuesta. Un saludo.

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.

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.

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.

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

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.

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.

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:

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.

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

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

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