Manual de lenguaje html. Página 12

2002 a 2006

Ángel R. Puente Pérez

13.7.- Alineaciones dentro de las celdas.

Veamos como se pueden alinear los objetos dentro de las celdas de una tabla:

xxx	xxx	xxx
xxx	xxx	xxx

Primera fila (alineación horizontal):

En la primera celda el texto está alineado a la izquierda. No hay que hacer nada, es la alineación que se establece por defecto. (Podría escribirse, de todas formas: <td align="left">).
En la segunda celda el texto está alineado en el centro: <td align="center">.
En la tercera celda el texto está alineado a la derecha: <td align="right">.

Segunda fila (alineación vertical):

En la primera celda el texto está alineado en la parte superior: <td valign="top">.
En la segunda celda el texto está alineado en la parte central. No hay que hacer nada, es la alineación vertical establecida por defecto. (Podría escribirse, de todas formas: <td valign="middle">) .
En la tercera celda el texto está alineado en la parte inferior: <td valign="bottom">.

Para observar mejor los resultados se ha forzado la altura de las celdas a 50 píxeles. Basta escribirlo en la primera celda de cada fila: <td height="50"> pero podría escribirse en todas ellas.

<html>
<head>
<title>
Tablas 8
</title>
</head>
<body>
<table border width="60%" align="center" 
                                  bgcolor="#ffffcc">
<caption>Alineaciones de celdas</caption>
   <tr>
       <td width="33%" height="50">xxx</td>
       <td width="34%" align="center">xxx</td>
       <td width="33%" align="right">xxx</td>
   </tr>
   <tr>
       <td height="50" valign="top">xxx</td>
       <td align="center">xxx</td>
       <td align="right" valign="bottom">xxx</td>
   </tr>
</table>
</body>
</html>

resultado

13.8.- Separaciones entre celdas y entre borde y contenidos.

La separación por defecto entre las celdas es de 2 píxeles. Se puede modificar esta distancia con el atributo de table cellspacing. Tabla con cellspacing de 15 píxeles:

xxxx	xxxx	xxxx
xxxx	xxxx	xxxx

La separación entre el borde la tabla y el contenido de las celdas es de 1 píxel. Se puede modificar con el atributo cellpadding de la etiqueta table. Tabla con cellpadding de 15 píxeles:

xxxx	xxxx	xxxx
xxxx	xxxx	xxxx

En la segunda tabla se ha aumentado la altura de las celdas a 70 píxeles para observar la alineación vertical.

Veamos los códigos:

<html>
<head>
<title>
Tablas 9
</title>
</head>
<body>
<table border width="60%" align="center" 
    bgcolor="#ffffcc" cellspacing="15">
<caption>
Tabla con espacio entre celdas de 15 píxeles
</caption>
   <tr>
       <td width="33%" height="50">xxxx</td>
       <td width="34%" align="center">xxxx</td>
       <td width="33%" align="right">xxxx</td>
   </tr>
   <tr>
       <td height="50" valign="top">xxxx</td>
       <td align="center">xxxx</td>
       <td align="right" valign="bottom">xxxx</td>
   </tr>
</table>
</body>
</html>

resultado

<html>
<head>
<title>
Tablas 10
</title>
</head>
<body>
<table border width="60%" align="center" 
    bgcolor="#ffffcc" cellpadding="15">
<caption>
Tabla con "cellpadding" de 15 píxeles
</caption>
   <tr>
       <td width="33%" height="70">xxxx</td>
       <td width="34%" align="center">xxxx</td>
       <td width="33%" align="right">xxxx</td>
   </tr>
   <tr>
       <td height="70" valign="top">xxxx</td>
       <td align="center">xxxx</td>
       <td align="right" valign="bottom">xxxx</td>
   </tr>
</table>
</body>
</html>

resultado

2002 a 2006

manual de lenguaje html

Ángel R. Puente Pérez