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 - Alineacion 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
alineacion 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
alineacion de las tres primeras celdas</td>
</tr>
</table>
</body>
</html>
Representación del código en el explorador.
| Nombre | Telefono | Otros | Comentarios |
|---|---|---|---|
| arriba - top | medio-middle | abajo-bottom | esta celda es solo para lograr que se vea bien representada la alineacion de las tres primeras celdas |
| celdas | con | "baseline" | esta celda es solo para lograr que se vea bien representada la alineacion de las tres primeras celdas |
Temas anteriores de curso HTML gratis
79.- HTML - Tablas - Formato de celdas
78.- HTML - Tablas, personalización de las celdas
77.- HTML - Tablas - Colores de Líneas y bordes.
mas ... acceder al índice de temas ...
Otros Links:
Piso en Garrucha - Almería € 104.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)
No hay comentarios:
Publicar un comentario
Gracias por tu comentario, en un maximo de 48 horas sera publicado.