Cómo Crear Tablas

Para comenzar vamos a ir abriendo con el Dreamweaver la página anteriormente creada para la plantilla, la llamada plantilla1.htm.

Si echáis un vistazo al código Html de la misma veréis que aún no hay nada entre <body> y </body>, es decir, no tiene nada que mostrar.

Nosotros vamos a crear la primera tabla, que será la tabla Superior.

Para ello en Dreamweaver pulsamos en "Insertar" + "Tabla" y en la ventanita gris que aparecerá ponemos:

- Filas: Número de filas (horizontales) que queremos que tenga la tabla.

- Columnas: Número de columnas (verticales) que deseamos.

- Ancho: Anchura de la tabla completa. Se puede escoger un ancho determinado en pixeles o que se muestre con un ancho igual a una cantidad relativa a la anchura de la página, como por ejemplo, que sea la mitad de la anchura de la página, o el 100 por cien, etc.

- Borde: Si ponemos un número distinto de cero será el grosor de las líneas que delimitan cada celda de la tabla, es decir, aparecen las celdas con un recuadro de cierto grosor. Si ponemos un cero (0) los bordes serán invisibles, no habrá borde.

- Relleno Celda y Espacio Celda: Son los márgenes de cada celda, es decir, la separación entre lo que contienen y los bordes.

Nosotros, para esta primera tabla, vamos a escoger 1 fila, 2 columnas, ancho 95% en porcentaje, borde cero y relleno y espacio de celda cero también. (poned un cero en estos).

Una vez aceptáis, aparece la tabla delimitada con unas líneas discontínuas que luego no se verán en la web. Ahora toca retocarla para darle el aspecto deseado, pero antes quisiera que supierais que ha hecho Dreamweaver para crear esa tabla, es decir, que ha cambiado en nuestro código Html.

Para saberlo, basta con ver el código Html de la página plantilla1.htm pulsando Boton para ver el codigo html.

Podemos ver que al insertar la tabla aparece, entre <body> y </body> lo siguiente:

......
<table width="90%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
....

En la página siguiente os explico que significa este código.

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net