Tablas

Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc…) en diferentes filas y columnas separadas entre si. Es una herramienta muy útil para "ordenar" contenidos de distintas partes de nuestra página.
La tabla se define mediante la etiqueta <table></table>. Los parámetros opcionales de esta etiqueta son :

border="num". Indica el ancho del borde de la tabla en puntos.

cellspacing="num" Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.

cellpadding="num" Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.

width="num" ó % Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.

height="num" ó % Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
bgcolor="codigo de color" Especifica el color de fondo de toda la Tabla.

Para definir las celdas que componen la tabla se utilizan las etiquetas <td> y <th> . <td> indica una celda normal, y <th> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas etiquetas son:
align="left / center / right / justify" Indica como se debe alinear el contenido de la celda, a la izquierda (left), a la derecha (right), centrado (center) o justificado (justify).

valign="top / middle / bottom" Indica la alineación vertical del contenido de la celda, en la parte superior (top), en la inferior (bottom), o en el centro (middle).

rowspan="num" Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan="num" Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

width="num" ó % Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parámetro solo funciona en los navegadores modernos.
bgcolor="codigo de color" Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una fila de celdas se utiliza la etiqueta <tr> . A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hiperenlace, una Lista, etc…

Ejemplo
<table border="4" cellspacing="4" cellpadding="4" width="80%">
<tr>
<th align="center"> Buscadores</th>
<th align="center" colspan="2"> Otros Links</th>
</tr>
<tr>
<td align="left">Yahoo</td>
<td align="left">Microsoft</td>
<td align="left">IBM</td>
</tr>
<tr>
<td align="left">Infoseek</td>
<td align="left">Apple</td>
<td align="left">Digital</td>
</tr>
</table>

Se vería como:

Buscadores Otros Links
Yahoo Microsoft IBM
Infoseek Apple Digital

Las etiquetas <td> y <th> son cerradas según el estandar de HTML, es decir que un elemento de tabla <td> deberia cerrarse con un </td> , sin embargo los navegadores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente.

Practicar con esta lección

Capítulo anterior:
Enlaces

Capítulo siguiente:
Mapas

One Comment

  1. Bosi

    Primero necesitas denifir de cuantas celdas es tu tabla, por ejemplo, de 6 4 (WxH) celdas, etc.Luego denifir si quieres que tu tabla sea de ancho proporcional o fijo, es decir, si ocupare1s el 100% del ancho, sin importar cual sea o en caso contrario denifire1s tu mismo el ancho.Para el primer caso podre1s calcular el ancho de la ventana visible de este modo: anchoTotal = document.body.clientWidth;Para el segundo caso ya sabre1s el tamaf1o del ancho en pixeles.Luego de eso divides el ancho total, en la cantidad de celdas de ancho. anchoCelda=anchoTotal / WCada celda debere1 tener una relacif3n de aspecto ej: 4:3 (o 16:9, etc. )Entonces todas las ime1genes debere1n caber en el ancho que calculamos anteriormente y el alto que permite la relacif3n de aspecto. Dicho en castellano, si la pantalla es de 1280 de ancho, tienes una tabla de 6 4, y una relacif3n de aspecto de 4:3, cada celda mide anchoCelda=anchoTotal / W = 1440 / 6 = 240 pixeles.Luego el alto de cada celda sereda => altoCelda = anchoCelda / (4/3) = 240/(4/3) = (240/4)*3 = 180 pixeles.Cada celda sereda de 240 180 pixeles.Ahora ya tienes la medida en que tiene que caber las ime1genes (anchoCelda x altoCelda).Finalmente hacemos los calculos para cada imagen, conforme su tamaf1o real. anchoImagen = (ancho real de tu imagen); // por ejemplo 800 altoImagen = (alto real de tu imagen); // por ejemplo 500 propx = anchoCelda / anchoImagen; // proporcion x => 240/800 = 0,3 propy = altoCelda / altoImagen; // proporcion y (alto) => 180/500 = 0,36 if (propy propx entonces factor = 0,3 } anchoEscalado = redondeo(anchoImagen * factor); // => redondeo (800 * 0,3) = 240 altoEscalado = redondeo(altoImagen * factor); // => redondeo (500*0,3) = 150FINALMENTE la imagen debe escalarse a 240 150 (para que quepa en anchoCelda x altoCelda).De lo contrario hubiera quedado de 288 180 y ahi si que no cabe.Cualquier duda, me puedes escribir un mensaje personal. Saludos.

Leave A Comment?