Cómo crear tablas y text area con HTML y CSS

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:

<table align=”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 1Celda 2
Celda 3Celda 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 1Celda 2
Celda 3Celda 4

Ejemplo borde 2

Celda 1Celda 2
Celda 3Celda 4
Con border=”0″ elimináis el borde de la tabla

Celda 1Celda 2
Celda 3Celda 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 1Celda 2
Celda 3Celda 4

Ejemplo bordercolor blanco

Celda 1Celda 2
Celda 3Celda 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 1Celda 2
Celda 3Celda 4
Ejemplo cellpadding=”0″
Celda 1Celda 2
Celda 3Celda 4

cellspacing —> el espacio entre cada celda.
Ejemplo cellspacing=”4″

Celda 1Celda 2
Celda 3Celda 4
Ejemplo cellspacing=”0″

Celda 1Celda 2
Celda 3Celda 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 1Celda 2
Celda 3Celda 4
Celda 5Celda 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:

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.

Un fuerte abrazo,

Celia ♥



Suscríbete a mis entradas por email ¡para no perderte nada!

♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥

Te encantará:

The following two tabs change content below.
Mamá, emprendedora y bloguera a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para encontrar el equilibrio entre su vida personal y profesional.

Pin It on Pinterest

Share This

COMPAGINA TU VIDA PERSONAL Y PROFESIONAL

CURSO-GUÍA GRATIS DE 5 DÍAS PARA MAMÁS EMPRENDEDORAS

¡Bienvenida! Ahora revisa tu correo ;)