Tu web de informática

atras

1.7 Tablas en html

adelante

Código de las tablas en html

Otra forma de estructurar la web distinta de las capas son las tablas. El menú de navegación lo vamos a hacer por medio de tablas, pero primero vamos a ver cómo se hacen estas tablas.

Una tabla está dividida en filas y columnas, por ejemplo, esto es una tabla de dos filas y cuatro columnas:

Celda 1 Celda 2 Celda 3 Celda 4
Celda 5 Celda 6 Celda 7 Celda 8

Como podeis ver a cada casilla de una tabla se le llama celda. Pues bien, para abrir una tabla usamos el código <table>, y para cerrarla usamos </table>. En una tabla además tenemos que indicar si tiene bordes y cómo son estos bordes. Para ello lo incluimos dentro del código de la tabla de la siguiente forma (ahora os explico para qué es cada cosa):

<table border="1" cellpadding="0" cellspacing="0">
</table>

Podemos ver tres cosas:

  1. Border, que se utiliza para indicar el grosor del borde. Si no queremos que tenga borde sólo tenemos que ponerlo a 0.
  2. Cellpadding, que es el padding de las celdas, es decir, el margen interior. Esto también se puede indicar en la hoja de estilos como ya hemos aprendido.
  3. Cellspacing. Como podemos ver si nos fijamos con detalle el borde de una tabla está formada por dos líneas. Cellspacing es la distancia entre estas dos líneas, de forma que el valos de ésta características se sumará a la del borde, haciéndolo más grande.

Pues bien, continuemos con la creación de las tablas. Una vez puesta la etiqueta de la tablas tenemos que poner las filas, y luego las columnas (siempre hay que poner las columnas dentro de las filas y no al revés). Para poner una fila la abrimos con <tr> y la cerramos con </tr>. Al igual, para abrir una columna usamos <td> y para cerrarla </td>. Dentro de las filas ya ponemos lo que queramos de contenido.

De esta forma, la tabla que os enseñé antes, que tiene cuatro columnas y dos filas, con un borde de 1 píxel, y que dentro de las celdas tienen un texto escrito se haría así:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
<tr>
<td>Celda 5</td>
<td>Celda 6</td>
<td>Celda 7</td>
<td>Celda 8</td>
</tr>
</table>

Creando el menú de navegación

Pues bien, una vez dicho esto vamos a crear nuestro menú de navegación. Vamos a meter nuestra tabla en un div al que le vamos a poner los estilos, pero también podeis ponerle los estilos a los td. Pues bien, vámonos a la hoja de estilos y vamos a definir un estilo al que llamaremos navegacion. A este estilo vamos a ponerle que tenga un margen por abajo de 4 píxeles y que tenga de color de fondo un color azul oscuro (#000066). De esta forma tenemos que agregar la siguiente línea en la hoja de estilos:

#navegacion {margin: 0px 0px 4px 0px; background-color: #000066}

Ahora vámonos a la hoja html y vamos a crear el div con el estilo de navegación justo después de cerrar el div de cabecera:

<body>

<div id="fondo">
<div id="global">

<div id="cabecera">
<div id="logotipo">
 <img src="imagenes/site_logo.gif" alt="Tu web de informática">
</div>
<div id="banner"></div>
</div>

<div id="navegacion">
</div>

<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>
</div>
</div>

</body>

Ahora vamos a crear una tabla dentro de este div, y vamos a ponerle las siguiente características:

  1. La tabla no va a tener bordes y su tamaño va a ser el 100% del div (esto se pone introduciendo en la etiqueta table el código width="100%").
  2. Va tener una fila y cuatro columnas.
  3. Cada fila va a medir lo mismo, es decir, un 25% de lo que mide la tabla
  4. En las celdas vamos a escribir las palabra Indice - Seccion 1 - Seccion 2 - Seccion 3
  5. Las celdas van a centrar el texto de dentro de ellas, lo que se hace introduciendo el código align="center" en la etiqueta td.

De esta forma el div de navegacion nos quedaría así:

<div id="navegacion">
<table width="100%" border="0">
<tr>
<td width="25%" align="center">Índice</td>
<td width="25%" align="center">Sección 1</td>
<td width="25%" align="center">Sección 2</td>
<td width="25%" align="center">Sección 3</td>
</tr>
</table>
</div>

De esta forma nuestra web por ahora queda así. Si os fijais no se ve bien el texto de dentro de la tabla, porque es negro, pero cuando pogamos que sean enlaces en el siguiente capítulo se verán bien. Si hay algo que no te sale o tienes alguna duda tienes el foro a tu disposición para preguntarnos.

atras
adelante

Volver a crear webs>>


Creada el 02/05/08 18:26
Copyright © - Todos los derechos reservados - Página creada por Juanma