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:
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>
|
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 |
|
Ángel
R. Puente Pérez |
|