TABLAS - I
Es innegable la utilidad de las tablas. Antes de que existieran las hojas de estilo usábamos tablas para situar elementos donde queríamos dentro de una hoja. Y todavía se usan.
Las etiquetas son <TABLE> y </TABLE> para definir la tabla en general; <TR> (table row) con su cierre para las filas y <TD> (table data) con su cierre también para las celdas.
Un atributo que sirve para describir lo que hay en la tabla y que no va a aparecer es SUMMARY.
La estructura quedará:
|
<BODY>
<TABLE SUMMARY="Mi tabla es muy chula"> <TR> <TD></TD> </TR> </TABLE> </BODY> |
Si creamos una tabla como esa, con una sola celda dentro de una sola fila, y no ponemos nada dentro quedará:
|
|
Es decir, no vemos nada por dos razones: la primera es que no hemos metido nada dentro de la celda (y es necesario) y la segunda es que, de forma predeterminada, el borde de la tabla es 0 y, por tanto, no se ve. Para solucionarlo incluimos el primer atributo que nos acompañará para que se vean bordes y es BORDER, con valores numéricos.
|
<BODY>
<TABLE BORDER=1> <TR> <TD></TD> </TR> </TABLE> </BODY> |
|
|
Y ahora metemos el dato:
|
<BODY>
<TABLE BORDER=1> <TR> <TD> Enero </TD> </TR> </TABLE> </BODY> |
|
Como vemos la celda se ajusta al tamaño de la palabra, de modo que si ponemos una más larga...
|
<BODY>
<TABLE BORDER=1> <TR> <TD> Miércoles </TD> </TR> </TABLE> </BODY> |
|
Volvamos a la de "Enero" y pongamos una celda más dentro de la misma fila.
|
<BODY>
<TABLE BORDER=1> <TR> <TD> Enero </TD> <TD> Febrero </TD> </TR> </TABLE> </BODY> |
|
Y otra más:
|
<BODY>
<TABLE BORDER=1> <TR> <TD> Enero </TD> <TD> Febrero </TD> <TD> Marzo </TD> </TR> </TABLE> </BODY> |
|
Ahora pongamos otra fila que, para que quede simétrica, tendrá 3 celdas también:
|
<BODY>
<TABLE BORDER=1> <TR> <TD> Enero </TD> <TD> Febrero </TD> <TD> Marzo </TD> </TR> <TR> <TD> Abril </TD> <TD> Mayo </TD> <TD> Junio </TD> </TR> </TABLE> </BODY> |
|
Ya vamos viendo como funciona el tema. Ahora vamos a quitar "Junio" (podemos quitar sólo la palabra o toda la estructura <TD> Junio </TD>) para ver como queda con una fila de 3 celdas y otra fila, debajo, de dos.
|
<BODY>
<TABLE BORDER=1> <TR> <TD> Enero </TD> <TD> Febrero </TD> <TD> Marzo </TD> </TR> <TR> <TD> Abril </TD> <TD> Mayo </TD> <TD></TD> </TR> </TABLE> </BODY> |
|
Si mantenemos la estructura y ponemos un espacio en blanco dentro (recuerda, con el código &NBSP; en minúscula) va a cambiar un poco.
|
<BODY>
<TABLE BORDER=1> <TR> <TD> Enero </TD> <TD> Febrero </TD> <TD> Marzo </TD> </TR> <TR> <TD> Abril </TD> <TD> Mayo </TD> <TD> </TD> </TR> </TABLE> </BODY> |
|
Lógicamente podemos aumentar el borde o quitarlo.
|
|
|
|
Poner BORDER=0 sería como no poner nada. En este caso la tabla nos sirve para tabular los datos.
Más cosas. Podemos cambiar la anchura (píxeles o porcentaje) de la tabla, de la fila o de la celda (teniendo en cuenta que si cambiamos la de una fila la que hay debajo cambiará; y si es una celda, cambia la anchura de las de abajo, es decir, de la columna completa). Podemos cambiar la altura (mismos valores) de la tabla, fila o celda (teniendo en cuenta que si cambiamos la de una celda, cambiará la de la fila completa, por lo mismo, y se verá igual). Lo vemos:
Anchura de la tabla:
|
<BODY>
<TABLE BORDER=1 WIDTH=65%> <TR> <TD> Enero </TD> <TD> Febrero </TD> <TD> Marzo </TD> </TR> <TR> <TD> Abril </TD> <TD> Mayo </TD> <TD> Junio </TD> </TR> </TABLE> </BODY> |
|
|
<BODY>
<TABLE BORDER=1 > <TR WIDTH=65%> <TD> Enero </TD> <TD> Febrero </TD> <TD> Marzo </TD> </TR> <TR> <TD> Abril </TD> <TD> Mayo </TD> <TD> Junio </TD> </TR> </TABLE> </BODY> |
|
|
<BODY>
<TABLE BORDER=1 > <TR > <TD> Enero </TD> <TD WIDTH=65%> Febrero </TD> <TD> Marzo </TD> </TR> <TR> <TD> Abril </TD> <TD> Mayo </TD> <TD> Junio </TD> </TR> </TABLE> </BODY> |
|
Podemos hace que una frase (o lo que sea) no se divida y quede sin partir dentro de la celda con el atributo de <TD> llamado NOWRAP. En este caso no importará la anchura que le pongamos a la tabla porque no le hará caso.
|
<BODY>
<TABLE BORDER=1 WIDTH=20> <TR> <TD NOWRAP> Podemos hace que una frase (o lo que sea) no se divida...</TD> </TR> </TABLE> </BODY> |
|
Sin NOWRAP y que esa anchura quedaría:
|
|
|
|
|
|
|
Que queda igual que la de la fila por lo que ya expliqué.
Podemos colocar anchuras en las 3 columnas, en píxeles o porcentajes, poniéndolo en 3 celdas de cualquier fila, ya que las que están por debajo (o por encima) tomarán dicha anchura. Lo mismo para la altura.
|
|
Hemos acabado el capítulo, con las siguientes flechas podrás moverte entre los otros capítulos del capítulo TABLAS.
