Table Cell Alignment: How to Align Text and Numbers

Updated October 2026. We added a quick answer, an alignment table by data type, a section on vertical alignment and the CSS to do it, with links to the design systems and docs we checked.

Quick answer

In a data table, left-align text and right-align numbers. Align each column header the same way as the data under it. Keep the same number of decimal places in a column and use tabular (equal-width) figures, so digits line up. Centre only small, equal-width content such as icons or checkboxes. Vertically, middle-align cells when rows are about the same height, and top-align them when some cells wrap to several lines.

These rules are not just our opinion. The GOV.UK Design System says: "When comparing columns of numbers, align the numbers to the right in table cells." The Bank of Canada design system sets numerical data right-aligned, text left-aligned and headers "aligned with the relevant data". The Maersk Design System gives the same advice and adds rules for dates, icons and vertical alignment.

Why alignment in tables is hard

Creating the right UX for a tool where you need to capture and manage data can be very difficult. That’s especially true if you have some data in a table, and other data is in a text block. It can be very difficult to figure out how to properly align specific content, especially things like numerical values, currency amounts and dates.

Thankfully, there are some best practices to focus on when it comes to data table cell content alignment, as you will notice below.

Table cell alignment by data type

Data type	Horizontal alignment	Why
Text (names, descriptions, labels)	Left	People read left to right in English, so a shared left edge is easy to scan.
Numbers you compare or add up (counts, amounts, percentages)	Right	Units, tens and hundreds line up, so the biggest values stand out by length.
Currency amounts	Right, with the same number of decimal places	Lets people compare amounts digit by digit. See our currency formatting guide.
Number + unit (12 kg, 3.5 GB)	Right, with one unit per column if you can	Keeps the digits aligned; putting the unit in the header keeps cells short.
Dates and times	Left	Maersk lists dates as "non-countable numerals" to left-align: you read them, you don't add them up.
Phone numbers, IDs, postcodes, order numbers	Left	Also non-countable. Left alignment matches how people search for them. See phone number formats.
Status labels and badges	Left	They are text, so they follow the text rule.
Icons, checkboxes, star ratings	Centre	Maersk: "Center alignment can be appropriate when the cell content is made of equal-width icons."
Column header	Same as the column's data	A right-aligned header sits over right-aligned numbers, so the label and values share an edge.

In right-to-left languages such as Arabic or Hebrew, text alignment flips. Use the logical CSS values start and end (see below) and the browser handles the flip for you.

The ideal way to perform cell content alignment

After considerable research, we at UX Pickle have shortlisted a simple system to help you align table data:

If the column is text, then you should align it to the left.
However, if the column has a number + unit or just a number, then you align it to the right, just like you would in Microsoft Excel.
If you have a multi-part value that’s separated via a common separator, such as a decimal point, you can align using the separator.
Align column titles with their data.

It’s a system that helps better optimize your data readability, while also making it easier to manage and access as well. It’s important to ensure that once you start using such an alignment system, you stick to it in order to maintain consistency.

Always follow the alignment rules

You should stick to the guidelines and ensure that text is left-aligned, whereas numerical data stays aligned to the right. Another important aspect to follow here is that you also want to have the header aligned with your data. So if you have a text-based header, align it to the left. If the column is numbers, align the header to the right. GOV.UK builds this in: its numeric style comes as a pair of classes, one for the header cell and one for the data cells.

The recommended option here is to not use center alignment, unless it is an element like a checkbox or star rating. For text or numerical data, doing so makes it harder to scan entries, not to mention you need more graphical elements and dividers.

Significant figures and tabular numbers

Another thing you want to do is to keep the number of decimal places consistent. So, if you use 3 digits after a decimal, stick to that throughout the column. Ideally, you want to have fewer digits if possible. With the same number of decimal places and right alignment, the decimal points line up on their own.

The font matters too. In many fonts, a 1 is narrower than an 8, so right-aligned numbers still wobble. Tabular figures give every digit the same width. Maersk's guidance is to "Right-align numbers, and consider monospaced numbers."

Table design

You need to keep in mind that whenever you align the data points in your table, you don’t need heavy rules. You can keep them if you have less space between the elements. Rules should be light, because adding too many of them will make data scanning a lot harder.

Speaking of that, you also want to be careful with backgrounds. Some might say that using backgrounds makes it easy to highlight and align data. The problem is that heavy colours can make the table harder to read. Keep colour for meaning, such as an error or a selected row, rather than decoration.

Vertical alignment in table cells

Vertical alignment only matters when rows have different heights, usually because a cell wraps onto two or more lines.

Situation	Vertical alignment	Source
Rows are one line, or vary by no more than two to three lines	Middle	Maersk: "Middle-align cell content when row heights vary by no more than two to three lines."
Some cells wrap to many lines	Top	Maersk: "Switch to top alignment when rows vary more, because middle alignment makes longer cells harder to scan."
Any	Avoid bottom	Maersk says bottom alignment risks hiding content near the edge of the screen.

IBM's Carbon Design System also centres header and row text in the row for its standard row heights.

How to align table cells in CSS

Three CSS properties do most of the work.

Horizontal alignment: text-align. MDN describes it as setting "the horizontal alignment of the inline-level content inside a block element or table-cell box". Use the logical values start and end: start is left in left-to-right languages and right in right-to-left ones, and end is the opposite.

Equal-width digits: font-variant-numeric: tabular-nums. MDN says it activates "the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables." It has been supported across browsers since January 2020. It only works if the font includes tabular figures, so test your font.

Vertical alignment: vertical-align. On table cells, MDN lists top, middle, bottom and baseline. baseline lines up the first line of text across the cells in a row.

th,
td {
  text-align: start;      /* text and dates: left in LTR, right in RTL */
  vertical-align: middle; /* switch to top when cells wrap a lot */
}

.numeric {
  text-align: end;        /* numbers and their header: right in LTR */
  font-variant-numeric: tabular-nums;
}

.icon {
  text-align: center;     /* equal-width icons and checkboxes */
}

Put the numeric class on both the <th> and the <td> cells of a number column, so the header follows its data. This is the same pattern GOV.UK uses with govuk-table__header--numeric and govuk-table__cell--numeric.

What about aligning on the decimal point? The text-align values MDN documents are start, end, left, right, center, justify and match-parent, so there is no value for lining up on a character. In practice, fixed decimal places plus right alignment plus tabular figures gets you the same result.

In Figma

If you design tables in Figma, set the text alignment of each numeric cell's text layer to right, and make the header cell match. If your cells use auto layout, set the alignment of number cells to the right as well, so the text box hugs the right edge when the column resizes.

Conclusion

Left for text, right for numbers, headers with their data, centre only for icons, and middle or top vertically. Pick the rules once and apply them to every table in your product, so people learn where to look.