Horizontal Alignment
To align the content of a <th> or <td> horizontally, set text-align to left, right, or center.
Note: Without any styling, <td> content is left-aligned and <th> content is centered.
CSS text-align: center
text-align: center puts the content of <td> elements in the center.
Example
Here the content of the <td> elements is centered.
Prompt
An HTML page that center-aligns the content of table cells.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border and set td text-align to center. Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
CSS text-align: left
Content in <th> elements moves to the left once those elements get text-align: left.
Example
Instead of being centered, the <th> content sits at the left.
Prompt
An HTML page that left-aligns the table header content.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border and set th text-align to left (headers are center-aligned by default). Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>
Vertical Alignment
To align content vertically in a <th> or <td>, for example at the top, bottom, or middle, use vertical-align.
Note: Both <th> and <td> align their content to the middle by default.
Example
With a height set on the <td> elements, their content can sit at the bottom.
Prompt
An HTML page that bottom-aligns cell content vertically.
In an internal
<style> block, give the table/th/td a 1px solid collapsed border, and give td a height of 50px with vertical-align bottom. Add a table with First/Last/Savings columns and a few rows.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr><td>Peter</td><td>Griffin</td><td>$100</td></tr>
<tr><td>Lois</td><td>Griffin</td><td>$150</td></tr>
<tr><td>Joe</td><td>Swanson</td><td>$300</td></tr>
</table>
</body>
</html>