Formateando Tablas (HTML)

Como lo mencionamos anteriormente, tenemos dos opciones para hacerlo.

Podemos darles formato usando HTML o CSS.

Si decides la primera opción, entonces usamos la ventana de propiedades.

Si decides la segunda opción, usas reglas CSS internas o externas.

Para ambas, lo discutiremos en ésta lección.

Déjame empezar con HTML, en la ventana de propiedades.

La primera cuestión que haré es el color de fondo de nuestra tabla.
Para cambiarlo, seleccionamos la primer tabla y después hacemos click en el botón “Color de Fondo” en la ventana de propiedades y escogemos un color. O escribimos el código de color en la caja de texto “Color de Fondo”.

Esto aparte:
Los códigos de color HTML pueden ser encontrados si tan sólo buscas en google “código color html”.

Cuando hacemos un vistazo a nuestro código vemos que la etiqueta tabla está suplementada con el bgcolor # 999999.

Después, quiero el renglón superior, el renglón de encabezado de mi tabla en fondo azul y texto blanco.
Y para el renglón de enmedio, quiero fondo blanco. Esto permitirá una clara distinción entre los reglones diferentes.

Inténtalo por ti aquí. Tip: primero selecciona la línea que quieres cambiar.

Si no funciona, me sorprenderá, siempre usas Bonzai 07 files.

Después, alineamos nuestro texto.

Quiero a la izquierda y alineado arriba la “Descripción” y a la derecha arriba los “Precios”.

Selecciona las celdas donde está la descripción. Haz click en la celda superior con una descripción, deja prensionado la tecla Shift en tu teclado y haz click en la celda inferior con la descripción.
Haz click en la flecha que apunta hacia abajo a un lado de la caja “Horz” y selecciona “Izquierda” para la alineación horizontal.
Y haz click en la flecha que apunta hacia abajo a una lado de la caja “Vert” y selecciona “Arriba” para la alineación vertical.

Hacemos lo mismo para las celdas con los precios, aquí escogemos la derecha en la alineación horizontal.

 

Después introduzco un espacio entre el filo de la celda y su contenido, un poco más grande.
Selección la tabla otra vez y escribio 7 en la caja “Rell. celda”.
Entre más grande, más espacio crearás.

Y finalmente, tengo varios nombres de productos, de etiqueta h4. Selecciona el texto de arriba, en este caso el nombre del elemento arriba de la descripción y haz click en la flecha que apunta hacia abajo a una lado de la caja “Formato” en la ventana de propiedades y selecciona “Encabezado 4”.

En la siguiente lección, iremos sobre ésto otra vez, pero con la ayuda de CSS.

 

Cursos

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