Tablas (y III)

Contenido del Capítulo:

• Las opciones de <td>
  • Width
  • Height
  • Align
  • Valign
  • Colspan
  • Rowspan
  • Nowrap

NOTA: La etiqueta td sólo se puede colocar dentro de una tr.

[Arriba]

Las opciones de <td>

Width (establece el ancho)

Con width podemos indicar al navegador la anchura que queremos para una celda en concreto. La anchura podemos establecerla en pixels o en tantos por ciento. Un ejemplo en pixels:

<table border=1>
   <tr>
          <td width=100>Ancho = 100
          </td>
   </tr>
</table>

Y el mismo ejemplo en tanto por ciento:

<table border=1>
   <tr>
          <td width="50%">Acho = 50% del ancho de la tabla
          </td>
   </tr>
</table>

Esto del % no funciona igual en todos los navegadores y los antiguos no lo admiten. Así que si lo usamos debemos comprobar que se ve bien en varios navegadores.

Por otra parte es aconsejable poner la misma anchura para todas las celdas de una misma columna. Si ponemos distintas anchuras pueden tenerse resultados extraños, o en el mejor de los casos se adaptan todas a la de mayor anchura.

Veamos un ejemplo:

<table border=1><tr>
<td width=100>Ancho = 100
</td>
</tr>
<tr>
<td width=130>Ancho = 130
</td>
<tr>
<td width=200>Ancho = 200
</td>
</tr></table>

Y ahora comprueba cómo se ve en tu navegador:

Para comparar aquí tienes una celca de anchura=100:

En mi navegador (Netscape 4.7) todas las celdas toman el ancho de la más grande (la de 200 pixels).

Height (altura)

Con height podemos especificar la altura en pixels de una celda.

<table border=1>
   <tr>
          <td heigth=100>Alto = 100
          </td>
   </tr>
</table>

Al igual que con width no conviene poner distintas alturas para celdas de la misma fila.

Align

Con align le decimos al navegador cómo queremos colocar el contenido de la celda: a la izquierda (left, es la opción predeterminada), a la derecha (right) o centrada (center):

<table border=1 width="70%" align=center>
   <tr>
          <td align=right>Texto a la dcha
          </td>
   </tr>
</table>

Valign

Con valign controlamos la alineación vertical dentro de las celdas. Las posibles opciones son: top, middle, bottom.

Veamos en un ejemplo el comportamiento normal si tenemos en una fila una celda más alta que las otras:

Si usamos top en una celda de las que son más cortas el texto quedará arriba:

<TABLE align=center border=1 width="40%">
	<TR>
		<td>
			Esta primera celda es ...(bla,bla)
		</td>
		<td valign=top>
			Efectivamente esta línea es más corta.
		</td>
		<td>
			Esta también es más corta.
		</td>
	</TR>
</TABLE>

Con bottom se produce el efecto contrario, la celda queda alineada abajo:

Y con middle quedan centradas verticalmente.

Tanto el atributo align como valign se pueden especificar en tr en vez de en td y se aplicará a toda la fila:

<TABLE align=center border=1 width="40%">
	<TR valign=bottom>
		<TD>
			Esta primera celda es... (bla,bla)
		</TD>
		<TD>
			Ahora esta queda abajo.
		</TD>
		<TD>
			Esta también es más corta.
		</TD>
	</TR>
</TABLE>

Al poner valign=bottom en tr todas las celdas de la fila quedan alineadas abajo:

Colspan

Cuando hacemos una tabla como hemos visto hasta ahora tenemos que todas las celdas en una misma columna ocupan el mismo espacio. Pero existe una forma de hacer que una celda ocupe más de una columna: usando colspan.

Aquí tenemos una tabla normal:

<table border=1 width="60%" align=center>
    <tr align=center>
           <td>Celda 1,1
           </td>
           ...
           <td>Celda 1,4
           </td>
    </tr>
    <tr align=center>
           <td>Celda 2,1
           </td>
           ...
           <td>Celda 2,4
           </td>
    </tr>
</table>

que se muestra así:

Pero ahora supongamos que queremos que la celda 1,1 ocupe el sitio de la 1,1 y la 1,2, es decir que quede así:

Esto se consigue con el siguiente código usando colspan:

<table border=1 width="60%" align=center>
    <tr align=center>
           <td colspan=2>Celda 1,1
           </td>
           <td>Celda 1,3
           </td>
           <td>Celda 1,4
           </td>
    </tr>
    <tr align=center>
           <td>Celda 2,1
           </td>
           <td>Celda 2,2
           </td>
           <td>Celda 2,3
           </td>
           <td>Celda 2,4
           </td>
    </tr>
</table>

Fíjate que como la celda 1,1 ocupa dos columnas debemos quitar alguna, en este caso hemos quitado la 1,2. Recuerda que todas las filas deben tener el mismo número de columnas. Y las celdas que ocupan dos columnas cuentan como dos. Si no tenemos cuidado con esto podemos tener resultados extraños como éste:

Rowspan

Con rowspan podemos hacer lo mismo que con colspan pero con filas. Podemos hacer que una celda ocupe dos o más filas:

Y esto se consigue usando rowspan así:

<table border=1 width="60%" align=center>
    <tr align=center>
           <td rowspan=2>Celda 1,1
           </td>
           <td>Celda 1,2
           </td>
           <td>Celda 1,3
           </td>
           <td>Celda 1,4
           </td>
    </tr>
    <tr align=center>
           <td>Celda 2,2
           </td>
           <td>Celda 2,3
           </td>
           <td>Celda 2,4
           </td>
    </tr>
</table>

Y de nuevo tenemos que tener cuidado con el número de celdas que ponemos. En este caso debíamos eliminar la 2,1 por que si no podríamos tener algo como:

Nowrap

Cuando tenemos un texto demasiado largo éste se corta y se acomoda en varias líneas. Sin embago, si usamos el atributo nowrap el texto se mostrará todo en una línea:

La forma de usar nowrap es poner en la celda deseada:

<TD nowrap>