Cómo crear tablas en el blog

Para aprender a escribir código HTML podemos ir viendo tutoriales en Internet. Aquí te muestro un PDF con un resumen de órdenes que puedes utilizar en clase:

http://www.ens.uabc.mx/desquer/dam/guia_rapida_html.pdf

Por otro lado, hay un truco, que es copiar el código ya hecho y hacer pequeñas modificaciones. Por ejemplo en la siguiente web nos explican cómo hacer una tabla similar a la que hemos usado en las fotos anteriores:

Texto o imagen 1	Texto o imagen 2
Texto o imagen 3	Texto o imagen 4

Necesitas un tabla para pegar tus fotos. Puedes usar la mía o aprender a crearla con las siguientes indicaciones.

Para crear una tabla semejante a ésta hay que teclear el siguiente códico en la pestaña HTML  https://avalerofer.blogspot.com/2010/03/insertar-tablas-en-el-blog.html

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
<tr><td>Texto o imagen 3</td><td>Texto o imagen 4</td></tr>
</tbody>
</table>

El código de la tabla tiene la etiqueta <table> de apertura y </table> de cierre en forma anidada, como el resto de las etiquetas. Y esta etiqueta de tabla tiene los siguientes atributos dentro de la etiqueta de apertura, que creo que son los mínimos que puede tener para conseguir una tabla decente.

• bgcolor: color de fondo, cuyos códigos se pueden tomar de esta página de Wikipedia sobre los colores en HTML.
• border: el tamaño del borde en píxeles, que se puede poner en cero si no queremos borde.
• cellpadding: el relleno dentro de la celda entre los bordes y el texto o las imágenes. Para ver cómo funciona esto, lo mejor es cambiar el número, que representa los píxeles.
• width: es la anchura de la tabla; en este caso, el 100% para que ocupe todo lo ancho del documento, pero también podemos ponerle un número de píxeles de ancho. Para esta anchura se utiliza la etiqueta style con código de hojas de estilo CSS; no es HTML.

Las demás etiquetas son las siguientes:

• tbody: indica el cuerpo de la tabla.
• tr: crea una fila.
• td: crea una celda dentro de una fila.

La forma más práctica de crear una tabla es escribir el código de una fila para después copiarla y pegarla tantas veces como filas queramos que haya. Es mejor dejar el número de celdas igual dentro de cada fila para no liarnos con más código. Es decir, primero escribimos los códigos (de apertura y de cierre) de la tabla, con los atributos de ésta:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
</tbody>
</table>

Y después pegamos en medio el código de cada fila tantas veces como filas queramos. En forma anidada, vemos el código de la fila en color naranja, y dentro de la fila, las dos celdas o columnas en color azul y verde.

Yo practiqué con la inserción de dos filas mas.

Texto o imagen 1	Texto o imagen 2
Texto o imagen 3	Texto o imagen 4
Texto o imagen 3	Texto o imagen 4
Texto o imagen 3	Texto o imagen 4