¿Cómo insertar tablas en WordPress sin plugin?

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

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…

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>[email protected]</td>
</td>
<tr>
<td>Eva</td>
<td>Garcia</td>
<td>[email protected]</td>
</td>
<tr>
<td>Susana</td>
<td>López</td>
<td>[email protected]</td>
</td>
</table>

Esto nos daría este resultado:

Nombre	Apellido	Email
Juan	Gonzalez	[email protected]
Eva	Garcia	[email protected]
Susana	López	[email protected]

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