CSS Table Alignment
Control how cell content lines up horizontally with text-align and vertically with vertical-align.
Good alignment makes a table easy to scan. Text usually reads best left-aligned, while numbers are clearer aligned to the right so their digits line up by place value.
Horizontal alignment
Text left, numbers right
<!DOCTYPE html>
<html>
<head>
<style>
td.label {
text-align: left;
}
td.amount {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<td class="label">Coffee</td>
<td class="amount">4.50</td>
</tr>
<tr>
<td class="label">Bagel</td>
<td class="amount">3.25</td>
</tr>
</table>
</body>
</html>Vertical alignment
When rows are tall, vertical-align decides where content sits within the cell. This matters most when cells in the same row hold different amounts of text.
Aligning tall rows
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 60px;
vertical-align: top;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Ava</td>
<td>Team lead, design group</td>
</tr>
</table>
</body>
</html>Note: Header cells (<th>) are centered and bold by default. If you want them to match your body cells, set text-align and font-weight explicitly.
For a deeper look at horizontal alignment beyond tables, see CSS Text Alignment.
