Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Table

Use with caution: available USWDS v3 Web
The table component organizes data into columns and rows.

Examples

Borderless table (default)

View va-table v3 default in Storybook

Borderless with custom markup

View va-table with custom markup in Storybook

Borderless with missing data

View va-table with missing data in Storybook

Borderless with pagination

View va-table with pagination in Storybook

Sortable

View Sortable va-table in Storybook

Usage

Additional guidance for VA

Using the standard table

  • Wrap instead of truncate content. This reduces confusion in case headers start with the same word.
  • Use monospace fonts for content that requires precise alignment in tables. This includes numerical data that can be tabulated and, in some cases, medical terminology. See Typography for detailed guidance on when monospace fonts are appropriate.

Using responsive stacked tables

  • Arrange data in order of importance Because the leftmost columns are what users see first in a smaller screen, work with a content specialist and determine what order of columns is going to tell the best story with that data. Which columns are most critical to understanding what the meaning of the table is? Ask users what the most important data is to them and have that be the first column.
  • Left align header and value in list view When using list view, the header and value are stacked vertically with the bolded header on one line and the value on the line below. Make sure both header and value are left aligned.
  • Limit characters in headings Column headings shouldn’t exceed 60 characters. Follow content guidelines on how to abbreviate dates and time, as well as, other abbreviations and acronyms

  • Tables should have a maximum of 5 columns Very large tables with lots of columns are difficult to use. This problem only gets exacerbated on smaller screens. Show only what users really need.

  • Use the responsive list view table when you need to present a list of information in an itemized way. A responsive stacked table collapses at narrow widths for better readability on small screens.
  • Use the standard table when users have to compare rows and columns as the table layout remains the same on smaller screens.
    • For comparison tables, avoid horizontal scrolling and limit the number of columns to 3 or fewer. All column heading labels should total no more than 60 characters.
  • Avoid using numerical data in a responsive stacked table. All data in a stacked table should be left aligned.

Code usage

Web

Attributes and Properties

Property Attribute Type Default Description emptyCellText empty-cell-text string 'Not available'

Text to display in empty cells. Needed for screen readers to announce empty cells.

 fullWidth full-width boolean false

When active, forces the table to expand to the full-width of its container

 monoFontCols mono-font-cols string

A comma-separated, zero-indexed string of which columns, if any, should be styled with monospace font

 rightAlignCols right-align-cols string

A comma-separated, zero-indexed string of which columns, if any, should be right-aligned

 scrollable scrollable boolean false

When active, the table can be horizontally scrolled and is focusable

 sortable sortable boolean false

If true, the table is sortable. To use a raw sort value for a cell, add a data-sort-value attribute to the span element.

 stacked stacked boolean true

Convert to a stacked table when screen size is small True by default, must specify if false if this is unwanted

 striped striped boolean false

When active, the table will display alternating row background colors.

 tableTitle table-title string

The title of the table

 tableTitleSummary table-title-summary string

A summary that describes the composition of the table displayed below the table title

 tableType table-type "borderless" 'borderless'

The type of table

Content considerations

  • The table-title, which the component will place in a <caption> element, should succinctly describe the table in a meaningful way.

Handling Empty Data in Tables

Tables on VA.gov should never contain blank or missing cells. Empty cells can confuse screen reader users and make it difficult for anyone to understand whether a value is missing, unavailable, or zero. Every table cell should communicate meaning. If data is not available, include a short phrase that explains why — for example, “Data not available,” “Not provided,” or “Zero.” This ensures consistent, interpretable data for all users, including those using assistive technologies.

Choosing the Right Phrase for Missing Data

When a table contains missing data, choose a phrase that reflects why the value is missing. Use clear, consistent language so users can interpret the dataset correctly.

Examples

  • Use Not Applicable when the data does not apply to that row or column. For example, a column for “Discharge date” in a table of Veterans still receiving care.
  • Use Not provided when the data was expected but not reported. For example, a missing value in a “Total claims processed” column.
  • Use Data not available when the data exists but cannot currently be shown. For example, when the data source is being updated, or the system is currently offline.
  • Use 0 when the numeric value is intentionally zero. For example, when the number of dependents column is reported as 0.

Clear phrasing ensures that all users — including those navigating with assistive technology — can understand what each table cell represents and why a value may be missing.

Accessibility considerations

Additional guidance for VA

  • Tables should be used to display tabular data, which is structured data made up of rows and columns. A table allows the information to be easily interpreted by visually associating row and column headers.
  • Do not use tables for layout purposes. Tables should only be used for data that has inherent relationships, not for design purposes.

Component checklist

Web Platform

90%

9 of 10 complete

Maturity

Guidance

Web

Examples, usage, code usage, content considerations, and accessibility considerations are all complete.

Research

Web

VFS team conducted research on this component which is linked from this page.

Stability

Web

Component has been in production for more than 3 months with no significant issues found.

Adoption

Web

Multiple teams have adopted this component.

Accessibility

While this component has been previously tested against older criteria, it has not yet been audited with the updated testing criteria.

Code assets

Variations

Web

Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component depicted in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Internationalization

N/A Web

Describes i18n attributes.

Visual assets

Variations

Web

Figma library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component designed to work in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Legend:

  • Complete
  • Incomplete
  • N/A Not applicable

Provide feedback

Share your feedback, report issues, or suggest improvements for the Table component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Oct 27, 2025