Cómo crear tablas y text area con HTML

En la anterior entrada sobre programación básica para bloggers vimos como aplicar estilos a los textos de nuestras entradas, es cierto que se pueden hacer muchísimas más cosas que os iré contando más adelante, pero creo que en ese post incluí lo más básico para empezar con HTML y CSS de manera sencilla.
Hoy os quiero explicar como podemos incluir tablas y áreas de texto dentro de las entradas de Blogger con ejemplos prácticos para que veáis como podemos aplicar estos códigos a nuestros blogs.

TABLAS

Ejemplo HTML:
<tablealign="left"bgcolor="#F6CEE3"border="4"bordercolor="#58ACFA"cellpadding="2" cellspacing="2"> <tbody>
<tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
<tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
</tr>
</tbody></table>

Vista Redacción:

Celda 1 Celda 2

Celda 3 Celda 4

Este es un ejemplo de tabla sencilla que podemos personalizar a nuestro gusto, siempre en vista HTML.
<table> </table> son las etiquetas que abren y cierran nuestra tabla.
align ---> la justificación de nuestra tabla, puede sustituirse por:
♥ center: centrada.
♥ left: izquierda.
♥ right: derecha.
bgcolor ---> color de fondo de la tabla.
Podéis consultar los códigos de colores HTML aquí, sólo tenéis que seleccionar el color que queráis usar, copiar su código del cuadrado inferior y cambiarlo por el que puse yo en el ejemplo.
border ---> borde de la tabla. Podemos cambiar el número por 0, 1, 2, 3... probad hasta que consigáis el resultado que queréis.
Ejemplo borde 1

Celda 1 Celda 2

Celda 3 Celda 4

Ejemplo borde 2

Celda 1 Celda 2

Celda 3 Celda 4

Con border="0" elimináis el borde de la tabla

Celda 1 Celda 2

Celda 3 Celda 4

Pero el texto de las celdas sigue estando separado. Que no se vean no quiere decir que no estén ahí.
bordercolor ---> Color del borde de nuestra tabla. En vista redacción no veréis nada, tenéis que usar la Vista Previa para comprobarlo.
Ejemplo bordercolor verde (recordad consultar los códigos de colores HTML en el enlace que os dejé en el punto en el que hablábamos del color de fondo):

Celda 1 Celda 2

Celda 3 Celda 4

Ejemplo bordercolor blanco

Celda 1 Celda 2

Celda 3 Celda 4

Si no queréis añadir borde de color, solo tenéis que eliminar esa parte del código.
cellpadding ---> es el espacio que hay entre el borde y el contenido de las celdas.
Ejemplo cellpadding="4"

Celda 1 Celda 2

Celda 3 Celda 4

Ejemplo cellpadding="0"

Celda 1 Celda 2

Celda 3 Celda 4

cellspacing ---> el espacio entre cada celda.
Ejemplo cellspacing="4"

Celda 1 Celda 2

Celda 3 Celda 4

Ejemplo cellspacing="0"

Celda 1 Celda 2

Celda 3 Celda 4

<tbody></tbody> son las etiquetas que encierran el cuerpo de nuestra tabla.
<tr></tr> son las etiquetas que marcan las filas de nuestra tabla. Podéis añadir todas las que queráis añadiendo un nuevo <tr>código celdas</tr> antes de </tbody>
Ejemplo 3 filas:

Celda 1 Celda 2

Celda 3 Celda 4

Celda 5 Celda 6

<td></td> son las etiquetas que delimitan el contenido de cada celda. Entre ambas escribiremos el texto o subiremos la imagen que queramos.
El texto puede modificarse también con código, pero Blogger nos permite cambiar todo lo que queramos desde la vista redacción, por lo que no es necesario añadir más codigo, solo seleccionar el texto de la celda y darle el formato que queramos.
Una tabla de este tipo, con fondo blanco y sin borde, fue la que usé para subir los iconos de redes sociales en esta entrada. Es solo un ejemplo de como podemos aplicar la creación de tablas en nuestras entradas, seguro que encontráis la manera de incluirlas en vuestro Blog.

TEXT AREA

Ejemplo de TextArea en vista Redacción:
<a href="http://www.elperrodepapel.com" target="_blank"><img src="http://db.tt/ENdDYjzK" title="El Perro de Papel" /></a>Es un cuadro de texto que, entre otras cosas, se usa mucho para los famosos botones de enlazar que hay en muchos blogs.Código Text Area:<textarea rows="7" cols="20" onclick="this.select();">Contenido del cuadro de texto</textarea><textarea></textarea> etiquetas que abren y cierran el contenido del cuadro de texto.rows ---> número de líneas que tendrá nuestra área de texto. Puede modificarse por el número que necesitéis. Si el número de líneas programadas es menor al número de líneas reales, aparecerá una barra de desplazamiento en la parte derecha.Ejemplo:texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba texto de prueba
cols ---> ancho de nuestra área de texto.
Contenido del cuadro de texto
onclick="this.select(); ---> esta parte del código solamente la incluiremos si queremos que el contenido del cuadro pueda ser copiado haciendo clic encima. Hace que se seleccione todo el texto automáticamente.
Ejemplo sin esa parte del código:
<a href="http://www.elperrodepapel.com" target="_blank"><img src="http://db.tt/ENdDYjzK" title="El Perro de Papel" />En otra entrada veremos como podemos poner código dentro de estas áreas de texto en vista HTML sin que sea interpretado por el navegador, es decir, que se vea lo que realmente queremos, ya que si yo copio el texto del cuadrado superior directamente en HTML se verá así:
La imagen que enlaza a mi blog, no el texto que tendrían que copiar para enlazarme que es lo que realmente me interesa mostrar.
¡Y ésto ha sido todo por hoy!
En la próxima entrada sobre programación básica para Bloggers quiero hablaros de como crear listas numeradas muy chulas con HTML.

Un fuerte abrazo,
Celia ♥
Si te gusta mi blog,puedes recibir mis actualizaciones en tu email ¿te apetece?
♥ No olvides confirmar tu suscripción a través del enlace que recibirás en tu correo ♥
También puedes encontrarme en Facebook:
¿Todavía no te has suscrito a mi Super Boletín Mensual?

Recibirás información privada y tendrás acceso a nuestro Blog Privado para siempre.

Quiero Suscribirme
¿Te ha gustado esta entrada? ¿Por qué no la compartes en tus Redes Sociales?

Puede que a alguno de tus contactos también le resulte interesante.Muchas gracias ♥