Tables

Responsive and Accessible Tables

A table's purpose is to present tabular data in a grid or matrix (i.e., columns and rows). All tables that reside on NYC.gov must be marked-up correctly so they are accessible and assistive technologies can present the data correctly to the user.

Basic Table

The table below is ideal for small amounts of organized data. The table inherits styles from global.css and can be overridden as needed for customization.

Name	Age	Birthday	Address	Email
Cranston	45	4/11/1972	123 Frank Street	cranston@user.com
Maximillian	24	1/21/1992	4 Livingston Plaza	Max@user.com
Cornelius	33	11/09/1983	65 Street name place	Cornelius@theuser.com
Swimming	33	12/19/1983	4 Park Place	swimming@somewhere.com

Responsive Table Example

<table class="rt">
<caption>Table Caption Text</caption
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
                <th scope="col">Birthday</th>
                <th scope="col">Address</th>
                <th scope="col">Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Name">Cranston</td>
                <td data-label="Age">45</td>
                <td data-label="Birthday">4/11/1972</td>
                <td data-label="Address">123 Frank Street</td>
                <td data-label="Email">cranston@user.com</td>
            </tr>
               <tr>
                <td data-label="Name">Maximillian</td>
                <td data-label="Age">24</td>
                <td data-label="Birthday">1/21/1992</td>
                <td data-label="Address">4 Livingston Plaza</td>
                <td data-label="Email">Max@user.com</td>
            </tr>
            <tr>
                <td data-label="Name">Cornelius</td>
                <td data-label="Age">33</td>
                <td data-label="Birthday">11/09/1983</td>
                <td data-label="Address">65 Street name place</td>
                <td data-label="Email">Cornelius@theuser.com</td>
            </tr>
            <tr>
                <td data-label="Name">Swimming</td>
                <td data-label="Age">33</td>
                <td data-label="Birthday">12/19/1983</td>
                <td data-label="Address">4 Park Place</td>
                <td data-label="Email">swimming@somewhere.com</td>
            </tr>
        </tbody>
    </table>

Scrolling Table

This table is ideal for a large amount of tabular data. When viewing it on a smaller screen or a mobile device, the user must scroll to view all of the data in the table.

Table Heading

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10
Header A	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header B	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header C	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header D	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header E	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10

For the example above, the table heading is represented by the next header level, in this case an <h3>. The <h3> has a unique id, tableheading1, which is referenced by the table to associate it to the table.

Scrolling Table Example

<h3 id="tableHeading1">Table Heading</h3>
<div class="table-responsive">
  <table aria-describedby="tableHeading1">
    <thead>
      <tr>
        <th id="header1" scope="col">Header 1</th>
        <th id="header2" scope="col">Header 2</th>
        <th id="header3" scope="col">Header 3</th>
        <th id="header4" scope="col">Header 4</th>
        <th id="header5" scope="col">Header 5</th>
        <th id="header6" scope="col">Header 6</th>
        <th id="header7" scope="col">Header 7</th>
        <th id="header8" scope="col">Header 8</th>
        <th id="header9" scope="col">Header 9</th>
        <th id="header10" scope="col">Header 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th aria-labeledby="header1" id="headerA" scope="row">Header A</th>
        <td aria-labeledby="header2">Cell 2</td>
        <td aria-labeledby="header3">Cell 3</td>
        <td aria-labeledby="header4">Cell 4</td>
        <td aria-labeledby="header5">Cell 5</td>
        <td aria-labeledby="header6">Cell 6</td>
        <td aria-labeledby="header7">Cell 7</td>
        <td aria-labeledby="header8">Cell 8</td>
        <td aria-labeledby="header9">Cell 9</td>
        <td aria-labeledby="header10">Cell 10</td>
      </tr>
      <tr>
        <th aria-labeledby="header1" scope="row" id="headerB">Header B</th>
        <td aria-labeledby="header2">Cell 2</td>
        <td aria-labeledby="header3">Cell 3</td>
        <td aria-labeledby="header4">Cell 4</td>
        <td aria-labeledby="header5">Cell 5</td>
        <td aria-labeledby="header6">Cell 6</td>
        <td aria-labeledby="header7">Cell 7</td>
        <td aria-labeledby="header8">Cell 8</td>
        <td aria-labeledby="header9">Cell 9</td>
        <td aria-labeledby="header10">Cell 10</td>
      </tr>
      <tr>
        <th aria-labeledby="header1" id="headerC" scope="row">Header C</th>
        <td aria-labeledby="header2">Cell 2</td>
        <td aria-labeledby="header3">Cell 3</td>
        <td aria-labeledby="header4">Cell 4</td>
        <td aria-labeledby="header5">Cell 5</td>
        <td aria-labeledby="header6">Cell 6</td>
        <td aria-labeledby="header7">Cell 7</td>
        <td aria-labeledby="header8">Cell 8</td>
        <td aria-labeledby="header9">Cell 9</td>
        <td aria-labeledby="header10">Cell 10</td>
      </tr>
      <tr>
        <th aria-labeledby="header1" scope="row" id="headerD">Header D</th>
        <td aria-labeledby="header2">Cell 2</td>
        <td aria-labeledby="header3">Cell 3</td>
        <td aria-labeledby="header4">Cell 4</td>
        <td aria-labeledby="header5">Cell 5</td>
        <td aria-labeledby="header6">Cell 6</td>
        <td aria-labeledby="header7">Cell 7</td>
        <td aria-labeledby="header8">Cell 8</td>
        <td aria-labeledby="header9">Cell 9</td>
        <td aria-labeledby="header10">Cell 10</td>
      </tr>
      <tr>
        <th aria-labeledby="header1" scope="row" id="headerE">Header E</th>
        <td aria-labeledby="header2">Cell 2</td>
        <td aria-labeledby="header3">Cell 3</td>
        <td aria-labeledby="header4">Cell 4</td>
        <td aria-labeledby="header5">Cell 5</td>
        <td aria-labeledby="header6">Cell 6</td>
        <td aria-labeledby="header7">Cell 7</td>
        <td aria-labeledby="header8">Cell 8</td>
        <td aria-labeledby="header9">Cell 9</td>
        <td aria-labeledby="header10">Cell 10</td>
      </tr>
    </tbody>
  </table>
</div>

Figures

The tables below are examples of tables that utlized <figure> and <figcaption> to add a caption to a table. Different styles and combinations are shown below.

Figure, figcaption heading

Figcaption - This is an example of a figcaption that appears above the table as a heading.

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10
Header A	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header B	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header C	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header D	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header E	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10

Figure, figcaption heading HTML markup

<figure class="tableWrap">
    <figcaption id="fig1">Figcaption Lorem ipsum dolor sit amet...</figcaption>
    <div class="table-responsive">
        <table aria-describedby="fig1">
            <thead>
          <th scope="col" id="header1">Header 1</th>
                <th scope="col" id="header2">Header 2</th>
                <th scope="col" id="header3">Header 3</th>
                <th scope="col" id="header4">Header 4</th>
                <th scope="col" id="header5">Header 5</th>
            </thead>
            <tbody>
                <tr>
                    <td aria-labelledby="header#">Cell 1</td>
                    <td aria-labelledby="header#">Cell 2</td>
                    <td aria-labelledby="header#">Cell 3</td>
                    <td aria-labelledby="header#">Cell 4</td>
                    <td aria-labelledby="header#">Cell 5</td>
                </tr>
                ...

            </tbody>
        </table>
    </div>
</figure>

Figure, figcaption footer

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10
Header A	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header B	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header C	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header D	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header E	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10

Figcaption - This is an example of a figcaption that appears below the table as a footer.

Figure, figcaption footer HTML markup

<figure class="tableWrap">
    <div class="table-responsive">
        <table aria-describedby="fig2">
            <thead>
                <th scope="col" id="header1">Header 1</th>
                <th scope="col" id="header2">Header 2</th>
                <th ...
            <tbody>
                <tr>
                    <td aria-labelledby="header#">Cell 1</td>
                    <td aria-labelledby="header#">Cell 2</td>
                    <td ...
                </tr>
            </tbody>
        </table>
    </div>
        <figcaption id="fig2">Figcaption</figcaption>
</figure>

Figure, 2 figcaptions

Figcaption top - This is an example of a figcaption that appears as a header.

Header 1	Header 2	Header 3	Header 4	Header 5
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5

Figcaption bottom - This is an example of a figcaption that appears as a footer.

Figure, 2 figcaptions HTML markup

<figure class="tableWrap">
   <figcaption id="fig3">Figcaption top</figcaption>
   <figure class="tableWrap">
    <div class="table-responsive">
        <table aria-describedby="fig3">
            <thead>
                <th scope="col" id="header1">Header 1</th>
                <th scope="col" id="header2">Header 2</th>
                <th ...
            <tbody>
                <tr>
                    <td aria-labelledby="header#">Cell 1</td>
                    <td aria-labelledby="header#">Cell 2</td>
                    <td ...
                </tr>
            </tbody>
        </table>
        </table>
    </div>
     <figcaption>Figcaption bottom</figcaption>
  </figure>
</figure>

Figure, no figcaption

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10
Header A	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header B	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header C	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header D	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header E	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10

Figure, no figcaption HTML markup

figure class="tableWrap">
    <div class="table-responsive">
        <table>
            <thead>
                <th scope="col" id="header1">Header 1</th>
                <th scope="col" id="header2">Header 2</th>
                <th ...
            </thead>
            <tbody>
                <tr>
                    <td aria-labelledby="header#">Cell 1</td>
                    <td aria-labelledby="header#">Cell 2</td>
                    <td ...
                </tr>
            </tbody>
        </table>
    </div>
</figure>

Table-responsive, no figure, no caption

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10
Header A	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header B	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header C	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header D	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10
Header E	Cell 2	Cell 3	Cell 4	Cell 5	Cell 6	Cell 7	Cell 8	Cell 9	Cell 10

Table-responsive, no figure, no caption HTML markup

<div class="table-responsive">
        <table>
            <thead>
                <th scope="col" id="header1">Header 1</th>
                <th scope="col" id="header2">Header 2</th>
                <th ...
            </thead>
            <tbody>
                <tr>
                    <td aria-labelledby="header#">Cell 1</td>
                    <td aria-labelledby="header#">Cell 2</td>
                    <td ...
                </tr>
            </tbody>
        </table>
</div>