Table Alignment

Horizontal Alignment

The text-align property determines how the information in <th> or <td> is aligned horizontally, such as left, right, or center.

The content of <td> elements is left-aligned by default, while the content of <th> elements is center-aligned.

Use text-align: center: to center the content of <td> elements as well.

				
					td {
  text-align: center;
}

To left-align the content, force the alignment of <th> elements to be left-aligned, with the text-align: left property:

				
					th {
  text-align: left;
}

The vertical alignment (top, bottom, or center) of the content in <th> or <td> is set by the vertical-align property.

When it comes to both <th> and <td> elements, the content of a table has a default vertical alignment of middle.

The example below aligns <td> elements’ vertical text to the bottom:

				
					td {
  height: 50px;
  vertical-align: bottom;
}