Tablas, tablas, tablas..... aburridoooo!!!!!!!

Hola!!!!! En realidad me tome mi tiempo para retomar el blog, pero mas vale tarde que nunca...

Hoy arranco con las tablas.... lindo tema.... aburrido diría, pero las tablas se usan, así que voy a hablar de ellas.

Vieron que en otras entradas dije: hay veces que es necesario el lapiz y el papel antes de entrar a hacer el html??? Esta es una muy buena oportunidad de hacerlo, porque necesitan de antemano saber cuantas celdas precisan

El contenido de las tablas se guardan entre <table> y </table>

Para los que saben que es una tabla pero no sepan cuales son sus partes, una pequeña definición:

* celda : cuadradito donde va la información.
* columna: celdas que están de forma vertical (como si fueran las columnas del edificio)
* fila: las celdas que están de forma horizontal (como si contaran hileras de ladrillos)

Partes de una tabla

Las tablas tienen 3 partes:

* Head: es el titulo de las columnas.
* Body: es el cuerpo de la tabla, es lo que lleva debajo de los títulos.
* Foot: es el pie de la tabla.

Esto es simple semántica... se acuerdan que les decía que era mejor poner los textos entre <p> y no hacer saltos de linea con <br>? bueno, esto es lo mismo. No les va a hacer diferencia en nada si les ponen head o body en la página, no se los va a poner negrita si los ponen en el head. Les aviso porque seguramente si hacen una tabla van a pensar que es asi cuando no lo es.

Como dije que era aburrido, las tablas se definen celda a celda comenzando desde la celda superior izquierda. Las columnas se calculan automáticamente según las celdas que hay en cada fila.

Cada fila de nuestra tabla se indican por los tags <tr> y </tr>

Dentro de nuestra fila se indican las celdas con <td> y <th>. La diferencia de estas dos es que <th> se usan para los head (casi siempre) porque pone el texto en negrita. Y mi "casi siempre" es porque si nosotros queremos que la primer fila y la primer columna sean en negrita, para mostrar una tabla de distancias, se pone con th. La primer fila va seguro en el <thead> pero la primer columna forma parte del <tbody> y se puede poner <th> para resaltarla. Ya lo van a ver en el ejemplo que pongo mas abajo.

Titulo de la tabla

Hay dos formas de poner el titulo de la tabla. La mas "facil" es poner antes de la tabla un <p> con el titulo, pero otra vez, semántica no debería ponerse así.

La forma correcta es que luego de abrir el tag <table> se ponga un titulo mediante la tag <caption> que se cierrra con </caption> y es el titulo de esa tabla.

Esta tag puede llevar atributos como por ejemplo: "align". Si ponemos <caption align="top"> Titulo de la tabla</caption> lo que va a hacer es que nuestro titulo va encima de la tabla si ponemos entre comillas "bottom" lo que hace es que nuestro titulo vaya abajo de la tabla. No prueben con "center" porque esto es donde va el titulo, si arriba o abajo de la tabla.

Alineación dentro de las celdas

Los datos dentro de las celdas se alinean de dos maneras:

* De forma horizontal: con el atributo "align" de tres maneras: derecha (right), izquierda (left) y centro (center), por ejemplo <td align="center"> texto </td> y ese texto en esa celda me va a quedar centrado horizontalmente en la celda. Recuerden que son atributos de la tag, por eso se cierra la tag, pero el atributo no tiene un cierre.

* De forma vertical: se pone el atributo "valign" y puede ser arriba (top), medio (middle) o abajo (bottom). Un ejemplo puede ser <td valign="top"> texto </td> y ese texto me va a quedar a la derecha horizontalmente pero arriba verticalmente.

Celdas extendidas

Las celdas extendidas es cuando quiero que en una columna, los datos de una de las celdas abarquen dos filas o que los datos de una fila abarquen dos columnas.

Ejemplo: quiero que una celda de la columna sea nombre completo y que contenga dos columnas abajo que sean: nombre y apellido.

En este caso se aplica el atributo "colspan", porque quiero que "nombre completo" abarque 2 columnas. Se pone <th colspan="2">nombre completo</th>. Esto esta en el ejemplo, así que no se preocupen si no lo entienden como lo estoy poniendo en el texto. Basicamente se delimita con un numero dentro de las comillas a la cantidad de columnas que quiero que abarque esa celda, como son dos columnas, van a ser 2.

Se define que nombre completo es una celda que abarca dos columnas, luego tienen que seguir con la tabla como venian haciendolo

Si el ejemplo seria que quiero que una fila contenga dos filas se pone el atributo rowspan, de la misma manera que colspan.

Y como me acuerdo que es fila o que es columna??? Sencillo... col es columna, row es fila, le agregan el span (con n) y tienen el atributo.

Al principio creanme es un rompe cocos como hacer que la tabla haga lo que tenemos en la cabeza, ya van a ver mi ejemplo y estuve un rato en hacerlo para que me respetara esto del colspan y rowspan, pero con practica y tratando de hacer sus propias tablas lo van a lograr.

Aspecto de la tabla

Se puede modificar el ancho de los bordes, espaciado entre celdas y el ancho de las celdas. Si a esto le agregamos lo que vimos mas arriba con respecto a la alineación dentro de las celdas en horizontal y vertical, van a tener un lindo conjunto de posibilidades. Todos los atributos que voy a explicar son dentro del tag <table> y se pueden usar todos juntos (lo van a ver en mi ejemplo mas abajo).

1) Ancho de la tabla:

Se determina con el atributo "width". Se especifica el ancho de la tabla en la pagina que estamos creando ya sea en numero de pixeles o porcentaje respecto del explorador.

Ejemplo: <table width="50%"> quiere decir que estoy diciendo que la tabla va a tener el ancho del 50% de lo que la contiene. En mi ejemplo puse la tabla dentro del body, el body es el 100 % asi que mi tabla es la mitad del body. Si le dijeramos al html que el body es su 50%, entonces mi tabla seria un 25% del html. Es un poco confuso, pero traten de hacerse la idea de una caja dentro de una caja dentro de otra caja..... Tengo una caja grande (html), luego otra adentro que es la mitad de esa caja (body) y otra cajita (mi tabla) que es la mitad de esa caja intermedia.

La otra posibilidad es ponerlo en pixeles mediante px. Ejemplo: <table width="50">.

El pixel es la medida de las resoluciones, no son centímetros ni nada por el estilo. Cuando definimos el ancho por los pixeles quiere decir que no importa la resolucion del monitor o cel donde estas mirando la pagina, la tabla va a tener ese ancho si o si.

Les copio una respuesta de Yahoo answers para que vean como es el tema de equivalencias con centímetros  pulgadas y pixeles:

No existe una única relación entre los pixeles y los centímetros. Es más, la relación entre ambas (ó entre los pixeles y las pulgadas comunmente abreviado como "dpi") define lo que se llama "Resolución" de la imagen.

Concretamente, si la resolución de tu imagen es de 72 dpi (72 pixeles por pulgada) y la imagen ocupa 1600 pixeles, por una simple regla de 3 llegas a que:
(1600 px) / (72 dpi) = 22,22 pulgadas = 56,44 cm
(1200 px) / (72 dpi) = 16,67 pulgadas = 42,33 cm

Pero si la resolución de tu imagen es de 108 dpi (108 pixeles por pulgada), entonces:
(1600 px) / (108 dpi) = 14,81 pulgadas = 37,63 cm
(1200 px) / (108 dpi) = 11,11 pulgadas = 28,22 cm

Como verás, las cuatro cuentas anteriores te muestran que el tamaño de la imagen variará en función de la resolución de tu imagen aún cuando tengan la misma cantidad de pixeles.

Por lo dicho, si deseas que los 1600 pixeles ocupen 2,5 cm, la resolución de tu imagen debe ser:
2,5 cm = (2,5 cm) / (2,54 cm/pulg) = 0,984 pulg

Resolución = (1600 pixeles) / (0,984 pulg) = 1626 dpi

Entonces: cual es la diferencia en usar % o px? Simple: con % se autoajusta al porcentaje que tiene la ventana, no importa si es un monitor chico o grande con mas o menos pixeles. Con el tema de los pixeles, le decimos que tenga esa medida, no importando donde se ve...... Dependiendo de la necesidad se usa uno u otro, pero lo mas común que se usa es pixeles (aunque no lo puedan creer).

También se pueden usar en <th> y <td> para especificar el ancho de las columnas.

2) Bordes: 

Se usa el atributo "border". Da un valor al ancho del borde en pixeles. Se usa <table border="1">, lo que le da 1 px de borde a la tabla. Si se pone <table border="0"> quiere decir que no va a tener bordes.

3) Separación entre celdas

Se usa el atributo "cellspacing". Indica el numero de pixeles que acompañan cada celda. El valor predeterminado es de 2 px. Se usa: <table cellspacing="4"> que quiere decir que el espacio entre celdas es de 4 px.

4) Separación entre el borde y el contenido de la celda

Se usa el atributo "cellpadding". Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1. Se usa: <table cellspadding="4"> que quiere decir que el espacio entre el borde de las celdas y el contenido de la celda es de 4 px.

Y eso es basicamente tablas. Les dejo un ejemplo para que lo copien en un procesador de textos, lo guarden con la extension html y eso les va a dar una idea de como queda la tabla y como queda el código. Para que se entienda mejor el contenido de cada una, yo les recomiendo que modifiquen las diferentes cosas, para experimentar o que hagan una de cero.


<html>
<head>

<title>ejercicio tablas</title>

</head>

<body>

<table width="550" border="15" cellspacing="2" cellpadding="10">

<caption align="top">Tablas y mas tablas</caption>

<thead>
<tr>

<th rowspan="2">head</th>
<th colspan="2"> nombre completo</td>
<th rowspan="2">direccion</td>
<th rowspan="2">telefono</th>
</tr>

<tr>
<th>nombre</th>
<th>apellido</th>
</tr>

<tbody>

<tr>

<th>body</th>
<td>ejemplo 2</td>
<td>ejemplo 3</td>
<td> ejemplo 4</td>
<td>ejemplo 5</td>

</tr>
  </tbody>

<tfoot>
<tr>
<th>foot</th>
<td>dato 2</td>
<td>dato 3</td>
<td>dato 4</td>
<td>dato 5</td>
</tr>
</tfoot>


</table>

</body>

</html>

Espero comentarios, o dudas o lo que quieran decirme =D

En la próxima vamos con las imágenes!!!!!!!!!!