Ahora aprenderemos a mejorar el aspecto de una tabla asignándole un color de fondo o una imagen con los atributos “bgcolor y background”.
bgcolor: asigna el color de fondo de la tabla. El color se puede asignar por el nombre o por código sRGB
background: nos permite asignar una imagen para el fondo de la tabla.
El color o imagen asignados como fondo de tabla queda debajo de cualquier otro color o imagen asignados a celda bordes, etc.
Código de Ejemplo aplicando las características vistas anteriormente: Se ha aplicado un color de fondo amarillo.
<html>
<head>
<title>Tabla - Definir un color de fondo</title>
</head>
<body>
<table width="100" height="50" border="1" bordercolorlight="red" bordercolordark="maroon" cellspacing="50"
cellpadding="50%" bgcolor="yellow">
<tr>
<th width="20%" >Nombre</th>
<th width="20%" >Telefono</th>
<th width="20%" >Otros</th>
<th width="20%">Comentarios</th>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="10%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
</table>
</body>
</html>
Para aplicar una imagen de fondo en lugar de “bgcolor”, utilizamos “background”, el archivo de imagen de fondo debe estar disponible para su uso. Se puede utilizar la dirección URI de la imagen. La imagen se repetirá todas las veces que sea necesario para completar la tabla. En nuestro ejemplo utilizamos el icono del Sr. Bobuu.
<html>
<head>
<title>Tabla - Definir una imagen de fondo</title>
</head>
<body>
<table width="100" height="50" border="1" bordercolorlight="red" bordercolordark="maroon" cellspacing="50"
cellpadding="50%" background=http://www.google.com/friendconnect/profile/picture/32/VZug1WlftUVXdgms8_-IxDH513HTiDxCIjTWRtOYQ6FansNRPQa8e6q2ge4QOKWFnIiRmAORodYMP3aIZSj2upE4LP2920onvV6PM3g54qU>
<tr>
<th width="20%" >Nombre</th>
<th width="20%" >Telefono</th>
<th width="20%" >Otros</th>
<th width="20%">Comentarios</th>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="10%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
</table>
</body>
</html>
Puedes probar el código haciendo copiar y pegar. Si tienes guardado el código de la lección anterior solo debes agregar estos nuevos atributos para probarlo.
Temas anteriores de curso HTML gratis
84 - HTML - Tablas - Atributos “width y height”
83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
82.- HTML – Tablas – Atributos Celdas: "align"
mas ... acceder al índice de temas ...
Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)
No hay comentarios:
Publicar un comentario
Gracias por tu comentario, en un maximo de 48 horas sera publicado.