Páginas

Cómo incluir una tabla de datos en las entradas con Blogger

Cómo incluir una tabla de datos en las entradas con Blogger


En el tutorial de hoy vamos a detallar el procedimiento a seguir para insertar una tabla con datos en una entrada o página de vuestra web, lo que os puede ser muy útil para, por ejemplo, detallar una tarifa de precios, horarios, estadísticas...
No es difícil pero sí tenemos que fijarnos un poco porque, para ello, tenemos que editar nuestra entrada en modo HTML.
 El PASO es escribir esto: 

<table border="1" cellpadding="4"><tbody>

A continuación ir escribiendo el texto de cada una de las celdas de esta manera:

<tr><td> 1ª celda de la 1ª fila</td>
<td> 2ª celda de la 1ª fila  </td></tr>
<tr><td> 1ª celda de la 2ª fila </td>
<td> 2ª celda de la 2ª fila </td></tr>

Y finalmente cerrar la tabla con:
</tbody></table>

Si os fijáis, a la hora de llenar de contenido nuestra tabla lo que debemos tener en cuenta siempre es que el código para enmarcar cada celda se abre con <td> y se cierra con </td>, y cada fila se abre con <tr> y se cierra </tr>


Una vez creada nuestra tabla, el PASO es personalizarla para integrarla en el diseño de nuestra página. Así, podemos cambiar varias cosas:

¿Cómo ajustar el ancho de la tabla al ancho del post?
Escribiendo style="width: 100%;" justo después de <table 

¿Cómo centrar la tabla dentro del post?
Escribiendo align="center" justo después de <table 

¿Cómo centrar el texto dentro de cada celda?

Escribiendo <div style="text-align: center;"> justo antes de empezar a escribir el texto de cada celda

¿Cómo variar el grosor del borde de la tabla?
 Modificando el valor de "border"; si lo dejamos en border="0" entonces lo eliminaremos.

¿Cómo variar la altura de la celda?

Cambiando el valor de "cellpadding"

¿Cómo cambiar el color del borde de la tabla? 

Añadiendo después de <table el atributo border color="#código html" del color que queramos

¿Cómo cambiar el color de fondo de la celda?
Añadiendo, también después de <table, el atributo bgcolor="#código html" del color que queramos

Si lo que queremos es cambiar el color de una sola fila, entonces usaremos el mismo atributo pero en vez de ponerlo después de <table lo pondremos después de la etiqueta <tr


Y por último ¿cómo poner una imagen como fondo de la celda?

Pues en este caso agregando background="URL de la imagen" después de <table 

Una vez ahí ya es cuestión de echarle imaginación, diseñar nuestra tabla de acuerdo con el contenido de la entrada, y crear una como... ¿por ejemplo esta?

FILA 1 COLUMNA 1 FILA 1 COLUMNA 2
FILA 2 COLUMNA 1 FILA 2 COLUMNA 2
(fuente: BlogTecnos )