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:
align="left" bgcolor="#F6CEE3" border="4" bordercolor="#58ACFA" cellpadding="2" cellspacing="2">
Celda 1
Celda 2
Celda 3
Celda 4
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.
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
Ejemplo borde 2
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"
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 |
son las etiquetas que encierran el cuerpo de nuestra tabla.
Ejemplo 3 filas:
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
| Celda 5 | Celda 6 |
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:
cols ---> ancho de nuestra área 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:
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 ♥
¿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.
¿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 ♥
Superútil, gracias!
ResponderEliminarGracias a ti :D
EliminarGracias por la explicación
ResponderEliminar;)
De nada, guapa, para el tema de compartir imágenes es muy útil, así la entrada no nos queda tan larga ;)
EliminarEstá genial Celia, pero creo que yo me tengo que poner muy tranquilamente con esto, jeje. Un besote guapa.
ResponderEliminarlas cosas de palacio van despacio, guapa jajaja o eso dicen ;)
EliminarGracias por enseñar esto!
ResponderEliminarBesos