Dreamweaver - CS3

Lección 28: Tablas (1)

28/58 Lecciones 

Insertar Tabla

Incluso antes había formato en CSS para páginas HTML, una usualmente usaba tablas de diseño y formato de sitios.

Ahora que CSS es soportado por todos los navegadores, ésto es lo más apropiado para el diseño de tus páginas, pero no significa que las tablas no sean importantes.

Insertar una tabla en una página de diferentes formas.

Primero abre tu página en curso donde quieras insertar una tabla.
En la barra de herramientas “Insertar”, escoge la pestaña “Común” y haz click en “Tabla”.

O una segunda forma es en el botón “Insertar” en la barra menu y escoger “Tabla” en el menu desplegable.

En ambos casos, esto abre una ventana de diálogo, ¿esperabas algo más?

En la parte superior tenemos los encabezados de “Renglones” y “Columnas”. Lo que tienes que introducir es claro, yo creo.

Abajo tenemos el cuadro “Ancho de Tabla”.
En “Ancho de Tabla”, escogemos el ancho de nuestra tabla en pixeles o porcentaje.
Si escogemos “pixeles”, entonces nuestra tabla tendrá un ancho fijo. Si escogemos “Porcentaje”, entonces el ancho de tu tabla será ajustada para llenar el ancho del monitor del visitante de tu sitio.

La caja de texto “Grosor de borde” determina el grosor del filo de la tabla. Escribe 0 (cero) si no quieres bordes. Sólo déjalo en blanco la caja, y aun mostrará un filo pequeño.

Con la caja “Relleno de celdas”, definimos los espacios entre el filo de las celdas y su contenido.

 

En la caja “Espacio entre celdas”, determinamos la distancia entre las diferentes celdas.

En la caja de diálogo “Encabezado”, determinamos cuando nuestra tabla tiene un encabezado de renglón o encabezado de columna, ambos o ninguno.

Todas esas configuraciones pueden ser cambiadas después de todo, entonces no importa cuando la introduces correctamente.

Haz click en el botón Aceptar.
Esto coloca la tabla en nuestro documento.
Como puedes ver en la imagen de abajo, encontramos cada caja de texto en la caja de diálogo de atrás “Tabla” en la ventana de propiedades.
Entonces si deseas cambiar el diseño de tu tabla, puedes siempre visitar aquí.
Selecciona la tabla en primer documento, de otra forma la ventana de propiedades no muestra las propiedades de la tabla.
Puedes modificar la tabla de diferentes formas.
Puedes colocar el cursor sobre el filo de la tabla y cuando cambie color, haz click con el mouse.
O, lo que que estoy pensando, colocaste el cursor en la tabla y selecciona la etiqueta <table> en el selector etiqueta.etiqueta en la Tag-Selector.

Veamos lo que se ha insertado en el código.
Para empezar con esto, tenemos la etiqueta tabla, el cual es la etiqueta para nuestra tabla.
Esto siempre comienza abriendo una etiqueta: <table> y termina cerrandola: </table>
En el renglón de tabla de la etiqueta, tenemos diferentes etiquetas para los renglones. Siempre se empieza con una etiqueta que se abre: <tr>, y termina con: </tr>
Tengo tres renglones en mi table, entonces tengo tres etiquetas renglón.

Tengo tres celdas en un renglón. Una celda es colocada dentro de una etiqueta-td. Las etiquetas td comienzan con etiqueta: <td> y terminan con: </td>

Si colocas un “Encabezado” en la “Tabla” de diálogo (Ver Figura 2 en ésta página), entonces las celdas del encabezado son colocados en una etiqueta th, comenzando con la etiqueta <th> y terminando con: </th>.

Recuerda las diferentes etiquetas HTML y como puedes seleccionarlas.
Esto es realmente importante, no necesitarás nada de mi.

Ahora insertamos datos.
Para esto, coloca tu cursor en la celda y empieza a escribir.
Si quieres, coloca una imagen en tu celda, después arrastrálo al “Archivo Panel” al lugar en tu tabla donde lo quieres.
Para añadir un renglón extra, coloca el cursor en la última celda, la celda en la parte inferior derecha, y haz click en la tecla tabulación de tu teclado.

En la siguiente lección, formatearemos nuestra tabla.

Increíble! Has completado Lección 28 INICIAR EL PROXIMO LECCIÓN