Necesitaremos el programa
FrontPage
para crear
paginas HTML En estas lección intentare explicar lo mejor posible los pasos
que vamos a realizar Para saber como agregar una TABLA
Arrastra esta pequeña regla o guía para marcar los pasos a seguir en el tutorial.
Las
tablas
HTML son probablemente la forma más popular de diseñar una página Web.
Pero seamos sinceros: puede ser un método muy pesado.
Habiendo trabajado con tablas HTML en otras ocasiones, ¿te has preguntado alguna vez por qué a
veces sobra espacio en un sitio y falta en otro? ¿Y qué
te parece lo de que las celdas se vuelvan
locas al soltar algún contenido en la tabla? ¿Por qué ocurre eso?
Pero sin una pequeña explicación detallada, es difícil saber por dónde hay que empezar.
Tablas HTML I:
Conceptos básicos Conceptos básicos:
cómo instalar una tabla HTML simple, cómo son las etiquetas y cómo modificar las propiedades.
En el menú Tabla, haga clic en Tablas y celdas de diseño
En el panel de tareas Tablas y celdas de diseño, realice uno de los procedimientos siguientes:
1 .
Agregar una tabla de diseño de la lista de plantillas
Diseño de tabla.
En
Diseño de tabla, seleccione una tabla de diseño en la lista de plantillas
.
2 .
Dibujar una tabla de diseño.
En
Tablas y celdas nuevas, haga clic en Dibujar tabla de diseño
.
Desplace el puntero hasta la esquina que se encuentra más a la izquierda de la ventana del documento y, después, arrástrelo para dibujar la tabla.
En el panel de tareas Tablas y celdas de diseño,
en Propiedades de tabla,
establezca las propiedades que desee
.
Si no especificas ningún ancho para una tabla HTML, la fila con el contenido más ancho determinará el ancho.
Por ejemplo, la tabla que se muestra aquí no tiene ningún ancho especificado.
Por consiguiente, la última fila determina el ancho ya que su contenido es el más ancho.
Puede usar esta opción si necesita tener una tabla sencilla con datos.
Sin embargo, si desea tener mayor control, las siguientes opciones son mejores.
Cabecera 1.
Cabecera 2.
Cabecera 3.
Celda 1-1.
Celda 1-2.
Celda 1-3.
Celda 2-1.
Celda 2-2.
Celda 2-3.
Tablas HTML II:
Ancho de tabla y de celda Ancho de tabla y de celda:
Descubre las peculiaridades de las tablas HTML: el porqué del comportamiento de los anchos de tabla y cómo lograr que tengan el aspecto deseado. Esto es crucial para entender cómo se diseñan las páginas.
Especificar el ancho de una tabla
Especificar el ancho de una celda
Comprender por qué el ancho de las tablas y de las celdas puede cambiar de manera inesperada
En el panel de tareas Tablas y celdas de diseño
, en Tablas y celdas nuevas, haga clic en Dibujar celda de diseño
.
En la tabla de diseño, arrastre el puntero para dibujar la celda.
Repita los pasos 1 y 2 para agregar más celdas
. SUGERENCIA
Para dibujar dos o más celdas, una detrás de la otra, haga clic en Dibujar celda de diseño.
y mantenga presionada la tecla
CTRL mientras arrastra el puntero
Para establecer las propiedades
de una celda seleccionada, en el panel de tareas
Tablas y celdas de diseño, haga clic
en Formato de celda y seleccione las propiedades que desee
.
Si especificas el ancho para una tabla HTML, la fila con el contenido más ancho determinará el ancho y alto en
píxels o en
porcentaje y
bordes.
Por ejemplo, la tabla que se muestra aquí tiene un ancho y alto especificado en píxeles. Por consiguiente, la última fila determina el ancho y el alto en su contenido. Las celdas de diseño, también especifican el ancho y alto en píxeles
.
Hay tres opciones para el ancho de tabla:
Sin ancho especificado
Ancho en píxeles
Ancho en porcentaje
Cabecera 1.
Cabecera 2.
Cabecera 3.
Celda 1-1.
Celda 1-2.
Celda 1-3.
Celda 2-1.
Celda 2-2.
Celda 2-3.
Nuestra TABLA tiene una alineación predeterminada, que podemos variar en seleccionando la
CELDA Propiedades de celda...
Alineación horizontal: CENTRAR,
IZQUIERDA,
DERECHA, o JUSTIFICAR.
CENTRAR <align="center">
Cabecera 1.
Cabecera 2.
Cabecera 3.
Celda 1-1.
Celda 1-2.
Celda 1-3.
Celda 2-1.
Celda 2-2.
Celda 2-3.
IZQUIERDA
<align="left">
Cabecera 1.
Cabecera 2.
Cabecera 3.
Celda 1-1.
Celda 1-2.
Celda 1-3.
Celda 2-1.
Celda 2-2.
Celda 2-3.
DERECHA <align="right">
Cabecera 1.
Cabecera 2.
Cabecera 3.
Celda 1-1.
Celda 1-2.
Celda 1-3.
Celda 2-1.
Celda 2-2.
Celda 2-3.
Para resaltar un borde en una tabla, activa la casilla
TAMAÑO
con el valor deseado.
Nuestra
TABLA
tiene un borde de
TAMAÑO 1
Podemos añadir también: COLOR.
BORDE CLARO.
BORDE OSCURO.
FONDO
Incluso
Utilizar imagen de Fondo
desde nuestra ubicación o destino.
Cabecera 1.
Cabecera 2.
Cabecera 3.
Celda 1-1.
Celda 1-2.
Celda 1-3.
Celda 2-1.
Celda 2-2.
Celda 2-3.
En la ventana del documento, haga clic en el borde de la tabla de diseño cuyas propiedades desea establecer.
En el panel de tareas
Tablas y celdas de diseño, en
Propiedades de tabla, seleccione las propiedades que desee. SUGERENCIA
Para anular los márgenes predeterminados de una página Web y dejar que la tabla de diseño se expanda
hasta los bordes de la ventana del documento, establezca las propiedades de margen en 0 (cero).
para crear
paginas HTML
En el menú Tabla, haga clic en Tablas y celdas de diseño
En el panel de tareas Tablas y celdas de diseño, realice uno de los procedimientos siguientes:
Comprender por qué el ancho de las tablas y de las celdas puede cambiar de manera inesperada
