WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

¿Cómo insertar tablas en Wordpress sin plugin?

Jorge López by Jorge López
17 noviembre 2016
in Código fuente
Reading Time: 6 mins read
1

¿Te has visto en la necesidad de crear tablas en WordPress y no quieres instalar más plugins? Las tablas son muy útiles para representar datos de forma organizada y mejoran la legibilidad de los usuarios a la hora de comprender dichos datos. En este artículo te explicaremos cómo insertar tablas en tu contenido de Wordpress sin necesidad de instalar un plugin. Atención, en este tutorial vamos a hablar de código HTML, pero no te asustes, trataremos el tema de forma sencilla para que nadie se pierda.

También te puede interesar: Exportar un WordPress a HTML estático

¿Cómo insertar código HTML en WordPress?

El editor visual de WordPress está realmente bien para formatear el contenido de forma básica, pero si queremos algo más avanzado, es necesario cambiar al editor HTML que nos proporciona la propia plataforma. Para ello, a la hora de insertar o editar un contenido en WordPress, por defecto nos aparecerá el editor visual, pero si queremos cambiar al editor HTML, tendremos que seleccionar la pestaña HTML que nos aparece en la esquina superior derecha del propio editor.

tablas en wordpress

Artículos relacionados

7 códigos para mejorar el motor de búsqueda de WordPress

9 mayo 2017

Cómo crear un custom post type en WordPress

6 octubre 2015

8 códigos para mejorar los comentarios de WordPress

4 junio 2017

7 códigos de WordPress para personalizar tu plantilla

15 junio 2016

Al seleccionar la pestaña HTML del editor, veremos el código HTML del contenido que hayamos redactado en el editor visual, en el caso de haber redactado alguno. Ojo, hay que tener ciertos conocimientos de diseño web a la hora de manipular el contenido de la pestaña HTML, de lo contrario puedes cargarte la estructura de tu actual contenido. Siempre puedes cambiar entre el editor visual y el editor HTML para ver los cambios que estás realizando en el código en tiempo real.

A continuación te contamos cómo insertar tablas en WordPress utilizando código HTML para no instalar ningún plugin más en tu CMS.

Insertar tablas en WordPress: Estructura de la tabla

Antes de empezar, debo decir que esto se va a parecer más a un tutorial sobre HTML, que uno sobre WordPress. Pero como la única manera que tenemos de insertar tablas en WordPress sin necesidad de utilizar un plugin de WordPress es añadiendo HTML en el editor HTML, no nos queda otra…

tablas en wordpress
Fuente: Sai Kiran Anagani

El tag específico de HTML para crear tablas es <table>. Este tag, al incluir contenido en su interior, debe cerrarse correctamente para indicar al navegador que la tabla ha concluido mediante el tag </table>.

Así mismo, si queremos insertar una tabla básica sin contenido alguno (lo cual es un sinsentido) tendríamos que insertar en el editor HTML este código:

<table>
</table>

Si quisieramos darle un estilo distinto al de por defecto, tendríamos que hacerlo mediante CSS. Pero eso ya es harina de otro costal…

Insertar tablas en WordPress: filas

Una vez clara la estructura de nuestra tabla, tendremos que definir las filas. El tag de HTML que define una fila es <tr>. Este tag, al incluir contenido en su interior, debe cerrarse correctamente para indicar al navegador que la fila ha concluido mediante el tag </tr>.

En HTML, el contenido final no se incluye en las filas, sino en las columnas. Es por eso que cada fila de HTML, es decir, cada <tr>, debe tener como mínimo una columna, lo cual es lógico.

Si queremos insertar una tabla que esté integrada por tres filas, tendríamos que insertar en el editor HTML este código:

<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Insertar tablas en WordPress: columnas

Las columnas pueden ser de dos tipos distintos, o bien encabezados, o bien columnas de contenido. Por defecto, el contenido de las columnas de encabezado estará en negrita y centrado (dependiendo del navegador). Las columnas de contenido no cuentan con estilo por defecto alguno.

Para definir una columna de encabezado, utilizaremos el tag <th>. Este tag, al incluir contenido en su interior, debe cerrarse correctamente para indicar al navegador que la columna ha concluido mediante el tag </th>.

Para definir una columna de contenido, utilizaremos el tag <td>. Este tag, al incluir contenido en su interior, debe cerrarse correctamente para indicar al navegador que la columna ha concluido mediante el tag </td>.

Si queremos incluir en nuestra tabla de tres filas, los datos de 3 usuarios a los que, por ejemplo, les ha tocado un sorteo, lo haríamos así. Imaginemos que queremos mostrar el nombre por un lado, el apellido por otro y por último, el correo electrónico.

<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
<tr>
<td>Juan</td>
<td>Gonzalez</td>
<td>ju***********@*****lo.com</td>
</td>
<tr>
<td>Eva</td>
<td>Garcia</td>
<td>ev********@*****lo.com</td>
</td>
<tr>
<td>Susana</td>
<td>López</td>
<td>su**********@*****lo.com</td>
</td>
</table>

Esto nos daría este resultado:

Nombre Apellido Email
Juan Gonzalez ju***********@*****lo.com
Eva Garcia ev********@*****lo.com
Susana López su**********@*****lo.com

Te preguntarás, ¿por qué se ha añadido una fila más si hemos acordado que nuestra tabla tuviese tres filas nada más? De hecho las tiene, lo que pasa es que he añadido una más para incluir las columnas de encabezado <th> de Nombre, Apellido y Email.

Si quisieramos hacer una tabla de una sola fila con 5 columnas, se haría así:

<table>
<tr>
<td>Hola</td>
<td>Soy</td>
<td>Una</td>
<td>Tabla</td>
<td>HTML</td>
<tr>
</table>

Que nos daría este resultado:

Hola Soy Una Tabla HTML

Como ves, solo hemos añadido un tr, puesto que solo queríamos una fila, y 5 td, porque queríamos que nuestra tabla estuviese integrada por 5 columnas.

Por último decir que, como véis, los tags de HTML se incluyen unos a otros. Es decir, dentro del ámbito de <table></table> deben incluirse tanto las filas, como las columnas. Dentro del ámbito de <tr></tr> deben incluirse las columnas. Y dentro del ámbito del <th></th> o del <td></td> debe incluirse el contenido.

Todo es como una especie de sandwich que a su vez tiene otra sandwich, que a su vez contiene otro sandwich.

Bueno, pues una vez elaborado el código de vuestra tabla, solamente debes pegarlo en el editor HTML de WordPress, y volver al editor visual para verla en marcha.

También te puede interesar: Cómo insertar código fuente en una entrada de WordPress

Espero que te haya resultado útil este tutorial y sepas ponerlo en práctica en tus proyectos personales. Ya sabes, si te ha gustado el artículo, no dudes en compartirlo en todas tus redes sociales.

Guardar

Tags: htmlinsertar tablasinsertar tablas en WordPressinsertar tablas sin pluginsno pluginstablas
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Código fuente

¿Por qué actualizar a PHP 8.4 en tu WordPress? Ventajas y comparativa con PHP 7.4

10 junio 2025

WordPress y la importancia del motor PHP WordPress depende directamente de PHP para funcionar....

Código fuente

“Syntax-highlighting Code Block”: un aliado para desarrolladores en WordPress que apuesta por el rendimiento y la simplicidad

3 junio 2025

El plugin mejora el bloque de código estándar con resaltado sintáctico desde el servidor,...

Noticias

Qué son los Hooks en WordPress y cómo usarlos para personalizar tu sitio sin tocar el núcleo

16 mayo 2025

Los hooks (ganchos) son una de las herramientas más potentes y versátiles de WordPress...

Noticias

Cómo eliminar la etiqueta hreflang en URLs con la meta tag noindex en WordPress

4 mayo 2025

Eliminar la etiqueta hreflang en páginas de WordPress que contienen la meta etiqueta noindex...

Comments 1

  1. pedro says:
    8 años ago

    hola, queria hacerle una consulta, como puedo poner en mi pagina de inicio para que los post esten en dos columnas? Y ademas como puedo sacar este margen que aparece aca http://unviajeroconocido.com/2017/08/05/la-maravilosa-ciudad-de-madrid-12/
    y no entiendo porque en este no http://unviajeroconocido.com/2017/08/05/descubriendo-la-isla-venecia-12/
    Desde ya muchas gracias

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

5 plugins para gestionar múltiples sitios desarrollados con WordPress

22 abril 2020

Cómo trackear el envío de un formulario de Contact Form 7 con Analytics

21 septiembre 2017

Como integrar Facebook, Twitter y Google + en WordPress

14 febrero 2012

¿Es WordPress una buena opción para la web de un hotel?

13 febrero 2023

Cómo crear una navegación sticky en WordPress

22 agosto 2019
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.