Anteriormente, necesitaba un complemento de terceros con un editor clásico para crear tablas en WordPress. Sin embargo, Gutenberg ofrece un bloque de tabla de forma predeterminada para insertar tablas personalizables que se vean bien. Así es como puede crear tablas en el editor de WordPress Gutenberg junto con varios ejemplos. Estas tablas usan el bloque Table de forma predeterminada y no usan ningún otro complemento de terceros. Si está buscando crear tablas con un complemento, consulte el tutorial de TablePress y cómo crear una tabla de comparación en WordPress.
Tipos de tablas que puedes crear con Gutenberg
Puede crear el siguiente tipo de tablas usando un bloque de tabla.
- Una tabla predeterminada simple
- mesa rayas
- Una mesa de colores
- Tabla con secciones de encabezado y pie de página
- Mesa de ancho fijo
En este momento, no puede crear tablas de datos con filtros, funciones de búsqueda y paginación utilizando el bloque de tabla estándar de Gutenberg. Obtenga más información sobre otros bloques de Gutenberg y cómo usarlos en su sitio.
Agregar un bloque de tabla predeterminado en WordPress
solo ingresa /mesa para insertar un bloque de tabla donde quieras al editar una publicación o página en el editor de Gutenberg.
Se le pedirá que seleccione el número de filas y columnas para su tabla. Seleccione el número de filas/columnas y haga clic en el botón "Crear tabla".
Esto insertará una tabla principal que se verá como a continuación (los datos ficticios se completan para mostrar).
| tabla por defecto | tabla por defecto |
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
Haga clic en el bloque de la tabla para ver opciones de bloque adicionales en la barra de herramientas. Puede usar las opciones para alinear toda la tabla o ajustar la alineación de solo una columna específica de la tabla. También puede insertar un hipervínculo al contenido de la celda, marcar, agregar/eliminar filas, agregar/eliminar columnas e insertar una imagen en línea en una celda.
Recuerda que puedes ajustar la alineación del contenido en cada columna de forma independiente. La siguiente tabla de ejemplo muestra la primera columna alineada al centro mientras que la segunda columna está alineada a la derecha.
| tabla por defecto | tabla por defecto |
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
Creación de diferentes tipos de tablas.
También hay configuraciones de bloque en la barra lateral derecha. Allí puede encontrar opciones adicionales para personalizar la apariencia de su tabla en las secciones Configuración y Estilos.
Usando la configuración de la barra lateral de la tabla de bloques, puede crear diferentes tipos de tablas como se explica a continuación.
Bloque de mesa a rayas
En la barra lateral derecha, seleccione la opción Rayas en la sección Estilos para crear una tabla rayada como la que se muestra a continuación. La opción de tipografía en mayúsculas se usa para cambiar todo el contenido de texto en la tabla para usar letras en mayúsculas.
| tabla por defecto | tabla por defecto |
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
Tabla con secciones de encabezado y pie de página
Seleccione las opciones 'Sección de encabezado' y 'Sección de pie de página' en la sección Configuración para agregar encabezado/pie de página a su tabla.
| Etiqueta de título 1 | cabezaEtiqueta 2 |
|---|---|
| tabla por defecto | tabla por defecto |
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
| Etiqueta de pie de página 1 | Etiqueta de pie de página 2 |
Una tabla de colores
En la sección Estilos, tiene opciones para cambiar el texto y los colores de fondo.Además de un fondo sólido, también puede crear un fondo degradado, como se muestra en el ejemplo a continuación.
| Carta de colores densos | Carta de colores densos |
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
| carta de color degradado | carta de color degradado |
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
Mesa de ancho fijo - rayada y de color
Utilice la opción "Celdas de tabla de ancho fijo" en "Configuración" para fijar el ancho de columna de la tabla independientemente del contenido de las celdas. Puede combinar la franja, los colores y el ancho fijo para crear tabla personalizada como a continuación.
| Etiqueta de encabezado 1 | Etiqueta de título 2 |
|---|---|
| tabla por defecto | tabla por defecto |
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
Bloque de código de tabla de Gutenberg
Puede copiar el código de la tabla desde el Editor de código de Gutenberg (Opciones > Editor de código) y pegarlo en cualquier parte de su sitio. Por ejemplo, simplemente copie y pegue el código a continuación en su editor para crear una tabla predeterminada simple como se muestra en el ejemplo anterior (tabla de bloques predeterminada). De lo contrario, puede crear un bloque reutilizable para su diseño de tabla personalizado para insertarlo en cualquier parte de su sitio. Después de insertar el bloque de tabla reutilizable, puede convertirlo en un bloque normal para editar y actualizar el contenido de esa publicación en particular.
<!-- wp:table {"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular"><table><tbody><tr><td>Default Table</td><td>Default Table</td></tr><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table></figure>
<!-- /wp:table -->Tenga en cuenta que también puede usar el bloque Elementos HTML personalizados para crear su propia tabla personalizada usando etiquetas de tablas HTML.
Problemas al usar el bloque de tabla
El bloque Gutenberg Table es perfecto para colocar una pequeña tabla en su contenido. Por ejemplo, puede crear fácilmente una tabla personalizable con 15 a 30 filas. Sin embargo, es imposible editar tablas grandes y el editor será muy lento o incluso fallará cuando intente copiar y pegar datos de tablas grandes desde Excel u otra aplicación de hoja de cálculo. Además, el bloque de tabla tampoco admite tablas de datos.
Entonces, si tiene una tabla grande con cientos de filas, es mejor usar un complemento como TablePress. La ventaja es que puede administrar todas las tablas de forma centralizada en un solo lugar y editarlas sin ingresar al editor de Gutenberg. El contenido editado se aplicará automáticamente a todos los lugares donde haya insertado esta tabla. De lo contrario, debe ir a cada instancia y editar con el bloque de tabla predeterminado.
Aprende 4 formas diferentes de insertar tablas en WordPress junto con sus ventajas y desventajas.
Deja una respuesta