Formateando Tablas (CSS / 1)

Empezamos con una tabla plana en una página.
Haz click en el botón de “Nueva Regla CSS”.

 

Esto abre la ventana de diálogo de “Nueva Regla CSS”.
La primer regla que voy hacer es para el color de fondo de la tabla.
Selecciono el selector Etiqueta y escribo “tabla” en la caja de texto “Etiqueta”. Alternativamente puedes escoger de la lista desplegable cuando haces click en la flecha que apunta hacia abajo.

Voy a formatear mi tabla en una nueva hoja de estilo, entonces selecciono en “Definir en”.
Esto no adiciona reglas que tengas en el archivo existente CSS “mystyle.css” para la inserción de la tabla, pero quiero todo organizado.
Haz click en el botón Aceptar.

 

Queremos proveer un color diferente de fondo para nuestra tabla, entonces es lógico que tenemos la opción de categoría “Color de Fondo” y ajustamos un color diferente para el fondo.
Haz click en el botón Aceptar.

 

Como puedes ver, ésta línea se añade en nuestra tabla inmediatamente.
La nueva hoja de estilo “TableStyle.css”, contiene la línea “tabla” es añadida al panel de Estilo CSS.

Ahora creamos la regla para el color de fondo y color de texto del renglón de más arriba, que es el encabezado del renglón.
Haz click otra vez en el botón “Nueva Regla CSS”.

 

En la “Etiqueta”, escribe th, el renglón encabezado es colocado en una etiqueta th, recuerda lección 28 ?
Definimos ésta línea en el mismo archivo css, TableStyle.css, entonces haz click en botón Aceptar.

 

Aquí tenemos dos líneas para introducir.
Una en una categoría “Tipo” y la otra en la categoría “Fondo”.
Para ambos, cambiaremos el color, color de texto a blanco y el color de fondo a azul.
Haz click en el botón Aceptar cuando hagas esas modificaciones.

 

La regla “th” es añadida a la página CSS “TableStyle.css” y nosotros podemos ver las dos propiedades que ajustamos en “Ventana de Propiedades”.

Esas reglas están inmediatamente aplicadas en nuestro documento.

 

La siguiente línea que hacemos es para los renglones con un fondo blanco.
Entonces hago click en el botón “Nueva Regla CSS”.
Seleccciona el tipo de selector “Avanzadas”.
Y escribe lo siguiente en la caja de texto “Selector”: tr.odd td

Unas palabras de explicación:
tr es para la tabla renglón
odd es sólo un nombre, aquí puedes escribir lo que quieras. Tip: Escoge un nombre significativo.
Y td es para las celdas de tablas.

Ahora en lenguaje humano:
Esta línea debería ser usada para dar propiedades a cada odd etiqueta td (celda) que es una etiqueta tr (renglón).

Haz click en el botón Aceptar cuando termines.

 

Y ahora ajustamos la opción para ésta regla.
Escoge la categoría “Fondo” en “Color de Fondo”, selecciona el color blanco haciendo click en la paleta de colores.
Esto es todo lo que queremos cambiar, entonces hacemos click en el botón Aceptar.

 

Para aplicar éste estilo a uno o más renglones, selecciona el primer renglón, 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 creado, “odd” que fue añadido en la lista desplegable.

 

En la siguiente lección, hacemos el resto.

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats