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
|
<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>
|
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>
|
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>
|
|
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>
|
|
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>
|
|
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.