Menú

Enlaces

Visitas

3.7. Tablas (Table)

Dentro de estas dos etiquetas <table></table> colocaremos todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla. Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr>. Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido. Entre las etiquetas <th> y </th> sirve para crear una celda cuyo contenido esté formateado como un título o cabecera de la tabla.

Está delimitado por las etiquetas:
<table></table>
Ejemplo:
<table border="1" bordercolor="black">
<tr><th>Título 1</th><th>Título 2</th></tr>
<tr><td>Línea 1, Celda 1</td><td>Línea 1, Celda 2</td></tr>
<tr><td>Línea 2, Celda 1</td><td>Línea 2, Celda 2</td></tr>
</table>
Resultado:
Título 1Título 2
Línea 1, Celda 1Línea 1, Celda 2
Línea 2, Celda 1Línea 2, Celda 2

3.7.1. Atributos para tablas

Va dentro de la etiqueta:
<table>

3.7.1.1. align

Alinea horizontalmente la tabla con respecto a su entorno.
Ejemplo:
<table width="100%" align="right" border="1" bordercolor="black"><tr><td>
<table align="left" border="1" bordercolor="black">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
</td></tr><tr><td>
<table align="center" border="1" bordercolor="black">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
</td></tr><tr><td>
<table align="right" border="1" bordercolor="black">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
</td></tr></table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.1.2. background

Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
Ejemplo:
<table background="image/cervantes.png" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table background="image/cervantes.png" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
<tr><td>L-3, C-1</td><td>L-3, C-2</td></tr>
<tr><td>L-4, C-1</td><td>L-4, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-3, C-1L-3, C-2
L-4, C-1L-4, C-2

3.7.1.3. bgcolor

Da color de fondo a la tabla.
Ejemplo:
<table bgcolor="blue" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table bgcolor="#009966" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.1.4. border

Define el número de píxeles del borde principal.
Ejemplo:
<table border="3" bordercolor="black">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table border="5" bordercolor="black">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table border="8">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.1.5. bordercolor

Define el color del borde.
Ejemplo:
<table bordercolor="blue" border="0">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table bordercolor="blue" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table bordercolor="red" border="2">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.1.6. cellpadding

Define, en píxeles, el espacio entre los bordes de la celda y el contenido de la misma.

Ejemplo:
<table cellpadding="5" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table cellpadding="10" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.1.7. cellspacing

Define, en píxeles, el espacio entre los bordes de la celda.

Ejemplo:
<table cellspacing="5" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table cellspacing="10" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.1.8. height

Define la altura de la tabla en píxeles o porcentaje.
Ejemplo:
<table height="100" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table height="80%" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.1.9. width

Define la anchura de la tabla en píxeles o porcentaje.
Ejemplo:
<table width="200" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
<table width="40%" border="1">
<tr><td>L-1, C-1</td><td>L-1, C-2</td></tr>
<tr><td>L-2, C-1</td><td>L-2, C-2</td></tr>
</table>
Resultado:
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2
L-1, C-1L-1, C-2
L-2, C-1L-2, C-2

3.7.2. Atributos para filas y celdas

3.7.2.1 Atributos que permiten modificar una celda en concreto o toda una línea

Va dentro de las etiquetas:
<tr>
<th>
<td>

3.7.2.1.1. align

Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
Ejemplo:
<table border="1" width="100%" bordercolor="black">
<tr><td colspan="3">tr align="left"</td></tr>
<tr align="left">
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="3">tr align="center"</td>
</tr>
<tr align="center">
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="3">tr align="right"</td>
</tr>
<tr align="right">
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>td align="left"</td>
<td>td align="center"</td>
<td>td align="right"</td>
</tr>
<tr>
<td align="left">1</td>
<td align="center">2</td>
<td align="right">3</td>
</tr>
</table>
Resultado:
tr align="left"
1 2 3
tr align="center"
1 2 3
tr align="right"
1 2 3
td align="left" td align="center" td align="right"
1 2 3

3.7.2.1.2. valign

Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.
Ejemplo:
<table border="1" width="100%" bordercolor="black">
<tr>
<td>Línea</td>
<td colspan="3">tr valign="top"</td>
</tr>
<tr valign="top">
<td>1<br>2<br>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Línea</td>
<td colspan="3">tr valign="middle"</td>
</tr>
<tr valign="middle">
<td>1<br>2<br>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Línea</td>
<td colspan="3">tr valign="bottom"</td>
</tr>
<tr valign="bottom">
<td>1<br>2<br>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Línea</td>
<td>td valign="top"</td>
<td>td valign="middle"</td>
<td>td valign="bottom"</td>
</tr>
<tr>
<td>1<br>2<br>3</td>
<td valign="top">1</td>
<td valign="middle">2</td>
<td valign="bottom">3</td>
</tr>
</table>
Resultado:
Línea tr valign="top"
1
2
3		 1 2 3
Línea tr valign="middle"
1
2
3		 1 2 3
Línea tr valign="bottom"
1
2
3		 1 2 3
Línea td valign="top" td valign="middle" td valign="bottom"
1
2
3		 1 2 3

3.7.2.1.3. bgcolor

Da color a la celda o línea elegida.
Ejemplo:
<table border="1" width="100%">
<tr>
<td colspan="3">tr bgcolor="blue"</td>
</tr>
<tr bgcolor="blue">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>td bgcolor="red"</td>
<td>td bgcolor="yellow"</td>
<td>td bgcolor="green"</td>
</tr>
<tr>
<td bgcolor="red">1</td>
<td bgcolor="yellow">2</td>
<td bgcolor="green">3</td>
</tr>
</table>
Resultado:
tr bgcolor="blue"
1 2 3
td bgcolor="red" td bgcolor="yellow" td bgcolor="green"
1 2 3

3.7.2.1.4. bordercolor

Define el color del borde a la celda o línea elegida.
Ejemplo:
<table border="1" width="100%">
<tr>
<td colspan="3">tr bordercolor="blue"</td>
</tr>
<tr bordercolor="blue">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>td bordercolor="red"</td>
<td>td bordercolor="yellow"</td>
<td>td bordercolor="green"</td>
</tr>
<tr>
<td bordercolor="red">1</td>
<td bordercolor="yellow">2</td>
<td bordercolor="green">3</td>
</tr>
</table>
Resultado:
tr bordercolor="blue"
1 2 3
td bordercolor="red" td bordercolor="yellow" td bordercolor="green"
1 2 3

3.7.2.2 Atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea

Va dentro de las etiquetas:
<th>
<td>

3.7.2.2.1. background

Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
Ejemplo:
<table width="100%" border="1">
<tr>
<td background="image/cervantes.png">En un lugar de la Mancha, ...</td>
</tr>
</table>

<table width="100%" border="1">
<tr>
<td height="64" width="64" background="image/cervantes.png"></td>
</tr>
</table>
Resultado:
En un lugar de la Mancha, ...


3.7.2.2.2. height

Define la altura de la celda en píxeles o porcentaje. El atributo height no funciona en todos los navegadores, además, su uso no está muy extendido.
Ejemplo:
<table width="100%" border="1">
<tr><td height="30">1</td></tr>
</table>

<table width="100%" border="1">
<tr><td height="60">2</td></tr>
</table>
Resultado:
1
2

3.7.2.2.3. width

Define la anchura de la celda en píxeles o porcentaje. Si definimos una celda de un ancho 100 píxeles por ejemplo, y colocamos en la celda un contenido como una imagen que mida más de 100 píxeles, la celda crecerá en horizontal todo lo necesario para que la imagen quepa. Si el elemento, aunque más ancho, fuera divisible (como un texto) el ancho sería respetado y el texto crecería hacia abajo.
Ejemplo:
<table height="50" border="1">
<tr><td width="60">1</td></tr>
</table>

<table height="50"border="1">
<tr><td width="120">2</td></tr>
</table>

<table height="50" border="1">
<tr><td width="100%">3</td></tr>
</table>

<table width="100%" border="1">
<tr><td width="70%">4</td></td> width="30%">5</td></tr>
</table>
Resultado:
1
2
3
45

3.7.2.2.4. colspan

Expande una celda horizontalmente.
Ejemplo:
<table width="100%" border="1">
<tr><td colspan="2">1 y 2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td colspan="2">6 y 7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td colspan="2">11 y 12</td></tr>
</table>
Resultado:
1 y 2 3 4
5 6 y 7 8
9 10 11 y 12

3.7.2.2.5. rowspan

Expande una celda verticalmente.
Ejemplo:
<table width="100%" border="1">
<tr>
<td rowspan="2">1<br>5</td>
<td width="25%">2</td>
<td width="25%">3</td>
<td width="25%">4</td>
</tr>
<tr>
<td rowspan="2">6<br>10</td>
<td width="25%">7</td>
<td rowspan="2">8<br>12</td>
</tr>
<tr>
<td width="25%">9</td>
<td rowspan="2">11<br>15</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>16</td>
</tr>
</table>
Resultado:
1
5		 2 3 4
6
10		 7 8
12
9 11
15
13 14 16


« 3.6. Imágenes
3.8. Formularios »
♼