Skip to main content
Official website. How you know

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Digital Design System

Table

Tables make information easier to scan and understand.

Overview

A table component is a structured element that organizes data into rows and columns, with headers, rows, and cells for clarity and usability. The first row typically serves as the header.

Example of a table. There is heading and a subheading above the table. The table has 9x6 visible cells with placeholder text. It extends past the page margin, so the rightmost cell is half obscured by a light gradient and a scroll bar appears at the bottom of the table. The first row of the table is dark gray with white text. The remaining rows are white with black text.

In certain situations, a table may also need the first column to serve as a header.

An example of a table with a labeled Y axis. The first row and first column are both dark gray with white text. All other cells are white with black text. The first cell where the first row and column meet is blank and has no border.

Usage guidelines

Columns should be wide enough that there are no line breaks within a word. 

Mobile nyc.gov screenshot showing a table inside an accordion. The first column is wide enough so that the text "Time since violation" fits well on two lines.

Mobile nyc.gov screenshot showing a table inside an accordion. The first column is narrow, so the text "Time since violation" is split onto three lines, with a hyphen in the middle of "violation."

If there’s too much empty space in a column, try different text alignments to increase readability.

Desktop nyc.gov screenshot showing a table with "Household size" in the first column and "Yearly income" in the second column. The table is wide, but the text in each cell is short, so the text in both columns is centered to reduce negative space.

The same table as above, but the text in the "Household size" column is left-aligned and the text in the "Yearly income" column is right-alighted. This causes a large amount of negative space between the text.

Tables are required to have a title. You can also include a description to add more context or instructions.

Cite sources below the table.

Desktop nyc.gov screenshot showing a table of estimated property tax reductions based on income. The table has a title "Estimated tax reduction" and description "Based on your combined income (left column), SCHE can reduce the amount of property tax you owe (right column)." Below the table, there is a line of text reading "Source: NYC Department of Finance"

Table with top heading

This code is for reference only. The library is currently in beta. Check back for future releases.
Example Table 1
Table headingTable headingTable headingTable headingTable headingTable heading
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4Row 1, Col 5Row 1, Col 6
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4Row 2, Col 5Row 2, Col 6
Row 3, Col 1Row 3, Col 2Row 3, Col 3Row 3, Col 4Row 3, Col 5Row 3, Col 6
Row 4, Col 1Row 4, Col 2Row 4, Col 3Row 4, Col 4Row 4, Col 5Row 4, Col 6
Row 5, Col 1Row 5, Col 2Row 5, Col 3Row 5, Col 4Row 5, Col 5Row 5, Col 6
Row 6, Col 1Row 6, Col 2Row 6, Col 3Row 6, Col 4Row 6, Col 5Row 6, Col 6
Row 7, Col 1Row 7, Col 2Row 7, Col 3Row 7, Col 4Row 7, Col 5Row 7, Col 6
Row 8, Col 1Row 8, Col 2Row 8, Col 3Row 8, Col 4Row 8, Col 5Row 8, Col 6 
<div class="nyc-table" style="max-width: 700px">
  <table>
    <caption>Example Table 1</caption>
    <thead>
      <tr>
        <th>Table heading</th><th>Table heading</th><th>Table heading</th><th>Table heading</th><th>Table heading</th><th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Col 1</td><td>Row 1, Col 2</td><td>Row 1, Col 3</td><td>Row 1, Col 4</td><td>Row 1, Col 5</td><td>Row 1, Col 6</td>
      </tr>
      <tr>
        <td>Row 2, Col 1</td><td>Row 2, Col 2</td><td>Row 2, Col 3</td><td>Row 2, Col 4</td><td>Row 2, Col 5</td><td>Row 2, Col 6</td>
      </tr>
      <tr>
        <td>Row 3, Col 1</td><td>Row 3, Col 2</td><td>Row 3, Col 3</td><td>Row 3, Col 4</td><td>Row 3, Col 5</td><td>Row 3, Col 6</td>
      </tr>
      <tr>
        <td>Row 4, Col 1</td><td>Row 4, Col 2</td><td>Row 4, Col 3</td><td>Row 4, Col 4</td><td>Row 4, Col 5</td><td>Row 4, Col 6</td>
      </tr>
      <tr>
        <td>Row 5, Col 1</td><td>Row 5, Col 2</td><td>Row 5, Col 3</td><td>Row 5, Col 4</td><td>Row 5, Col 5</td><td>Row 5, Col 6</td>
      </tr>
      <tr>
        <td>Row 6, Col 1</td><td>Row 6, Col 2</td><td>Row 6, Col 3</td><td>Row 6, Col 4</td><td>Row 6, Col 5</td><td>Row 6, Col 6</td>
      </tr>
      <tr>
        <td>Row 7, Col 1</td><td>Row 7, Col 2</td><td>Row 7, Col 3</td><td>Row 7, Col 4</td><td>Row 7, Col 5</td><td>Row 7, Col 6</td>
      </tr>
      <tr>
        <td>Row 8, Col 1</td><td>Row 8, Col 2</td><td>Row 8, Col 3</td><td>Row 8, Col 4</td><td>Row 8, Col 5</td><td>Row 8, Col 6</td>
      </tr>
    </tbody>
  </table>
</div>

Table with top and side heading

This code is for reference only. The library is currently in beta. Check back for future releases.
Example Table 2
Table heading Table heading Table heading Table heading
Table heading Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Table heading Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Table heading Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
Table heading Row 4, Col 1 Row 4, Col 2 Row 4, Col 3 Row 4, Col 4 
<div class="nyc-table">
  <table>
    <caption>Example Table 2</caption>
    <thead>
      <tr>
        <th></th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Table heading</th>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
        <td>Row 1, Col 3</td>
        <td>Row 1, Col 4</td>
      </tr>
      <tr>
        <th>Table heading</th>
        <td>Row 2, Col 1</td>
        <td>Row 2, Col 2</td>
        <td>Row 2, Col 3</td>
        <td>Row 2, Col 4</td>
      </tr>
      <tr>
        <th>Table heading</th>
        <td>Row 3, Col 1</td>
        <td>Row 3, Col 2</td>
        <td>Row 3, Col 3</td>
        <td>Row 3, Col 4</td>
      </tr>
      <tr>
        <th>Table heading</th>
        <td>Row 4, Col 1</td>
        <td>Row 4, Col 2</td>
        <td>Row 4, Col 3</td>
        <td>Row 4, Col 4</td>
      </tr>
    </tbody>
  </table>
</div>