Código HTML para alinear celdas arriba
Al construir un sitio web en HTML, puedes encontrar una tabla útil para organizar una pequeña cantidad de información en filas y columnas. Las tablas se han utilizado desde los albores de la web, y se utilizan con un papel importante en la estructura física de una página web. Las tablas son relativamente limitadas en términos de donde puedes colocar el contenido dentro de ellas, pero lo hacen obedeciendo el código con la alineación del contenido de la celda. Las imágenes y el texto predeterminados del centro de la celda, verticalmente hablando, pero una simple adición código mueve este contenido a la parte superior de la celda.
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.
Referencias
