Colocar texto y otros elementos con un fondo de color

Desde la publicación en mi blog de esta entrada, muchos me habéis mandado e-mails solicitándome información de cómo colocar texto o elementos con un fondo de color. Por ejemplo como el cuadro siguiente, sacado de dicha entrada publicada hace poco:

Nueva suscripción por E-mail. Podrás recibir las entradas que publique en tu E-mail. Estarás informado de todas las novedades.

Esto puede hacerse fácilmente mediante una "tabla" html, colocándo un código al principio del elemento que queramos colocar con ese fondo, y otro pequeño código al final, obtendréis resultados muy profesionales, ya que podemos controlar colores, bordes, tamaños, y en general todo el aspecto gráfico que presentará la "tabla".

Leer completo...[+/-]

Para realizar esto, como ya he comentado antes, usaremos una "tabla" html, que entre otros tiene valores de color de fondo, color de borde, grosor de borde, tamaño, etc...

Al principio del elemento en html colocaremos este código:

<table border="0" cellspacing="0" cellpadding="10" width="176" bgcolor="#e6e6e6" bordercolor="#000000"><tbody> <tr> <td valign="top" width="176">

Y al final del elemento de que se trate cerramos con este código:

</td> </tr> </tbody></table>

(Por cierto, esta forma de presentar los códigos con ese color gris de fondo, está realizado de la forma que ahora estoy explicando)

Podemos colocar el elemento que queramos entre esos dos códigos, desde una imagen o un texto, hasta una entrada completa de vuestro blog. Si pincháis Aquí podréis ver un ejemplo de entrada de mi blog, donde hay una tabla, con sus características de color y borde, dentro de otra tabla que enmarca toda la entrada, y con otras características.

Es decir, podéis usar los códigos de apertura y cierre todas las veces que queráis, siempre colocándolos seguros de lo que queréis enmarcar con una tabla u otra.

Paso ahora a explicaros cada uno de los modificadores que colocamos en los códigos del principio.

border - Definimos con este modificador el ancho en píxeles del borde, colocamos "0" si no queremos que aparezca borde alguno.

bordercolor - Como su propio nombre indica, es el color del borde. Debemos colocar el código hex del color que queramos usar.

cellspacing - Este valor, para lo que estamos viendo ahora, debe permanecer en "0".

cellpadding - Este es el margen o separación, en píxeles, que tendrán los elementos que se han colocado dentro, con el borde de la tabla.

width - Anchura en píxeles de la tabla. Si colocáis el modificador heigth, que yo no he colocado, lo que fijaréis será la altura. Si borráis este modificador, la anchura de la tabla se adaptará al ancho total del lugar donde esté (Entrada, sidebar, footer, etc...). Cuidado que el término width aparece dos veces en el código inicial, los dos valores deben ser iguales.

bgcolor - Código hex del color de fondo que queremos. Si borramos este modificador el fondo será transparente.

Dejaremos para una entrada posterior el tema de colocar una imagen de fondo, en vez de un color. Este tema es un poco más complicado, pero pueden obtenerse resultados como este...

Saludos a todos mis visitantes. Espero que mi blog os sea de mucha ayuda. Y sobre todo, gracias, muchas gracias por vuestra confianza.