Productos Alimenticios

10. Tablas
Hasta que no se empezaron a usar las tablas, la única manera de tabular las cosas era utilizar la etiqueta de preformateado, con la que es necesario poner manualmente los espacios en blanco para que quede todo alineado formando filas y columnas, con un resultado muy poco estético.
Estructura de una tabla
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesariaspara confeccionar las tablas.
1. La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para estotenemos que añadir el atributo BORDER a la etiqueta, es decir:
<TABLE BORDER>
[resto de las etiquetas]
</TABLE>
2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
<TR>
[etiquetas de las distintas celdas de la segunda fila]
</TR>
3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdasqueremos que haya en esa fila.
Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD></TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>
Que resulta:
fila1-celda1 | fila1-celda2 | fila1-celda3 |
fila2-celda1 | fila2-celda2 | fila2-celda3 |
Filas con desigual número de celdas
En este ejemplo hemos puestodos filas con igual número de celdas. �Qué pasa si ese número es distinto? Pues el navegador forma el número de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas.
Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir si borramos <TD>fila2-celda3</TD>, resultará:
fila1-celda1 | fila1-celda2 | fila1-celda3 |fila2-celda1 | fila2-celda2 | |
Titular de la tabla
Se puede añadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla que indica cuál es su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>.
Si en el ejemplo anterior añadimos la siguiente línea:
<CAPTION> Ejemplo de filas desiguales </CAPTION>, resulta:
Ejemplo de filasdesiguales |
fila1-celda1 | fila1-celda2 | fila1-celda3 |
fila2-celda1 | fila2-celda2 | |
Variando el espesor de los bordes
El atributo BORDER (visto más arriba) pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:
<TABLE BORDER=número deseado>

Si en el ejemplo anterior ponemos:
<TABLE BORDER=5>Resultará:
Ejemplo de filas desiguales |
fila1-celda1 | fila1-celda2 | fila1-celda3 |
fila2-celda1 | fila2-celda2 | |
Celdas de cabecera
Además de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado.
Esto se consigue con la etiqueta <TH> y </TH>...