Plus UI Design · Practical guides

Style a project directory table

Use hierarchy and spacing to make a table easy to scan without filling it with decoration.

Give the header a clear role

Choose a header treatment distinct enough to identify the columns. Keep its labels short and explicit. Align numeric data consistently, and give the main identifying column enough width for a useful name.

Choose borders or stripes deliberately

Subtle row separators help users track a line across a wide table. Alternating row fills can help when there are many columns, but strong fills and borders together can make the design noisy. Compare both approaches with the same dataset.

Explain the states

Create examples for empty data, loading and an error alongside the populated table. If a cell contains a status, include a written label with its color. Hand these examples to the developer with the final table design.

Example to adapt

Project          Owner     Status
Atlas checkout   Sam       In review
Library refresh  Jordan    Planned
Mobile account   Alex      Ready