1. Cómo se crea una tabla
Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio, <TABLE> , e instrucción de fin, </TABLE> . Entre ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla. Estas etiquetas son:
TR: La etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá tantas filas como apariciones de esta etiqueta haya entre <TABLE> y </TABLE>. La instrucción de inicio de TR, <TR>, marca el comienzo de la línea, la instrucción de fin, </TR%gt;, marca su final. La instrucción de fin es optativa, si no se usa se considera que una línea ha acabado cuando comienza otra o cuando acaba la tabla. Entre el comienzo y el fin de la línea debemos insertar las celdas de la tabla.
TH: Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El nombre de la etiqueta proviene del inglés Table Header, encabezado de tabla. Al igual que la etiqueta anterior el comienzo del encabezado viene dado por la instrucción de inicio, <TH> y finaliza con la instrucción de fin, </TH>, o con el comienzo de otra celda. En general entre el comienzo y el fin se suele insertar texto, que será mostrado en negrita o subrayado y centrado.
TD: Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table Data (Datos de tabla), nos induce a pensar que su función será introducir todos los datos que queramos en las celdillas definidas de esta forma. Y así será, de hecho podemos insertar cualquier elemento de HTML: imágenes, listas, texto formateado e incluso otras tablas. La diferencia de esta celda con la anterior es pequeña, y su existencia separada sólo tiene sentido si consideramos el carácter descriptivo del HTML. En la práctica la diferencia principal es que el texto de los encabezados de tabla aparecerá resaltado y centrado y el de las celdas normales (TD) no.
 | El uso de las instrucciones de fin de TR, TD y TH es, como hemos dicho, optativo. Sin embargo en las primeras versiones del lenguaje HTML era obligatorio usarlas y por esta razón algunos navegadores antiguos las necesitan para poder entender las tablas. Es por ello que nuestra recomendación es usar siempre dichas instrucciones de fin para seguir con nuestro objetivo de llegar a la mayor cantidad de público posible. |
Con una mera descripción de las etiquetas es difícil entender por completo como se crean tablas en HTML, así que vamos a ver unos ejemplos.
Para empezar crearemos una tabla sencilla de dos filas y dos elementos. Vayamos por pasos:
En primer lugar ponemos la instrucción de inicio y fin de la etiqueta TABLE dejando un espacio entre ellas para insertar posteriormente el resto de etiquetas:
<TABLE> ...Otras etiquetas... </TABLE>
A continuación insertamos las filas. La tabla que nos hemos propuesto crear consta de dos filas. Por tanto debemos usar la etiqueta TR dos veces. Lo que insertemos en la primera (entre la instrucción de inicio y la instrucción de fin) será el contenido de la primera fila y lo que insertemos en la segunda será el contenido de la segunda fila:
<TABLE> <TR> </TR> <TR> </TR> </TABLE>
El tercer paso será definir el contenido de cada fila. Como nos habíamos propuesto que la tabla tuviese dos columnas en cada fila debemos insertar dos celdas en cada una. Como hemos explicado antes, para crear una celda debemos usar la etiqueta TD. Entre la instrucción de inicio y la instrucción de fin de está etiqueta será donde insertaremos el verdadero contenido de la tabla. En este primer ejemplo sencillo será simplemente texto, pero puede ser cualquier otro elemento web como imágenes o listas. Volviendo a nuestro ejemplo, para cada fila debemos escribir el siguiente código:
<TR> <TD> Columna1 </TD> <TD> Columna2 </TD> </TR>
En los ejemplos que veremos a lo largo de este curso sangraremos las etiquetas a distintos niveles para que sea más sencillo saber que etiquetas están dentro de otras. No es necesario realizar esto para que el código funcione, de hecho podríamos escribir el código en una sola línea y también funcionaría, pero si es recomendable ya que nos facilita mucho su lectura.
El cuarto paso es ponerlo todo junto, repitiendo el código anterior para cada fila. El código final de la tabla será:
<TABLE> <TR> <TD> Fila1,Columna1 </TD> <TD> Fila1,Columna2 </TD> </TR> <TR> <TD> Fila2,Columna1 </TD> <TD> Fila2,Columna2 </TD> </TR> </TABLE>
En la figura 7.2 podemos ver como muestra Explorer esta tabla.
Figura 7.2. Ya hemos creado nuestra primera tabla, aunque es sencilla ya podemos observar varias cosas curiosas en ella, por ejemplo que por defecto no se dibujan los bordes.
Quizá el hecho que más nos sorprenda es que la tabla no tiene bordes, y que las celdas no están dibujadas. Más adelante comentaremos algo más sobre ello y aprenderemos a incluir bordes de diferentes tamaños. Lo que más nos interesa ahora es comprender la estructura de la tabla anterior. Como hemos podido comprobar, esta tabla se va creando por filas, y dentro de cada fila se insertan las celdas, cada una de las cuales aparecerán en una columna.
A continuación mostramos una tabla ligeramente más complicada, en la que, ahora sí, haremos uso de los encabezados de tabla. En ella observaremos además que ocurre cuando una fila tiene más celdas que otra. Para la creación del código de esta tabla habrá que llevar a cabo los mismos pasos que en el ejemplo anterior. El código final que define la tabla será:
</TABLE>
|
Este ejemplo es mostrado en la figura 7.3.
Como habíamos comentado, el texto de los encabezados es resaltado, en este caso (usando Explorer) es mostrado en negrita y centrado con respecto al resto de los elementos de su columna. Por otro lado en este ejemplo observamos el efecto de la existencia de una fila con más celdas (más columnas) que el resto. En la primera fila insertamos tres celdas usando la etiqueta TH y sin embargo en las siguientes filas sólo creamos dos celdas. Aunque lo pueda parecer esto no es ningún problema. El navegador creará una tabla de 3 filas y 3 columnas, pero algunas de las celdas estarán vacías.
1.1. Borde de las tablas
El siguiente paso en el aprendizaje de las tablas consiste en añadirles un borde. Esto es tan sencillo como añadir un nuevo atributo a la instrucción de inicio de la etiqueta TABLE. El atributo del que hablamos es BORDER, que significa borde en inglés. Este atributo puede tomar un valor en pixeles que representa el grosor del borde a mostrar. Si incluimos BORDER sin ningún valor es equivalente a BORDER="1" Repitamos el segundo de los ejemplos vistos antes pero añadiéndole un borde de grosor 5.
<TABLE BORDER="5">
<TR>
<TH>
Encabezado1
</TH>
<TH>
Encabezado2
</TH>
<TH>
Encabezado3
</TH>
</TR>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
</TR>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TR>
</TABLE>
|
En la figura 7.4 podemos ver el resultado de este código. En ella observamos como Explorer le da un aspecto tridimensional al borde de las páginas.
Figura 7.4. Tabla con bordes. En esta tabla podemos observar lo que ocurre cuando una fila tiene más celdas que otra o cuando insertamos una celda sin nada dentro.
Un aspecto interesante a resaltar de la figura 7.4 es que las celdillas que están vacías, es decir, no tienen ni texto ni ningún otro elemento en su interior no son dibujadas por los navegadores. En este caso ni siquiera habíamos puesto las instrucciones <TD> y </TD > correspondientes a esas celdas, aunque si las hubiésemos puesto, pero sin ningún contenido dentro, es decir, si hubiéramos escrito:
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
<TD></TD>
</TR>
|
El resultado habría sido el mismo.
Si queremos que sí sean dibujadas debemos insertar la etiqueta TD con un salto de línea (<BR>) o un espacio creado con una secuencia de escape, , para definirla. Esto es, en el caso anterior podíamos haber escrito.
<TABLE BORDER="5">
<TR>
<TH>
Encabezado1
</TH>
<TH>
Encabezado2
</TH>
<TH>
Encabezado3
</TH>
</TR>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
<TD>
<BR>
</TD>
</TR>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
<TD>
</TD>
</TR>
</TABLE>
|
En este caso habríamos obtenido el resultado de la figura 7.5.
Figura 7.5. Tabla con celdas vacías. Poniendo <BR> o las celdas que antes no existían ahora si son dibujadas, pero sin nada dentro.
Como vemos, <BR> y consiguen el mismo resultado.
1.2. Insertar un título para la tabla
El siguiente elemento importante a destacar en las tablas y del que todavía no hemos hablado es el título. Este será un texto que acompaña a la tabla podrá estar situado encima o debajo de ella. Para insertarlo haremos uso de una nueva etiqueta: CAPTION (que se puede traducir al español como título), que deberá ser usada entre las instrucciones <TABLE> y </TABLE >, de la siguiente manera:
<TABLE>
<CAPTION>
Titulo de la tabla
</CAPTION>
... Código de la tabla ...
</TABLE>
|
El texto que servirá de título será insertado entre las instrucciones de inicio y fin. Este texto podrá ser formateado por otras etiquetas siempre y cuando sean de nivel de texto, esto es, que su inclusión no provoque un salto de línea. Esto, desgraciadamente, excluye a los encabezados (H1 ,H2, etc.), pero no a las etiquetas de nivel de texto o a FONT.
Los títulos de la tabla serán mostrados por defecto en la parte superior de esta, pero la etiqueta CAPTION permite el uso de un atributo (cuyo nombre nos resultará familiar), ALIGN , que nos permitirá elegir que dichos títulos sean mostrados como pie de la tabla. El atributo ALIGN, puede tomar dos valores top y bottom. El primero de ellos, top, significa en inglés arriba o parte superior y su efecto será que el título sea mostrado encima de la tabla. Bottom, por su parte puede ser traducido como abajo o parte inferior. El uso de este atributo provocará el efecto antes comentado: el título será mostrado al pie de la tabla. El siguiente código es un ejemplo del uso este tipo de alineamiento del título:
<TABLE>
<CAPTION ALIGN="bottom">
Pie de la tabla
</CAPTION>
... Código de la tabla ...
</TABLE>
|
A continuación veremos un ejemplo completo de tabla con título. Es necesario resaltar dos aspectos de este ejemplo. El primero es que aunque usemos ALIGN="top" para el título, en realidad no es necesario, ya que este es el alineamiento que aparece por defecto. El segundo es que para resaltar el título nos hemos ayudado de las etiquetas BIG y B que ya conocemos, algo perfectamente válido dentro de la etiqueta CAPTION.
Un ejemplo de inclusión de un encabezado es el siguiente:
<TABLE>
<CAPTION ALIGN="top">
<BIG>
<B>
Tabla de ejemplo
</B>
</BIG>
</CAPTION>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TABLE>
|
Cuyo resultado podemos apreciar en la tabla izquierda de la figura 7.6.
Figura 7.6. Con la etiqueta CAPTION podemos poner un título a la tabla. Este título puede situarse encima (ALIGN="top") o debajo (ALIGN="bottom") de la tabla.
La tabla de la derecha corresponde al mismo código pero con ALIGN="bottom".
1.3. Tamaño de las tablas
Todavía queda un tema de gran importancia en la creación de tablas que debemos comentar: su tamaño. Quizá tras haber hecho algunos ejemplos el lector se habrá dado cuenta que el tamaño de las tablas no es siempre el mismo. Lo más probable es que este hecho no nos haya sorprendido, aún así es importante la manera en que los navegadores calculan el tamaño de las tablas y sus celdas no es tan sencilla y suele ser muy útil conocerla bien. Posteriormente aprenderemos a cambiar este tamaño a mano.
Cuando al leer una página el navegador encuentra una tabla calcula cual es el tamaño tanto horizontal como vertical necesario para mostrar el contenido de cada una de las celdas. En este momento hay que tener en cuenta que todas las celdas de una misma columna deben tener un mismo ancho y que todas las celdas de una misma fila deben tener la misma altura. La altura de cada fila quedará determinada por el elemento más alto (o el texto con más líneas) de todas las celdas de la fila. De manera similar se calcula el ancho de las columnas. Vistos estos conceptos probablemente se haya quedado el lector un poco confundido, esta parte es un poco complicada al principio pero se comprende rápidamente una vez hemos practicado un poco con tablas.
Llegados a este punto ya podemos afirmar que sabemos todo lo necesario para crear tablas. Ahora nos queda conocer algunos aspectos más avanzados y realizar algunos ejemplos para adquirir destreza en su uso. Pero antes, practiquemos un poco.
1.4. Ejercicio 7.1
En este ejercicio se propone la creación de tablas con elementos de diferentes tamaños en sus celdas para observar como varían sus tamaños. En el archivo extra.zip se ofrecen imágenes de diferentes tamaños como ayuda. Las tablas que se proponen realizar son:
Una tabla de 2 filas y 3 columnas. El contenido de todas las celdas será la palabra: TABLA.
Se sustituye la palabra TABLA en cada una de las celdas anteriores por un texto lo suficientemente largo para que ocupe varias líneas.
Crear dos tablas iguales a las dos anteriores pero con la imagen montana.gif en la segunda celda de la primera fila.
Combinar el texto escrito en el segundo caso, la imagen montana.gif, y la imagen spot.gif en diferentes celdas para ver el cambio de tamaño que sufren.