 |
13.- Como hacer tablas
Las tablas son un componente muy útil que ayuda a organizar y presentar los elementos de nuestra página web.
Para crear una tabla, utilizaremos la etiqueta <table></table>. A continuación, y dentro de esta etiqueta, por cada fila que queramos que forme nuestra tabla deberemos añadir la etiqueta <tr><tr/>. Seguidamente, y dentro de la etiqueta <tr>, por cada columna que queremos que aparezca, debemos utilizar la etiqueta <td></td>. A continuación mostramos algunos ejemplos para aclarar la cuestión:
Ejemplos:
| Código en el editor de textos |
En el navegador se verá: |
<table>
<tr>
<td>fila 1-a</td>
</tr>
</table> |
|
<table>
<tr>
<td>fila 1-a</td>
<td>fila 1-b</td>
</tr>
</table> |
|
<table>
<tr>
<td>fila 1-a</td>
<td>fila 1-b</td>
</tr>
<tr>
<td>fila 2- a </td>
<td>fila 2- b </td>
</tr>
</table> |
| fila 1-a |
fila 1-b |
| fila 2- a |
fila 2- b |
|
Los parámetros de la etiqueta <table></table> son:
- width = Indica la anchura de la tabla en puntos o en porcentaje.
- height = Indica la altura de la tabla en puntos o en porcentaje.
Sin estos parámetros, el ancho y el alto de la tabla se adaptarán a los contenidos de las celdas.
- border = Indica el ancho del borde de la tabla. El valor 0 indica sin borde. Si queremos que la tabla tenga bordes le daremos, al menos, el valor 1. Cuanto más ancho queramos el borde, más aumentaremos el número.
- bordercolor = Define el color del borde
- cellspacing = Es el espacio en puntos que separa las celdas que estan dentro de la tabla.
| Código en el editor de textos |
En el navegador se verá: |
<table width="63%" height="88" border="2" cellspacing="4" bordercolor="#FF0000" >
<tr>
<td>123456</td>
<td>123456</td>
</tr>
<tr>
<td>123456</td>
<td>123456</td>
</tr>
</table> |
| 123456 |
123456 |
| 123456 |
123456 |
|
<table width="70%" height="60%" border="2" cellpadding="0" cellspacing="10">
<tr>
<td>123456</td>
<td>123456</td>
</tr>
<tr>
<td>123456</td>
<td>123456</td>
</tr>
</table> |
| 123456 |
123456 |
| 123456 |
123456 |
|
- cellpadding = Indica el espacio que separa los bordes de las celdas con respecto a su contenido:
| Código en el editor de textos |
En el navegador se verá: |
<table width="28%" border="2" cellpadding="4" cellspacing="0" >
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
</table> |
|
<table width="28%" border="2" cellpadding="20">
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
</table> |
|
- bgcolor = Indica el color de fondo de la tabla.
| Código en el editor de textos |
En el navegador se verá: |
<table width="75%" border="2" cellspacing="4" bordercolor="#CC3300" bgcolor="#33CCFF" >
<tr>
<td>123456</td>
<td>123456</td>
</tr>
<tr>
<td>123456</td>
<td>123456</td>
</tr>
</table> |
| 123456 |
123456 |
| 123456 |
123456 |
|
Parámetros de las etiquetas <tr> y <td>
El parámetro bgcolor también puede ir acompañando a las etiquetas <tr> y <td>. En el ejemplo siguiente se puede apreciar un color de fondo para toda la tabla (azul), otro (amarillo) definido únicamente para la primera celda, y otro (naranja) definido para toda la fila inferior.
| Código en el editor de textos |
En el navegador se verá: |
<table width="50%" border="2" cellspacing="4" bgcolor="#33CCFF" >
<tr>
<td bgcolor="#FFFFCC"></td>
<td></td>
</tr>
<tr bgcolor="#FF9966">
<td></td>
<td></td>
</tr>
</table> |
|
- align = Este parámetro se utiliza para indicar cómo se alineará el contenido de la celda. A la izquierda (left), a la derecha (right), centrado (center) o justificado (justify).
- valign = Este parámetro se utiliza para indicar cómo se alineará el contenido de la celda con respecto a la vertical. En la parte superior (top), en el centro (middle) o en la inferior (bottom).
| Código en el editor de textos |
En el navegador se verá: |
<table width="72%" height="126" border="2" cellpadding="0" cellspacing="0" >
<tr>
<td align="left">alineación izquierda </td>
<td align="center">alineación centro </td>
<td align="right">alineación derecha </td>
</tr>
<tr>
<td valign="top">alineación superior </td>
<td valign="bottom">alineación inferior </td>
<td valign="middle">alineación media </td>
</tr>
</table> |
| alineación izquierda |
alineación centro |
alineación derecha |
| alineación superior |
alineación inferior |
alineación media |
|
- colspan = Este parámetro sirve para combinar celdas en horizontal. Observa que en el siguiente ejemplo las dos primeras celdas de la primera fila se han unido en una. Esto viene indicado en la etiqueta <td colspan="2"></td>
| Código en el editor de textos |
En el navegador se verá: |
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> |
|
- rowspan = Este parámetro sirve para combinar celdas en vertical. Observa que en el siguiente ejemplo las dos primeras celdas de la primera fila se han unido en una. Esto viene indicado en la etiqueta <td rowspan="2"></td>
| Código en el editor de textos |
En el navegador se verá: |
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table> |
|
Sobre bordes y fondos de tablas y celdas consulta nuestro apartado trucos en lo referente al tema "tablas". |
|
| |
|
|
Crea tu web Tutorial HTML Trucos HTML Trucos Dreamweaver