The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
To center-align the content of <td> elements as well, use text-align: center:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
| td { text-align: center; } |
To align the content to the left, ensure that <th> elements are left-aligned by using the text-align:left property.
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
| th { text-align: left; } |
The vertical-align property adjusts the vertical alignment (e.g., top, bottom, or middle) of the content within <th> or <td> elements.
By default, the content in a table is vertically aligned to the middle for both <th> and <td> elements.
The subsequent example demonstrates setting the vertical text alignment to bottom for <td> elements:
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Example
| td { height: 50px; vertical-align: bottom; } |
