How to Align Table to Top in HTML

An HTML table consists of table rows that consist of data. This tutorial will introduce a method to align the table data to the top on the right side.

Use the vertical-align and text-align CSS Properties to Align the Table Data in HTML

A table in HTML consists of rows and columns. We use the <table> tag to create a table in HTML. The <tr> tag is used to create the table rows, and the <td> tag is used to fill the data in the table.

The box where the table data is located is also called cells. Cells are the building blocks of a table. This article will tackle how to align the table data to the top of the cell in the right.

We will use the vertical-align and text-align CSS properties to align the table data to the top in the right of a cell. First, let’s introduce the vertical-align property.

The property defines the vertical alignment of the specified element. The elements can either be inline or inline-block elements and even table cells.

The property takes a variety of options. Some are baseline, length, sub, super, top, etc. The default value of the property is baseline.

We can use the vertical-align property in two different contexts. As stated earlier, we can use it to position an inline element vertically.

Another way is to use the property to align the cell contents in a table. In the example, we will discuss the latter context.

The text-align property sets the horizontal alignment of the text in the specified element. Some property options are left, right, center, justify, etc. As it is clear from the options, we can set the position of the text with the text-align property.

We can use these two properties to align the table data to the top on the right side. The top option of the vertical-align property aligns the element to the top of the tallest element in line.

In the case of the table cells, the content is positioned just below the cell’s border. Similarly, the right property aligns the text to the right side of the cell.

For example, create a table with two rows and two columns. Fill the cells with Create, Read, Update, and Delete.

In CSS, select the td element as a child of the table element. Set the height and width of the cell to 200px.

Apply the border of 2px solid #000 to the cells. Next, set the vertical-align property to top and text-align property to right.

As a result, the contents of the cells are positioned right below the cell’s border and to the right side. Through this, we can align the table data to the top on the right side using the vertical-align and text-align CSS properties.

Example Code:

<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;
}