¿Sabes poner una tabla en una entrada o página?

Trabajar con tablas es muy util para organizar contenidos, sin embargo trabajar con ellas en WordPress es molesto. En esta entrada explicamos como incorporar tablas en entradas en WordPress y Blogger y que queden perfectas. Vale la pena para textos, pero también para poner en las celdas imágenes y textos.

Las tablas fue la forma habitual para emplanar cualquier documento en la Web, ya que permite dividir el espacio como deseamos. Cuando ponemos listas, contenidos típicos para tablas, imágenes, imágenes con una explicación, las tablas funcionan muy bien, compactan la información y lo que nuestros lectores ven es más ordenado.

Lo que explico vale pues tanto para el editor de WordPress como para el de Blogger. Si eres de los que pones muchas fotos y las Galerías te gustan, en esta otra Entrada explico como usar el mismo sistema de WordPress para poner la Galeria y queda como una tabla profesional.

Sobre las Tablas.

A pesar de ser tan importantes, en html las tablas cuentan con muchas limitaciones, sobre todo por lo que los distintos navegadores son capaces de interpretar. En cuanto al ancho de la tabla o de las columnas lo habitual es darlo por porciento del ancho o directamente en pixels. Aquí lo pongo por pixels, ya que la mayoría de las plataformas son de ancho fijo y va de cuantos pixels ponemos. El alto es más complicado, ya que pocos navegadores interpretan los comandos existentes de altura.
Importante en el código que pegamos la magnitud border. El border es la línea que delimita la tabla y podemos poner desde cero o sea invisible a 1,2,3, etc pixels de ancho. Por defecto la alineación de lo que ponemos es centrado. Con los mandos superiores del editor de WordPress o Blogger podemos alinear a la derecha o izquierda seleccionando el texto y la imagen de cada celda.
La alineación vertical que pongo es la top. Esla hace que todo aparezca lo mas arriba posible y que la tabla sea mas compacta. Tambien puede centrarse que es “midle” o alinear abajo que es “botom”

Tablas en WordPress.

El editor de entradas de WordPress permite que peguemos un texto de Word con una tabla incluida. Esto lo hacemos en el modo HTMl. Cualquier ajuste de la tabla en Word puede que no quede como lo hicimos. Es por ello que en el modo html debemos revisar que nos cambio el editor y arreglarlo. En general los anchos tenemos que arreglarlos, el borde también. Aunque parece laborioso, cuando usamos las tablas con frecuencia es sencillo, ya que solo hemos de cambiar siempre los mismos parámetros.
Si tenemos el código para la tabla lo pegamos en el editor en modo html y entonces si que lo coge perfecto. Si cuentas con blogs en WordPress y en Blogger en ocasiones resulta comodo hacer la tabla en Word, pegarla en WordPress y desde el modo HTML copiamos el código que entonces ponemos en Blogger.

Tablas en Blogger.

Este editor es fatal para el trabajo con tablas. Si pegamos una tabla desde Word no se entera, es por ello que se ha de hacer en código htmel en el modo HTML. O trabajamos un código html para tabla como el que pongo en esta entrada, o podemos obtenemos el código en un editor de html. Para los que trabajan WordPress esta el truco de hacer la tabla aquí y luego copiar el código que pagaremos en Blogger.

Código para una tabla.

Las líneas de código en rojo son obligatorias y siempre están incluidas. Si podemos modificar el ancho de la tabla o table width. Entre las comillas podemos variar el ancho. Una tabla para una entrada comúnmente cuenta con anchos entre 440 y 720 pixels. Para los laterales esta cifra baja a 190 – 400. El truco está que la suma de anchos de las columnas no puede ser mayor que el de la tabla. El tamaño de las imágenes tampoco puede ser mayor que el de una columna. En diseño el cellspacing nos da un espaciado entre celdas y el cellpadding la sangría. Si usamos estos atributos también cuentan en la suma total para la tabla.
Esta es una tabla de 390 pixels con tres columnas, 1 fila que contiene tres imágenes que enlazan contenidos en la web.

Este es el codigo simple para una table de 390 pixels de ancho con tres columnas. La linea discontinua de borde significa que la magnitud border width=”0″. Si queremos una linea de borde hemos de cambiar el 0 por un 1.

Celda 1 Celda 2 Celda 3

Y su codigo html es:

<table width=”390″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td valign=”top” width=”130″>Celda 1</td>
<td valign=”top” width=”130″>Celda 2</td>
<td valign=”top” width=”130″>Celda 3</td>
</tr>
</tbody>
</table>

Varia Filas y Columnas.

Si deseamos tener por ejemplo dos filas:
Todo lo que está entre <tr></tr> determina una fila. Todo lo que está entre <td></td> determina una columna. Asi entre dos los <tr></tr> pueden ir varias parejas de <td></td> si la fila tiene varias columnas.

Para ampliar columnas disponemos más <td></td>, y siempre ajustamos los tamaños [width] de forma tal que la suma de anchos de columnas no sea mayor que el de la tabla.

Entonces si la tabla base mostrada queremos añadirle una fila debajo de la que ya tenemos, seleccionamos todo el código entre <tr>codigo y </tr> y lo añadimos entre </tr> y >/tr>.

La nueva tabla se visualiza así :

Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6

Y su codigo es el siguiente:

<table width=”390″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td valign=”top” width=”130″>Celda 1</td>
<td valign=”top” width=”130″>Celda 2</td>
<td valign=”top” width=”130″>Celda 3</td>
</tr>
<tr>
<td valign=”top” width=”130″>Celda 4</td>
<td valign=”top” width=”130″>Celda 5</td>
<td valign=”top” width=”130″>Celda 6</td>
</tr>
</tbody>
</table>
Nota: El que avisa no traiciona: Cuando copiamos este codigo y lo pegamos en WordPress o Blogger hemos de comprobar que las “” las coge bien, si nos las duplica o elimina. Es la venganza por poner una tabla que ellos no nos ofrecen.
Cuando sumamos filas no es necesario ajustar anchos.

Tabla Base con Dos Columnas.

Si llevamos la tabla base de tres columnas a que sea una tabla de dos columnas entonces eliminamos una línea completa de <td>celda</td>. Como ahora quedaran solo dos columnas, hemos de ajustar los anchos. Para la tabla de 390 pixels, cada columna tendrá ahora 195 pixels.

La tabla de 2 columnas se visualiza así

Celda 1 Celda 2

El código es el siguiente, y si se fijan el borde es una línea de 1 pixel:

<table width=”390″ border=”1″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td valign=”top” width=”195″>Celda 1</td>
<td valign=”top” width=”195″>Celda 2</td>
</tr>
</tbody>
</table>

Tabla Base con Cuatro Columnas

Si a la tabla le añadimos una columna, seleccionamos el código de una celda, o sea <td>celda</td>

y lo añadimos después del ultimo </td>. Para la tabla base de 390 hemos de ajustar los anchos a 97 pixels o ponerlos de forma tal que la suma sea menor que 390 pixels.

Tabla con cuatro columnas se visualiza así, y si se fijan el borde es mas grueso, de 2 pixels:

Celda 1 Celda 2 Celda 3 Celda 4

El código es el siguiente:

<table width=”390″ border=”2″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td valign=”top” width=”97″>Celda 1</td>
<td valign=”top” width=”97″>Celda 2</td>
<td valign=”top” width=”97″>Celda 3</td>
<td valign=”top” width=”97″>Celda 4</td>
</tr>
</tbody>
</table>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *