Código HTML para alinear celdas arriba

Código valign

Para mover texto o una imagen a la parte de arriba de una celda, añade el siguiente código a la etiqueta <td> o <th>:

valign=”top”

Valign significa "alineación vertical". Si el contenido de la celda no se alinea en la parte superior, revisa para asegurarte de que has encerrado la palabra "top" entre comillas, y que tienes los corchetes tanto de apertura como de cierre entre corchetes en las etiquetas. "Valign" es diferente de "align", que trata la alineación horizontal en vez de la vertical dentro de una celda.

Código de estructura de la tabla

Una tabla simple de dos filas y dos columnas puede tener el siguiente código:

<table> <tr> <th>Column One Header</th> <th>Column Two Header</th> </tr> <tr> <td>Column One Data</td> <td>Column Two Data</td> </tr> </table>

El código <table> simplemente inicia la estructura de la tabla. El código <tr> representa una fila de la tabla y la introduce. Puedes añadir tantas celdas como quieras, en este caso dos, con cada <th> o etiqueta de tabla de cabecera. Puedes finalizar una fila añadiendo la etiqueta </ ​tr>. Esta tabla tiene sólo una fila más, iniciada por otra etiqueta <tr>, y dos celdas más en esa fila definida por las dos etiquetas <td>. Puedes añadir el código valign="top" dentro de cualquiera de estas etiquetas <th> o <td> para alinear todo el contenido de esa celda hacia arriba.

Cabecera de tabla

Las celdas que se definen como encabezados de tabla (con la etiqueta <th>) son una fila en la parte superior de la tabla. El formato del contenido de la cabecera de la tabla tiene predeterminado el texto en negrita con las alineaciones horizontales y verticales centradas. Si deseas alinear verticalmente el contenido de la parte superior, el código de este celda es el siguiente:

<th valign=”top”>Column One Header</th>

Esto crea texto que está en negrita, centrado horizontalmente y alineado verticalmente a la parte superior de la celda.

Datos de tabla

Las celdas que defines como datos de tabla (con la etiqueta <td>) suelen consistir en el resto de la información en tu tabla. El estilo predeterminado de estas celdas para el ancho normal de texto, centrado vertical y alineación izquierda. Para alinear hacia arriba verticalmente el contenido de estas celdas, el código debe ser:

<td valign=”top”>Column One Data</td>

Esto hace que los contenidos se ajusten a la esquina superior izquierda de la celda.