Alinear la tabla con la parte superior en HTML

Una tabla HTML consta de filas de tabla que constan de datos. Este tutorial presentará un método para alinear los datos de la tabla en la parte superior del lado derecho.

Utilice las propiedades CSS vertical-align y text-align para alinear los datos de la tabla en HTML

Una tabla en HTML consta de filas y columnas. Usamos la etiqueta <table> para crear una tabla en HTML. La etiqueta <tr> se usa para crear las filas de la tabla, y la etiqueta <td> se usa para completar los datos en la tabla.

El cuadro donde se encuentran los datos de la tabla también se denomina celdas. Las celdas son los componentes básicos de una tabla. Este artículo abordará cómo alinear los datos de la tabla con la parte superior de la celda de la derecha.

Usaremos las propiedades CSS vertical-align y text-align para alinear los datos de la tabla en la parte superior derecha de una celda. Primero, introduzcamos la propiedad vertical-align.

La propiedad define la alineación vertical del elemento especificado. Los elementos pueden ser elementos en línea o de bloque en línea e incluso celdas de tabla.

La propiedad tiene una variedad de opciones. Algunas son baseline, length, sub, super, top, etc. El valor predeterminado de la propiedad es baseline.

Podemos usar la propiedad vertical-align en dos contextos diferentes. Como se indicó anteriormente, podemos usarlo para colocar un elemento en línea verticalmente.

Otra forma es usar la propiedad para alinear el contenido de las celdas en una tabla. En el ejemplo, discutiremos el último contexto.

La propiedad text-align establece la alineación horizontal del texto en el elemento especificado. Algunas opciones de propiedad son left, right, center, justify, etc. Como queda claro en las opciones, podemos establecer la posición del texto con la propiedad text-align.

Podemos usar estas dos propiedades para alinear los datos de la tabla en la parte superior del lado derecho. La opción top de la propiedad vertical-align alinea el elemento con la parte superior del elemento más alto en línea.

En el caso de las celdas de la tabla, el contenido se coloca justo debajo del borde de la celda. De manera similar, la propiedad right alinea el texto al lado derecho de la celda.

Por ejemplo, cree una tabla con dos filas y dos columnas. Rellene las celdas con Create, Read, Update y Delete.

En CSS, seleccione el elemento td como elemento secundario del elemento tabla. Establezca la altura y el ancho de la celda en 200px.

Aplique el borde de 2px solid #000 a las celdas. A continuación, establezca la propiedad vertical-align en top y la propiedad text-align en right.

Como resultado, el contenido de las celdas se coloca justo debajo del borde de la celda y en el lado derecho. A través de esto, podemos alinear los datos de la tabla en la parte superior del lado derecho usando las propiedades CSS vertical-align y text-align.

Código de ejemplo:

<table>
 <tr>
 <td>
 Create
 </td>
 <td>
 Read
 </td>
 </tr>
 <tr>
 <td>
 Update
 </td>
 <td>
 Delete
 </td>
 </tr>
</table>

table td {
 height: 200px;
 width: 200px;
 border: 2px solid #000;
 vertical-align:top;
 text-align:right;
}