Flash cards
Review the key moves
What is the main idea behind CSS Table Alignment?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-align: center;Put the learning moves in the order that makes the concept easiest to apply.
Horizontal Alignment
The CSS text-align property is used to set the horizontal alignment of the content in <th> or <td>.
This property can have one of the following values:
- left - Aligns the text to the left
- right - Aligns the text to the right
- center - Centers the text
Note
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned!
CSS text-align: center
To center-align the content of <td> elements, use text-align: center :
| Firstname | Lastname | Savings |
|---|
Example
td {
text-align: center;
}Live preview
CSS text-align: left
To force the content of <th> elements to be left-aligned, use text-align: left on <th> elements:
| Firstname | Lastname | Savings |
|---|
Example
th {
text-align: left;
}Live preview
Vertical Alignment
The CSS vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
Note
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
| Firstname | Lastname | Savings |
|---|
Example
td {
height: 50px;
vertical-align: bottom;
}Live preview