Saltar al contenido principal

WP Table Manager: Estilos de tablas

1. Formato

En la barra de herramientas, puede establecer el estilo de la celda, como: fuente, tamaño de fuente, estilo de texto, color de fondo de la celda, color del texto, alineación horizontal y vertical de la celda, ... Se puede aplicar para una sola celda o varias celdas

 

tabla de estilos

 

Puedes seleccionar el porcentaje para el editor de tablas. Esto significa que puedes ampliar o reducir la tabla, con un rango del 50 % al 200 %.

 

acercar y alejar

 

La altura de las filas y el ancho de las columnas se pueden definir en píxeles. Vaya al menú Formato > Aplicar tamaño de columna/líneay seleccione Cambiar tamaño de columna/fila. En la ventana emergente, seleccione el rango y establezca los píxeles para las columnas o filas. Haga clic en Listo para finalizar.

 

redimensionar columna

 

2. Temas y opciones

En cada tabla, puedes encontrar de selección de tema en el menú Tema. Simplemente haz clic en un tema para aplicarlo.

Al aplicar un tema, se reemplazarán todos los datos y estilos de la tabla. Para ello, aplique un tema, edite los datos para crear su propio tema y, a continuación, duplique las tablas.

 

elección del tema

Colores alternativos

En el mismo menú Tema > Colores alternativos, la función "Estilo automático" te ayuda a colorear la línea de tu tabla con para el encabezado y el pie de página . Puedes seleccionar los estilos de la plantilla o crear los tuyos propios en la configuración del plugin.

 

tema-alterar-color

 

Puedes eliminar el color alternativo haciendo clic en la "Eliminar > Eliminar estilo automático" del menú contextual. Tras tu confirmación, el color desaparecerá.

 

eliminar color alternativo

 

Alinear tabla

La opción `table align` se refiere a alinear el div que contiene toda la tabla, por ejemplo, centrarla. Puedes encontrarla en el menú Formato > Alinear tabla.

 

alineación de tabla

Resaltado de celda

También está disponible como opción resaltar celdas. Puede activar esta función en la configuración. Está desactivada por defecto. Puede seleccionar la fila resaltada para ajustar el color y la opacidad del resaltado.

 

resaltado de tabla

 

3. Agregar información sobre herramientas en las celdas

En cada celda de una tabla, puedes ver la opción Agregar información sobre herramientas al hacer clic derecho sobre ella.

 

añadir información sobre herramientas

 

Puedes configurar el ancho de la información sobre herramientas en píxeles. Esto te llevará a una información sobre herramientas con un editor para editar.

 

editor de información sobre herramientas

 

Agregue contenido y guárdelo, listo, la información sobre herramientas se mostrará en el lado público al pasar el mouse.

 

información sobre herramientas al pasar el mouse

 

4. Congelación de filas y columnas

Congelación de columnas

La opción de congelar columnas está disponible en el menú Formato > Opciones de diseño adaptable. Puede congelar hasta 5 columnas. El conteo comienza desde la primera columna.

 

columna de congelación

 

Para congelar columnas y filas, hay una opción adicional que le permite fijar la altura de la tabla (porque el contenedor de su tabla puede tener una altura infinita).

 

altura de la mesa

 

Cuando hayas elegido la columna que deseas congelar, podrás desplazarte por la tabla y mostrar siempre la columna fija.

 

visualización de línea fija

 

Congelación de filas

Puedes encontrarlo en el menú Formato > Encabezado de tabla; desde aquí puedes activar la opción y configurar las filas que deseas congelar (hasta 5 filas).

 

encabezado de tabla de congelación de filas

 

Si desea configurar la altura de la mesa, vuelva a las opciones de respuesta.

Luego, la primera fila se congelará en el frontend siguiendo la configuración.

 

congelación de filas

 

5. Ordenar y filtrar

Si desea ordenar o filtrar su tabla, diríjase al menú Formato > opción Ordenar y filtros

 

filtro de clasificación

 

Luego aparece una ventana emergente que contiene opciones de clasificación y filtrado. 

 

filtro-ordenamiento-ventana emergente

 

Si desea ordenar una tabla, simplemente habilite de ordenación en el frontend . Puede seleccionar una columna para el orden predeterminado y su dirección.

Por ejemplo, en este caso, seleccione la columna A con ASC .

 

opciones de clasificación

 

Hay 2 opciones de filtro:

 

opciones-de-filtro

 

  • Dentro de la columna: puede filtrar datos en el encabezado de cada columna. El botón de alternancia le ayudará a mostrar u ocultar el campo de búsqueda en el encabezado.

 

filtro dentro de la columna

 

  • Formulario de filtro avanzado: una vez seleccionada la opción, puede buscar y filtrar datos en una tabla

 

filtro avanzado

 

Búsqueda principal: Al habilitar esta función, se añadirá un campo de búsqueda en la interfaz. Esto permite a los usuarios buscar fácilmente en todos los datos de la tabla.

 

búsqueda principal

 

6. Relleno de celdas y radio del borde

Puede encontrar el ícono de borde en la barra de herramientas que ayuda a ajustar el relleno y el radio del borde en la celda.

 

borde de relleno

 

Ten en cuenta que si has aplicado un tema, se añadirá automáticamente un CSS personalizado. Por supuesto, puedes editarlo.

 

7. CSS personalizado

Vamos a ir un paso más allá. Si eres diseñador web y tienes conocimientos de CSS, podrás añadir CSS en Menú Formato > CSS personalizado. 

 

formato-css-personalizado

 

El código CSS se colorea usando el código espejo y se puede escribir con menos CSS, ¡también funciona!

 

CSS de tabla personalizada

 

Las celdas, líneas y columnas tienen coordenadas para identificarlas y aplicarles CSS personalizado. R es fila, C es columna.

 

visualización de CSS

 

8. Tablas adaptables de WordPress

¿Mis tablas son responsivas o utilizan el desplazamiento en dispositivos pequeños?

Ocultar Cols

WP Table Manager gestiona el diseño adaptable con una herramienta de prioridad, como una opción. Por defecto, la función adaptable está desactivada, lo que provoca un desbordamiento (aunque funciona perfectamente en dispositivos móviles). Para usar Ocultar columnas , ve a Menú Formato > Opciones adaptables.

 

columna de ocultación responsiva

 

El modo adaptable es avanzado; puedes definir una prioridad para ocultar columnas en dispositivos móviles. Cuando las columnas están ocultas, se mostrará un menú móvil con una casilla de verificación para forzar su visualización u ocultación. 
El tamaño de las columnas se fija durante la edición de la tabla. Si el tamaño de todas las columnas es demasiado grande para el contenedor, se producirá un desbordamiento y podrás desplazarte fácilmente en dispositivos móviles.

Tabla con desplazamiento (mejor para una pequeña cantidad de columnas)

 

desplazamiento de tabla adaptable

 

Tabla con columnas ocultas (mejor para una gran cantidad de columnas)

 

57bb0cb0ac948

 

Encabezado repetido

Esta es otra opción si desea insertar una tabla en un área pequeña de su sitio web. Debe ir a Formato de menú > Opciones de diseño adaptable.  Luego, seleccione Tipo de diseño adaptable > Encabezado repetido.

 

encabezado repetido

 

Habrá opciones para personalizar según su demanda:

  • Punto de interrupción responsivo (px): seleccione un valor de punto de interrupción en píxeles para definir cuándo la tabla cambiará a este modo responsivo
  • Altura máxima responsiva (px): cuando se activa el modo responsivo, dependiendo del valor del punto de interrupción, define una altura máxima para evitar una tabla muy larga
  • Estilo de modo responsivo: aplique un estilo predeterminado para este modo responsivo o use los colores de la tabla

Después de eso, podrás ver cómo se verá la tabla en el frontend.

 

encabezado repetido-frontend

 

Si está utilizando el encabezado repetido y Filtro está habilitada, puede filtrar escribiendo en el cuadro de texto en la vista móvil.

 

encabezado repetido de filtro

 

9. Exportar a Excel

Para guardar la tabla en su PC, vaya al menú Tablay haga clic en Exportar a Excel . El formato del archivo será *.xlsx después de exportarlo en la interfaz.

 

exportar-excel

 

10. Paginación

Esta función se encuentra en el menú Formato > Paginación de cada edición de tabla. Utilice el botón de alternancia para activarla y seleccione el número de filas que se mostrarán por página.

 

paginación-wptm

 

11. Estilo del borde de las celdas

Puede aplicar tipos de borde a su tabla, como ancho, color y estilo. Primero, seleccione el rango de celdas y haga clic en el icono de la barra de herramientas.

 

estilo de borde

 

12. Imprimir tabla en la interfaz

A veces, necesitas imprimir tu tabla. Para que aparezca el botón "Imprimir" en la interfaz, primero debes ir a la sección "Tabla del Menú" y marcar la opción "Imprimir".

 

botón de impresión