Código HTML para alinear celdas arriba

Por bridget conn

Comstock/Comstock/Getty Images

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 o :

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:

Column One Header	Column Two Header
Column One Data	Column Two Data

El código

simplemente inicia la estructura de la tabla. El código representa una fila de la tabla y la introduce. Puedes añadir tantas celdas como quieras, en este caso dos, con cada , y dos celdas más en esa fila definida por las dos etiquetas

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

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

Referencias

WC3 Schools: etiqueta TD HTML

o etiqueta de tabla de cabecera. Puedes finalizar una fila añadiendo la etiqueta . Esta tabla tiene sólo una fila más, iniciada por otra etiqueta
. Puedes añadir el código valign="top" dentro de cualquiera de estas etiquetas	o	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	) 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:	Column One Header	) 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:	Column One Data

o etiqueta de tabla de cabecera. Puedes finalizar una fila añadiendo la etiqueta . Esta tabla tiene sólo una fila más, iniciada por otra etiqueta

. Puedes añadir el código valign="top" dentro de cualquiera de estas etiquetas

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

) 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:

Column One Header

) 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:

Column One Data