Hola ¿Qué tal? ¿Cómo andan esos estudiantes mega-responsables? Bienvenidos a una nueva clase del Taller de Adobe Dreamweaver/HTML.
Espero que estén entusiasmados, porque hoy vamos a ver tablas, que es medio pesado, pero es un tema que hay que saber porque las tablas son un elemento que de seguro van a usar en muchos lados (aunque en clases siguientes trataremos de convencerlos de que no lo hagan jeje).
Bueno, vamos a ver en qué consiste esto de las tablas…
Un poco de historia (no tan histórica)
En la “vieja” web, las tablas servÃan para diagramar páginas completas. Estas se dividÃan en tantas partes como sectores iba a tener la página, y dentro se cargaba la información necesaria.
Hoy por hoy, las tablas dejaron de ser un medio para maquetar la página entera, y pasaron a ser lo que realmente dicen ser, tablas.
Se usan para ordenar información en columnas o filas que mantienen una relación entre sÃ, ya sea que todas las partes de esas filas/columnas dependen de un mismo tÃtulo, o unas son derivadas de otras. A modo de ejemplo:
|
TÃtulo |
Descripción |
Empresa |
|
Dreamweaver |
Programa de maquetación web |
Adobe Systems Incorporated |
Como se puede ver, este ordenamiento de información no tiene mucho que ver con la maquetación de una página. Es solo para ordenamiento.
Antes pensaban las páginas de acuerdo a las tablas y se hacÃa una gigante que iba a contener la cabecera, cuerpo, barras laterales y footer; y se metÃa toda la página dentro de esta tabla, con aún más tablas anidadas.
Esta práctica ya es obsoleta y está por demás recomendado no utilizarla de este modo (volvemos al viejo lema que dice que las cosas se deben usar para lo que fueron hechas).
Claro está que en algún momento el HTML se basó e incluso fomentó el uso de tablas para maquetar páginas web, pero las tecnologÃas cambian y hay que adaptarse a los estándares.
No porque el HTML 0.000001 haya usado tablas para maquetar páginas, nos da la excusa para que hoy las usemos de ese modo sin culpa :p.
Ahora sÃ, a ver como se hacen y utilizan las tablas
Las tablas se encierran entre las etiquetas <table> y </table> como ya estarán acostumbrados a esta altura, su apertura con su cierre.
Dentro de ellas vamos a poder poner etiquetas <tr></tr> que van a ser cada fila de la tabla, y a su vez, dentro de ellos van a poder poner etiquetas <td></td> que van a corresponder a cada columna de la fila.
Veamos un ejemplo:
|
Esta tabla, nos darÃa como resultado, la tabla que pusimos arriba (”Un poco de historia”), que tendrÃa 3 columnas y 2 filas.
En la fila de arriba tendrÃamos las tres columnas “TÃtulo”;”Descripción”;”Empresa” y en la fila de abajo “Dreamweaver”;”Programa de maquetación web” y ” Adobe Systems Incorporated”.
Propiedades
El uso de las tablas a veces se complica para la gente que no las ha usado nunca, cuando quiere hacer ciertas cosas, como por ejemplo:
Una tabla de una columna como tÃtulo y 2 como contenido.
Este es un problema que no parecerÃa tal, pero sà que lo es, porque si no definimos ciertas propiedades de antemano, nuestra tabla se romperá.
Supongamos que tenemos una tabla de esta forma:
|
Programás de Adobe Systems Incorporated |
|
|
Dreamweaver |
Programa para maquetación web |
A simple vista nuestra tabla serÃa asÃ:
|
PERO ¡NO!
Si en nuestro HTML tenemos la tabla definida asÃ, se nos romperá (o andará de casualidad, a veces suele suceder jeje).
Y ustedes se preguntarán por qué no anda, si tiene todos los elementos necesarios para funcionar. Acá esta la respuesta:
El problema es que el HTML considera la tabla como una cuadricula, por ende, a nuestra tabla de arriba, le faltarÃa una columna en el primer <tr> y por ende estarÃa “rota”.
Para que el HTML no se confunda, le tenemos que indicar que la columna de la fila uno va a ocupar el ancho de dos columnas, y para esto debemos hacer uso de la propiedad colspan.
Pasemos al ejemplo y después explicamos bien la propiedad.
|
De esa manera tenemos la tabla bien definida, los dos <td> de abajo formarÃan las dos columnas que tenemos en la tabla, y al <td> de arriba le estarÃamos indicando que debe ocupar el ancho de las dos columnas que tiene la tabla.
Si abajo tuviésemos 3 columnas (3 <td>) el colspan de la de arriba deberÃa ser de 3, o bien podrÃamos tener una con colspan de 2 y otra columna simple.
Veamos otro ejemplo:
|
Estudiamos en el taller |
Programás de Adobe Systems Incorporated |
|
|
Dreamweaver |
Flash |
Illustrator |
Acá tenemos una tabla con 2 columnas en la fila uno y 3 columnas en la fila dos.
El código correspondiente serÃa:
|
Esta tabla de arriba nos da pie para explicar algunas cosas más:
Como podemos ver, la columna que tiene el colspan es la segunda de la fila uno y esto es porque el colspan nos dice cuántas columnas va a ocupar la misma, pero se toma desde ahà en adelante.
Si nosotros le hubiésemos puesto colspan 2 a la columna “Estudiamos en el taller”, esta hubiese tomado el doble de ancho, y no hubiese sido la tabla que nosotros querÃamos.
En fin, las tablas deben tener en todas sus filas la misma cantidad de columnas, asà es que, la fila con mayor cantidad de columnas es la que se toma como base y al resto se le asigna “colspan” como tanto espacio ocupen ( 1 o más columnas).
Espero que esto quede entendido, si no, ya saben: ¡A mandarle comentarios a Thor!
Siguiendo….
Les paso a dar la agradable noticia de que ¡¡¡¡CON LAS FILAS PASA LO MISMO!!!!
Y sÃ, como era de esperarse, asà como tenemos que tener la misma cantidad de columnas, también debemos tener la misma cantidad de filas. Recuerden que la tabla, como dije antes, es como una especie de grilla cuadriculada.
Bien, si se entendió lo de colspan, esto se va a entender aún más fácilmente.
Pongamos ejemplos:
|
Estudio del Taller |
Programa |
Código |
|
Dreamweaver |
HTML |
Acá tenemos una columna, que en vez de ocupar el doble de ancho, ocupa el doble de largo (dos filas).
¿Y qué pasa cuando tenemos una tabla asÃ? Aquà surge la propiedad “rowspan”.
Pasemos directamente al código correcto, presuponiendo que quedó claro lo de colspan, asà que ya deberÃan entender esto.
|
Como podemos ver, la propiedad rowspan actúa de manera similar a la propiedad colspan, pero de forma vertical.
El <td> con rowspan 2 ocuparÃa el <td> faltante en la fila dos y como lo pusimos arriba de todo, ocuparÃa especÃficamente, el primer <td> faltante.
Calculo que han entendido.
Sé que es un tema difÃcil si no se lo ve por uno mismo, asà que los invito a que abran el Dw y prueben hacer tablas a mano en modo código y luego vean los resultados en vista de diseño y vayan probando diferentes cambios.
Van a ver que probándolo se entiende más fácil.
Hasta aquà mostramos las propiedades FUNDAMENTALES que se deben conocer para poder crear una tabla.
Ahora vamos a ver otras menos importantes, pero que está bueno saberlas.
Cellspacing: Esta propiedad se usa en la etiqueta <table> ( <table cellspacing=”2″) y define nuestro espacio entre una celda y la otra de nuestra tabla.
Border: Esta propiedad también se usa en la etiqueta <table> e indica el borde que va a tener nuestra tabla tanto alrededor como el de las celdas en sÃ.
Además, la etiqueta <table> comparte propiedades comunes como width y height, aunque la mayorÃa de los estilos de cualquiera de las etiquetas que aprendimos y aprenderemos los manejaremos más adelante con CSS.
Bueno, por último y ya los dejo tranquilos, sólo les querÃa comentar que existen otro tipos de tablas, que en realidad son más o menos lo mismo que estas pero que varÃan en pequeñeces.
Les dejo como tarea investigarlas, si es que tienen ganas, y cualquier cosa me preguntan lo que necesiten, si no entienden.
Conclusión
Clase larga ¡sà que sÃ! pero útil.
Espero que se haya entendido todo bien, cualquier cosa me preguntan vÃa comentarios.
Nos vemos de nuevo la semana que viene con otra edición del taller, ya para empezar con divisores, que son la etiqueta madre de los sitios web actuales.
No se lo pierdan que se viene lo más importante.
¡Hasta luego!
| << CLASE ANTERIOR |
Miércoles, 14 de Mayo de 2008 a las 06.51
Estoy impaciente por cambiar de diseñar en tablas en Dreamweaver a estilos CSS…para cuando el tutorial??
Jueves, 15 de Mayo de 2008 a las 07.08
Tablas forever! me resulta mucho mas pesado diseñar usando y CSS, y además luego con esto me pierdo entre mi propio código
Viernes, 23 de Mayo de 2008 a las 10.25
Edu y Aelxan, gracias por seguir el taller, y en la clase que sigue a esta, hay respuesta para ambos
Vamos a mostrar un poco de estilos y diseño sin tablas. Ademas de las ventajas que esto genera.
Saludos!
Martes, 27 de Mayo de 2008 a las 21.18
He ojeado el curso y pienso seguirlo.Gracias