Para especificar la alineación vertical de los datos de una celda en una tabla, utilizamos el atributo "valign".
Los posibles valores que puede tomar este atributo son los siguientes:
top: Alinea todos los datos en la parte superior de la celda.
middle: Este valor es el indicado por defecto. Todos los datos se alinean verticalmente en el centro.
bottom: Al contrario que con "top", los valores dentro de la celda se alinean en la parte inferior.
baseline: Cuando una celda de una fila tenga este atributo, todas las demás celdas de la fila deberían tener sus datos posicionados de tal forma que la primera línea de texto sea en una línea de base común para todas las celdas de la fila. El atributo "baseline" se coloca en la definición de fila <tr>, como podéis ver en el ejemplo de más abajo.
Código de Ejemplo de una tabla con el texto de las celdas en diferentes alineaciones.
<html>
<head>
<title>Tabla - Alineación vertical de celdas</title>
</head>
<body>
<table width=30%" border="1" bordercolorlight="red"
bordercolordark="maroon" >
<tr>
<th>Nombre</th>
<th>Telefono</th>
<th>Otros</th>
<th>Comentarios</th>
</tr>
<tr>
<td valign="top">arriba - top</td>
<td valign="middle">medio-middle</td>
<td valign="bottom">abajo-bottom</td>
<td>esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas</td>
</tr>
<tr valign="baseline">
<td>celdas</td>
<td>con</td>
<td>"baseline"</td>
<td>esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas</td>
</tr>
</table>
</body>
</html>
Programa 62
Representación del código en el explorador.
| Nombre | Teléfono | Otros | Comentarios |
| arriba - top | medio-middle | abajo-bottom | esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas |
| celdas | con | "baseline" | esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas |
No hay comentarios:
Publicar un comentario