Crear recuadros con HTML

Para resaltar una parte del texto de un post, como un resumen o una cita en particular, podemos hacerlo por medio de tablas HTML a manera de recuadros. Vamos a ver cómo hacer recuadros con buenos diseños. Para este efecto elaboraremos el siguiente ejemplo: Ejemplo de recuadro con HTML Esta tabla tendrá las siguientes características: Color de fondo: blanco (#ffffff) Borde: 0 Ancho: 300 pixeles Ubicación: Centro Espacio entre celdas: 1 pixel (cellspacing:"1") Espacio entre el borde de la celda y su contenido: 3px (cellpadding="3") La tabla estará compuesta por dos celdas: La primera celda contendrá el encabezado de la tabla y, por consiguiente, tendrá la etiqueta <th>. En ella pondremos el título del recuadro. tendrá las siguientes características: Color de fondo: azul (#1875D2) Negrita para el texto La segunda celda contendrá el contenido de la tabla y tendrá las siguientes características: Color: Azul más claro (#3B94ED) La fuente, el tamaño y el color de los caracteres no los hemos asignado, por consiguinte se nos darán por defecto. Por este motivo debemos tener en cuenta los colores bàsicos de nuestro blog para escoger los colores que vamos a poner en el fondo de la tabla y de las celdas. Éste es el código HTML: <table width="300" cellspacing="1" cellpadding="3" border="0" bgcolor="#ffffff" align="center"> <tr>     <th bgcolor="#1875D2"> <b>Título del recuadro</b>    </th> </tr> <tr>     <td bgcolor="#3B94ED">    Aquí colocamos el contenido del recuadro. Nótese que a pesar de haber puesto en el código de la tabla como borde "0", aparece un borde blanco. Esto se debe a que el color del fondo de la tabla, que es blanco, se ve a través de los espacios dejados entre las celdas, que es "1". (cellspacing="1")     </td> </tr> </table> Y éste es el recuadro:

Título del recuadro
Aquí colocamos el contenido del recuadro. Nótese que a pesar de haber puesto en el código de la tabla como borde "0", aparece un borde blanco. Esto se debe a que el color del fondo de la tabla, que es blanco, se ve a través de los espacios dejados entre las celdas, que es "1". (cellspacing="1")

Twittear

 

Índice HTML
Qué es HTML
Ejemplos de códigos HTML
Tags HTML
Publicar códigos HTML
Crear recuadros con HTML
Código DM HTML

◄Anterior | Siguiente►