Dreamweaver - CS3

Lección 31: Tablas (4)

31/58 Lecciones 

Formateando Tablas (CSS / 2)

Lo que hacemos, es una alineación verticalmente en la descripción de texto, entonces estára siempre arriba de la celda. Tenemos aún que alinear los precios a la derecha y tenemos que crear varios espacios entre el filo de la celda y el texto.

Dejame emepzar con la alineación vertical de la descripción.
Haz click otra vez en el botón “Nueva Regla CSS”.
Selecciona “Avanzadas” en el Selector Tipo.
Y escribe las dos etiquetas “th” y “td” separadas por una coma en la caja de texto “Selector”.
Hacemos ésto porque ésta regla puede aplicarse a las celdas (th) de encabezado de renglón, así como al resto las celdas de tabla (td).

Haz click en el botón “Aceptar”.

 

Escoge la categoría “Bloque” y escoge “arriba” en “Alineación Vertical”.
Esto moverá todo el texto en las celdas, entonces todas esas celdas aparece alineadas arriba.

Ahora que estoy aquí aun, debería inmediatamente incrementar el espcio entre el borde y el texto.
Escojo la categoría “Cuadro” y escribo 7 en el “Top” en la sección “Relleno”.
Esto determinará el espacio entre el borde dela celda y los datos de la celda.
Dejo en la caja “Mimo para todas” verificado, porque quiero extra espacio arriba, abajo, izquierda y derecha del texto.

Haz click en el botón Aceptar cuando termines.

 

Y quiero alinear a la derecha la última columna, precios. Después se alineará elegantemente bajo cada una.
Haz click en el botón “Nueva Regla CSS”.
Selecciona “Clase” en el tipo de selector.
Dale un nombre apropiado. “Alineación Derecha” sería apropiado ¿no?
Haz click en el botón Aceptar.

 

Y en la caja de diálogo, escoge la categoría “bloque”.
Y en la “Alineación Texto” escoges, lo que estamos pensando, “derecha”.
Haz click en el botón Aceptar.

 

También aplicar este estilo a uno o más celdas, primero selecciona la celda, haz click en la flecha que apunta hacia abajo a un lado de la caja “Estilo” en la ventana de propiedades.
Y escoge el estilo nuevamente creada “Alineación Derecha” el cual está añadido a la lista desplegable.

 

Resultados, los precios son alineadas a la derecha:

 

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