Thor 13 de mayo de 2008 a las 13.45
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Tablas


Taller de Adobe Dreamweaver: TablasHola ¿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:

<table>
	<tr>
		<td><strong>Título</strong></td>
		<td><strong>Descripción</strong></td>
		<td><strong>Empresa</strong></td>
	</tr> <tr>

<td>Dreamweaver</td>

<td>Programa de maquetación web</td>

<td>Adobe Systems Incorporated</td>

</tr>

</table>

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í:

<table>
	<tr>
		<td><strong>Programas de Adobe Systems
Incorporated</strong></td>

	</tr> <tr>

<td>Dreamweaver</td>

<td>Programa de maquetación web</td> 

</tr>

</table>

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.

<table>
	<tr>
		<td colspan="2"><strong>Programas de
Adobe Systems Incorporated</strong></td>

	</tr> <tr>

<td>Dreamweaver</td>

<td>Programa de maquetación web</td> 

</tr>

</table>

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:

<table>
	<tr>
		<td>Estudiamos en el taller</td>
		<td colspan="2"><strong>Programas de
Adobe Systems Incorporated</strong></td>

	</tr> <tr>

<td>Dreamweaver</td>

<td>Flash</td>

<td>Illustrator</td>

</tr>

</table>

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.

<table>
	<tr>
		<td rowspan="2">Estudio del taller</td>
		<td>Programa</td>
		<td>Código</td>
	</tr> <tr>

<td>Dreamweaver</td>

<td>HTML</td>

</tr>

</table>

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  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (14)

  1. Edu dice:

    Estoy impaciente por cambiar de diseñar en tablas en Dreamweaver a estilos CSS…para cuando el tutorial??

  2. Aelxan dice:

    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 :(

  3. Thor dice:

    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!

  4. Fernando dice:

    He ojeado el curso y pienso seguirlo.Gracias

  5. Marlon dice:

    La verdad que es un curso excelente, a ver si por lo menos hago mi propia pagina…..

  6. Andres dice:

    Excelente… Buen aporte me enrede un poco pero analizando bien al fin pude decifrar la logica del codigo …
    Thanks

  7. Marisol dice:

    Bueno yo empeze el curso ayer, se ya un poco de html, y voy en esta leccion.
    Ayer me vi las 11 lecciones pues tuve 9 hrs para verlo y me parecio interesante, tal vez me apresure. pero me urge aprenderlo y comprenderlo rapido. hazta ahorita no tengo ninguna duda. muy bueno tu curso felicidades!!!!!!!!!!!!!!!!!!!!! tal vez las lecciones que siguen me la lleve mas leve.

  8. gh dice:

    jejejeje saludos a todos marisol me comparo con voz me he leido 11 pàginas ayer espero hoy leer por lo menos a la lección 20 ya quiero diseñar mi pagina…

  9. Federico dice:

    Hola! Me parecen geniales los talleres, pero tengo un problema cuando quiero poner una tabla, me tira este error:
    —————————
    Dreamweaver
    —————————
    While executing onLoad in TableCommands.htm, the following JavaScript error(s) occurred:

    In file “TableCommands”:
    initializeUI is not defined

    —————————
    Aceptar
    —————————
    Si me lo solucionas estaria muy bueno! jaja muchas gracias! 😀

  10. Alejandra dice:

    Hola… La pregunta es, donde pones una table ¿Dónde? ¿Dónde estás intentando hacerlo? ¿Podrías facilitarme el código para que lo vea y pueda ver de qué se trata?

  11. sandra dice:

    Hola! Tengo un problema cuando quiero poner una tabla, me tira este error:
    —————————
    Dreamweaver
    —————————
    While executing onLoad in TableCommands.htm, the following JavaScript error(s) occurred:

    In file “TableCommands”:
    initializeUI is not defined

    Aceptar

  12. dennis dice:

    Mil gracias, excelente aporte! siga adelante

  13. Efrain dice:

    Yo uso tablas en la pagian, con que lo remplazo

  14. Ferrante dice:

    Muy buena esta clase. Ya sé cómo hacer para forzar el tamaño de las celdas en los editores wysiwyg que algunas veces me enloquecieron. Con los atributos width y height en las td. :)

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder