tablas

Tablas e imágenes con CSS

Lo primero que vamos a tratar es como crear botones con texto

Si queremos representar una tecla del teclado la podemos simular con una clase del tipo

.key { border: 1px solid #333399;
font-weight: bold;
color: #6666cc;
background-color: #ccffff;
padding-top: 1px;
padding-bottom: 1px;}

Imagen de fondo

Para nuestra web opdemos uasr una imagen de la temática de nuestra web o bien u degradado que consigue una tonalidad en el color variable según una de las coordenadas ( generalmente la horizontal )

La manera de poner la imagen es

body { background-image: url(/images/fondo.jpg) }

En este caso, lo conseguimos es aplicar esa imagen al fondo de la web. Si la imagen es pequeña, el navegador la repite y repite hasta cubrir toda la página. Si no queremos que se repita debemos poner background-image: no-repeat;

Si queremos que se repita solo en una coordenada, se pone repeat-x o repeat-y según el caso

Situación de la imagen

Tenemos dos opciones a la hora de situar la imagen en la página.

a) Que esté fija , en cuyo caso debemos poner en la hoja css,

body { background-image: url(/images/fondo.jpg)  background-color: #000080  background-attachment: fixed }

b) Si queremos que la imagen se mueva según movemos por la página, tenemos que sustituir

 background-attachment: fixed por  background-attachment: scroll

Aremas tenemos los siguientes atributos

top left – > Lo situa arriba a la izquierda
top center -> Arriba centrado
top right -> Arrina a la derecha
left = left center = center left = 0% 50%
center center -> Lo centra en el centro
right center -> centrado en centro y a a derecha
bottom left -> Abajo a la izquierda
hay otras que podeís ver en manuales de css

Tenemos el x% e y% que nos indican el porcentaje respecto al borde superior y borde izquierdo

En este apartado hay que decir que no todos los navegadores interpretan bien los css para tablas así que haremos lo más sencillo nuestro código.

Un primer paso es crear la tabla usando código html de la forma

<table border=»1″ cellpadding=»2″ cellspacing=»2″>
<tr>
<th>Editorial</th>
<th>Título </th>
<th>Precio</th>
<th>Ventas</th>
</tr>
<tr>
<td>Anaya</td>
<td>200 leguas de viaje submarino</td>
<td>12 € </td>
<td>4890 </td>
</tr>
</table>

O sea creamos una tabla con espaciado entre celdas de 2 y espaciado interior de 2 px.

Para vincularla a un estilo, tenemos que poner al inicio

<table border=”0″ cellpadding=”2″ cellspacing=”2″ class=”mitabla”> y nuestra tabla ahora tomará los atributos del estito mitabla que será de la forma:

.mitabla {
font-family: Verdana, sans-serif;
font-size:14px;
text-align: left;
width: 500px; }

Comprobar como la apariencia de la tabla ha cambiado

Seguimos ampliando la tabla para que tome la forma

.mitabla {
font-size: 14px;
font-weight:bold;
background-color: #fdfdf1;
background-image: url(fondo_tabla.png);
background-repeat: repeat-x;
color: #992200;
font-family: Arial;
text-align:center;
}

.mitabla th {
font-size: 14px;
font-weight: bold;
background-color: #f2fdf2;
background-image: url(fondo_head.png);
background-repeat: repeat-x;
color: #990044;
font-family: Arial;
text-align:center;
}
.tabla td {
padding: 12px;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #44E9BA;
}
Sustituir este estilo en la hoja de estilo y veremos como se modifica la tabla.

Como comprobaremos, si no tenemos el fondo_head.png y el fondo_tabla.png, solo veremos un color de fondo en la tabla.

Para tener dos líneas con difenrete aspecto, añadimo

.mitabla .modo2 td {
padding: 5px;
border-bottom-width: 2px;
border-bottom-style: solid;
background-color: rgb(10, 255, 247);
border-bottom-color: #557722;
font-size: 22px;
}

El resultado ( sin cargar las imagenes ) es:

Como paso final ponemos las degradados y la hoja de estilo que dan como resultado la tabla:

Igamenes degradadas:

El Codigo html es:

<table class=»mitabla» border=»1″ cellpadding=»2″
cellspacing=»2″>
<tr>
<th>Editorial</th>
<th>Título </th>
<th>Precio</th>
<th>Ventas</th>
</tr>
<tr>
<td>Anaya</td>
<td>200 leguas de viaje submarino</td>
<td>12 € </td>
<td>4890 </td>
</tr>
<tr>
<td>Bruño</td>
<td>201 legua<span>s</span>
de viaje submarino</td>
<td>14 € </td>
<td>489 </td>
</tr>
</table>
Y la hoja de estilo, un poquito para esta última tabla es

.mitabla {
font-size: 14px;
font-weight: bold;
background-color: #fdfdf1;
background-repeat: repeat-x;
color: #992200;
font-family: Arial;
text-align: center;
}
.mitabla th {
font-size: 14px;
font-weight: bold;
background-color: #f2fdf2;
background-image: url(images/fondo.png);
background-repeat: repeat-x;
color: #990044;
font-family: Arial;
text-align: center;
}
.mitabla td {
border-bottom: 4px solid #44e9ba;
padding: 2px;
background-image: url(images/fondo1.png);
}
.mitabla .modo2 td {
border-bottom: 2px solid #557722;
padding: 2px;
background-image: url(images/fondo2.png);
background-color: #0afff7;
font-size: 14px;
}