TABLAS

Una tabla nos sirve para colocar cosas ordenadas dentro de una página. Podremos colocar dentro de ellas lo que quieramos, textos, vídeos o imágenes.
Por otra parte los bordes de estas, pueden ser visibles o invisibles para el usuario final. Para diseñar una tabla, deberemos poner la etiqueta <TABLE> < /TABLE>, por defecto la tabla no pone bordes, pero si queremos que estos se vean deberemos agregarles la etiquete border de la siguiente manera <table border="1"> < /table>. Note que border="1", el borde es visible y border="0" es invisible. Dentro de la tabla, tenemos filas y celdas, que deberán de colocarse al diseñar una tabla, las filas se representan con <tr> </tr>, las celdas con <td> </td>, y las celdas de cabecera con <th></th> (son las celdas resaltadas).
Un ejemplo simple, si por ejemplo queremos poner tres números (1,2,3), en una misma línea y debajo de esta otros tres números (4,5,6); en este caso deberemos hacer lo siguiente:

<table border="0" >
<th>Estos son los números</th>
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table>

El resultado será:

Estos son los números
1 2 3
4 5 6

Sí esta misma tabla la queremos ahora con borde y centrado.

<center><table border="1">
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

Sí esta misma tabla la queremos ahora con borde mas grueso y centrado.

<center><table border="12">
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

Ahora vamos a suponer que las celdas cinco y seis no las queremos, para ello aremos:

<center><table border="1">
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
</tr>
</table></center>

1
2
3
4
Supongamos, que queremos que las celdas tengan un encabezado que abarque el largo total de todas las celdas, o que bien tenga una aclaración en uno de los costados.
La manera de proceder es con las etiquetas colspan="xx", para el encabezado o columnas y rowspan="xx", para las filas, donde en ambos casos xx, es el número total de filas o columnas.

<center><table border="1">
<tr><td colspan="3">
Abarca 3 columnas
</td></tr>
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
</tr>
</table></center>

Abarca las 3 columnas
1
2
3
4
5
6

<center><table border="1">
<tr><td rowspan="3">
Abarca 3 Filas
</td></tr>
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
</tr>
</table></center>

Abarca las 3 Filas
1
2
3
4
5
6

Para darle mas separación a las celdas usamos la etiqueta cellspacing="xx", que va inmediatamente después de table o de border, si lo hubiera.
Por defecto, el explorador, pone la separación de celdas en dos píxel, pero podemos cambiarlo por lo que quieramos nosotros.

<center><table border="1" cellspacing="15">
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

Pero si lo que deseamos es separar el borde del contenido, el comando que se utilizara en este caso es cellpadding="xx", recuerde que xx hay que sustituirlo por el valor que quieramos nosotros. En mi ejemplo será:

<center><table border="1" cellpadding="15">
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

También podremos combinar, en una sola tabla, cellspacing y cellpadding, esto dará como resultado:

<center><table border="1" cellspacing="15" cellpadding="15">
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

Si utilizamos la etiqueta <caption> </caption>, podremos ponerle un titulo a la tabla, en este caso no aparecerán los bordes de la misma.

<center><table border="1">
<caption>
Este será el título de la tabla
</caption>
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table></center>

Este será el título de tabla
1
2
3
4
5
6

Podremos combinar las tablas con el alineado de las páginas, podemos alinear al centrado(center), a la derecha(right), a la izquierda(left) o justificado(justify). La etiqueta para esto es align y va en combinación con td, tr o table.

También podemos alinear las cosas en una tabla, arriba(top), abajo(bottom) o en el medio(middle). La etiqueta en este caso es valign, y también va combinada con td, tr o table

También podremos darle mas ancho y alto a las celdas, con width="xx" (ancho) y height="xx" (alto). En este caso xx, puede estar en pixel, valor numérico, o en porcentaje. En nuestra prueba lo aremos porcentualmente, ya que este es porcentualmente con respecto a la resolución de su sistema.

Un ejemplo con TD

<center><table border="1" width="15%" height="10%">
<tr>
<td align="left"> 11 </td>
<td align="center"> 12</td>
<td align="right"> 13</td>
</tr><tr>
<td valign="middle"> 14</td>
<td valign="top"> 15</td>
<td valign="bottom"> 16</td>
</tr>
</table></center>

11
12
13
14
15
16

Un ejemplo con TR

<center><table border="1" width="15%" height="10%">
<tr align="right">
<td> 11 </td>
<td> 12</td>
<td > 13</td>
</tr>
<tr valign="top">
<td>14</td>
<td> 15</td>
<td> 16</td>
</tr>
</table></center>

11 12 13
14 15 16

 

Por ultimo, diremos que para colocar una imagen dentro de una tabla, podremos utilizar cualquiera de estas técnicas anteriormente detalladas.
La única cosa que deberemos de realizar es cambiar el texto por una imagen.
También podremos cambiarle las dimensiones de los bordes, para ello deberemos de utilizar hspace="xx", este dimensiona el espacio en píxel a la derecha e izquierda de la pantalla y vspace="xx", a la arriba y abajo.

<table borde="1">
<tr><td>
<img src="uruguay.gif" hspace="5" vspace="5">
</td></tr>

Bandera de Uruguay (6Kb)

Dando color a las Tablas
Si lo deseamos podemos darle color a toda la tabla, de la siguiente manera:

<table borde="1" bgcolor="#000099">
<tr><td>
<img src="uruguay.gif" hspace="5" vspace="5">
</td></tr>

Bandera de Uruguay (6Kb)

Note que el color se le da por la etiqueta <table bgcolor="xxxxxx">

También podemos darle color a la sección de la tabla que quieramos.

<center><table border="1" width="15%" height="10%">
<tr>
<td bgcolor="#000099"> 1 </td>
<td> 2</td>
<td bgcolor="#FF0000"> 3</td>
</tr><tr>
<td bgcolor="#FF0000"> 4</td>
<td> 5</td>
<td bgcolor="#000099"> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

O esta otra:

<center><table border="1">
<tr><td rowspan="3">
Abarca 3 Filas
</td></tr>
<tr>
<td bgcolor="#ff9999"> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
</tr>
</table></center>

Abarca las 3 Filas
1
2
3
4
5
6

En ambos casos el color de la tabla no es introducido por <table>, si no que se lo introduce en la etiqueta <td bgcolor="xxxxxx">

Se puede cambiar el alto con HEIGHT y ancho con WIDTH , y además darle color al borde con BORDERCOLOR="#xxxxxx", para ello vea el siguiente ejemplo.

<center>
<table border="12" border color="#0000CC" width="96" height="84">
<tr>
<td> 1 </td>
<td> 2</td>
<td> 3</td>
</tr><tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

<table borde="1" bordercolor="#CC0000" width="107" height="98">
<tr><td>
<img src="uruguay.gif" hspace="5" vspace="5">
</td></tr>

Bandera de Uruguay (6Kb)

También podemos ponerle un marco con dos colores, para ello utilizaremos
bordercolor="#XXXXXX" bordercolorlight="#XXXXXX" bordercolordark="#XXXXXX",
en el ejemplo de a continuación inserté los siguientes parámetros

<table border="1" align="center" width="108" height="98" bordercolor="#00CCFF" bordercolorlight="#3399FF" bordercolordark="#aa0000">
<tr>
<td width="98">
<div align="center">
<img alt="Bandera de Uruguay (6Kb)" src="uruguay.gif" hspace="5" vspace="5" width="75" height="58">
</div>
</td>
</tr>
</table>

Bandera de Uruguay (6Kb)
(¿nota el borde rojo y azul?)

Con todo lo anterior junto, es decir dándole color al borde por separado y al fondo, quedaría de la siguiente manera.

<center>
<table border="12" bordercolor="#0000CC" width="186" height="147">
<tr>
<td bordercolor="#CC0000" bgcolor="#FFCCCC"> 1 </td>
<td> 2</td>
<td bordercolor="#CCCC00" bgcolor="#FFFFCC"> 3</td>
</tr><tr>
<td bordercolor="#CC00CC" bgcolor="#FFCCFF"> 4</td>
<td> 5</td>
<td bordercolor="#006600" bgcolor="#99FF99"> 6</td>
</tr>
</table></center>

1
2
3
4
5
6

Note que los que no llevan etiquetas, quedan transparentes.

Esto es todo, si lo desea pase a la otra sección.

Sin autorización, se prohíbe la reproducción parcial o total del manual.