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.
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á:
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.
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.
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.
Como vemos, <BR> y consiguen el mismo resultado.
