Cómo crear tablas y text area con HTML

julio 18, 2013

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 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:




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:





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.


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á:

9 pensamientos ¡falta el tuyo! ;)

  1. Respuestas
    1. De nada, guapa, para el tema de compartir imágenes es muy útil, así la entrada no nos queda tan larga ;)

      Eliminar
  2. Está genial Celia, pero creo que yo me tengo que poner muy tranquilamente con esto, jeje. Un besote guapa.

    ResponderEliminar
    Respuestas
    1. las cosas de palacio van despacio, guapa jajaja o eso dicen ;)

      Eliminar
  3. Perfecto !! Justo vengo de tu otro blog, personalizando tu blog, en el que te había dejado un comentario en el post "destacar entradas". Si junto los dos, ya sería magnífico, porque en el que te escribo ahora sólo le faltaría añadir el color ¿Sería posible?

    Ya me dirás, grácias guapa,

    MAR

    ResponderEliminar
  4. Ahora mismo estaba buscando cómo hacer estas cajitas y tu post me ha venido de perlas :D

    ¡Muchas gracias!

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.