{"id":8251,"date":"2025-04-06T22:51:14","date_gmt":"2025-04-06T22:51:14","guid":{"rendered":"https:\/\/tableberg.com\/?p=8251"},"modified":"2025-04-26T16:32:24","modified_gmt":"2025-04-26T16:32:24","slug":"como-crear-tablas-apilables-en-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/es\/how-to-create-stackable-tables-in-wordpress\/","title":{"rendered":"C\u00f3mo crear tablas apilables en WordPress"},"content":{"rendered":"

Las tablas est\u00e1ndar suelen funcionar bien en los ordenadores de sobremesa. Todo encaja en su sitio y el dise\u00f1o es limpio. Pero cuando se ven en un tel\u00e9fono o una tableta, esas mismas tablas suelen fallar. Se extienden demasiado y obligan a los usuarios a desplazarse lateralmente para leer una sola fila. <\/p>\n\n\n\n

Las tablas apilables resuelven este problema convirtiendo cada fila en un bloque vertical de informaci\u00f3n. En lugar de mostrar los datos en una sola l\u00ednea, el contenido se apila uno debajo de otro y produce un entorno m\u00e1s f\u00e1cil para que la tabla sea comprensible en pantallas peque\u00f1as.<\/p>\n\n\n\n

Sin embargo, esta disposici\u00f3n no es \u00fatil en un ordenador de sobremesa. Con suficiente espacio disponible, las tablas normales son m\u00e1s f\u00e1ciles de navegar y m\u00e1s eficientes. Las tablas apilables est\u00e1n dise\u00f1adas principalmente para mejorar la legibilidad en dispositivos m\u00f3viles, no para sustituir a las tablas est\u00e1ndar en todos los tama\u00f1os de pantalla.<\/p>\n\n\n\n

En este art\u00edculo, te explicaremos c\u00f3mo crear una tabla apilable utilizando el plugin Tableberg y ajustarla para pantallas m\u00f3viles.<\/p>\n\n\n\n

\n\n\n\n

\u00bfQu\u00e9 es una mesa apilable?<\/strong><\/h2>\n\n\n\n

Una tabla apilable es una versi\u00f3n adaptable de una tabla normal que ajusta su dise\u00f1o en pantallas m\u00e1s peque\u00f1as. En los ordenadores de sobremesa, una tabla puede aparecer como una cuadr\u00edcula est\u00e1ndar con filas y columnas. Pero en los dispositivos m\u00f3viles, las tablas anchas pueden resultar dif\u00edciles de leer y requerir desplazamiento horizontal. Las tablas apilables solucionan este problema convirtiendo cada fila en un bloque vertical, en el que las etiquetas de las columnas se muestran encima de cada valor. Esto facilita la lectura y el desplazamiento por el contenido en pantallas estrechas sin perder informaci\u00f3n. En la mayor\u00eda de los casos, esto se hace usando CSS o plugins que soportan dise\u00f1os de tablas responsivas. Los mejores resultados se obtienen utilizando plugins con ajustes m\u00f3viles integrados o clases de utilidad que detectan el ancho de la pantalla. Pero es mejor tener en cuenta que, antes de aplicar el apilamiento, hay que comprobar cu\u00e1ntas columnas se tienen y si el contenido sigue siendo legible. <\/p>\n\n\n\n

\n\n\n\n

Crear tablas apilables en WordPress<\/strong><\/h2>\n\n\n\n

Para mostrar c\u00f3mo funcionan realmente las tablas apilables en WordPress, utilizaremos la funci\u00f3n Tableberg <\/a>plugin. Es f\u00e1cil de usar, admite todo tipo de contenido dentro de las celdas de la tabla e incluye ajustes integrados para apilar tablas en m\u00f3viles. Sigamos con los pasos. <\/p>\n\n\n\n

Paso 1: Instalar y activar Tableberg<\/strong><\/h3>\n\n\n\n

En el panel de control de WordPress, seleccione Plugins<\/strong> \u2192 A\u00f1adir nuevo<\/strong>y, a continuaci\u00f3n, busque Tableberg<\/strong>. Haga clic en Instalar ahora<\/strong>y una vez instalado, pulsa Activar <\/strong>para empezar a utilizarlo en su sitio web.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n
\n\n\n\n

Paso 2: Insertar una tabla<\/strong><\/h3>\n\n\n\n

Abre el post o la p\u00e1gina donde quieras la tabla. Utilice el bot\u00f3n insertador de bloques (bot\u00f3n +)<\/strong>Buscar \"Tableberg\", <\/strong>e ins\u00e9rtela. Se te pedir\u00e1 que elijas el n\u00famero de filas y columnas, en funci\u00f3n del tipo de tabla que quieras crear.<\/p>\n\n\n\n

\"Insertar<\/figure>\n\n\n\n
\n\n\n\n

Paso 3: A\u00f1adir contenido a la tabla<\/strong><\/h3>\n\n\n\n

Haz clic en cada celda y empieza a rellenar el contenido. Puedes a\u00f1adir texto, im\u00e1genes, iconos, puntuaciones con estrellas, botones, cintas o listas-Tableberg admite varios tipos de bloques dentro de cada celda.<\/p>\n\n\n\n

\"A\u00f1adir<\/figure>\n\n\n\n
\n\n\n\n

Paso 4: Activar el modo de apilamiento responsivo<\/strong><\/h3>\n\n\n\n

Para aplicar los ajustes de respuesta, primero debe seleccionar toda la tabla. Haga clic en el borde exterior de cualquier celda y, cuando aparezca la barra de herramientas, seleccione el icono de la tabla. Esto asegurar\u00e1 que toda la tabla est\u00e9 seleccionada.<\/p>\n\n\n\n

\"Seleccionar<\/figure>\n\n\n\n

Con la tabla completa seleccionada, busque en el panel de configuraci\u00f3n del bloque de la derecha. Despl\u00e1zate hacia abajo hasta que encuentres la secci\u00f3n llamada Responsive Settings. Activa la opci\u00f3n que permite que la tabla se ajuste en pantallas de m\u00f3viles y tabletas.<\/p>\n\n\n\n

\"Activar<\/figure>\n\n\n\n

Paso 5: Elegir el modo de pila y configurar el comportamiento<\/strong><\/h3>\n\n\n\n

Despu\u00e9s de activar el modo responsive, podr\u00e1s seleccionar c\u00f3mo se adapta la tabla. Elija Pila<\/strong> en lugar de Despl\u00e1cese por<\/strong>. Esto transforma cada fila de la tabla en un bloque vertical para facilitar su visualizaci\u00f3n en pantallas m\u00e1s peque\u00f1as.<\/p>\n\n\n\n

\"Elija<\/figure>\n\n\n\n
\n\n\n\n

Paso 6: Utilizar las funciones avanzadas de la pila<\/strong><\/h3>\n\n\n\n

Debajo de la selecci\u00f3n de modo, puede activar Transformar filas en columnas<\/strong> si quieres que la tabla cambie la direcci\u00f3n de su dise\u00f1o. Tambi\u00e9n encontrar\u00e1 la opci\u00f3n Mostrar la primera columna en cada fila de la pila,<\/strong> que es \u00fatil cuando la primera columna contiene etiquetas. Por \u00faltimo, puede establecer cu\u00e1ntos elementos deben aparecer por fila de pila.<\/p>\n\n\n\n

\"Utilice<\/figure>\n\n\n\n
\n\n\n\n

Paso 7: Vista previa y finalizaci\u00f3n<\/strong><\/h3>\n\n\n\n

Haz clic en el bot\u00f3n Vista previa y comprueba el dise\u00f1o en la vista de m\u00f3vil y tableta. Si todo se ve bien, sigue adelante y publica o actualiza tu post.<\/p>\n\n\n\n

\"Previsualizar<\/figure>\n\n\n\n
\n\n\n\n

Conclusi\u00f3n<\/strong><\/h3>\n\n\n\n

Las tablas apilables son una soluci\u00f3n pr\u00e1ctica para facilitar la lectura de contenidos en tel\u00e9fonos y tabletas, sobre todo cuando se trabaja con tablas sencillas o de tama\u00f1o moderado. Sin embargo, cuando una tabla incluye demasiadas columnas, el formato apilado puede hacerse largo y m\u00e1s dif\u00edcil de navegar. En esos casos, otras t\u00e9cnicas como filtrar u ocultar columnas pueden funcionar mejor. A\u00fan as\u00ed, para la mayor\u00eda de los casos de uso cotidiano, el apilamiento ofrece una forma limpia y fiable de mantener tus tablas adaptadas a dispositivos m\u00f3viles. Y en este art\u00edculo, hemos mostrado exactamente c\u00f3mo crear una utilizando Tableberg, desde la instalaci\u00f3n hasta la vista previa final.<\/p>\n\n\n\n

<\/p>","protected":false},"excerpt":{"rendered":"

Standard tables typically work well on desktops. You can see everything fits in place, and the layout stays clean. But when viewed on a phone or a tablet, those same tables often break down. They stretch too wide, forcing users to scroll sideways just to read a single row. Stackable tables solve this problem by […]<\/p>\n","protected":false},"author":9,"featured_media":8256,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7,130],"tags":[],"class_list":["post-8251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-tableberg"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Stacked-Table-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/es\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/8251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/comments?post=8251"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/8251\/revisions"}],"predecessor-version":[{"id":8300,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/8251\/revisions\/8300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/8256"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=8251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=8251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=8251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}