<commit_before>---
title: Tables And Data
description: Displaying search results and tabular data.
---

    <h3 id="basicTable">Basic Tables</h3>

    <p>Use tables sparingly, <strong>only for tabular data</strong>. Use the <code>nypl-basic-table</code> class to format a table. All tables should have a <code>thead</code> element with the corresponding headers.</p>

    <p class="nypl-a11y-note"><strong>Accessibility note:</strong> Make sure to include the <code>scope="col"</code> attribute to the headers.</p>

    <div class="nypl-toolkit-example">
      <span class="nypl-example-text">Example</span>
<table class="nypl-basic-table">
  <thead>
    <tr>
      <th scope="col">One</th>
      <th scope="col">Two</th>
      <th scope="col">Three</th>
      <th scope="col">Four</th>
    </tr>
  </thead>
  <tr>
    <td>some value</td>
    <td>some value</td>
    <td>some value</td>
    <td>some value</td>
  </tr>
  <tr>
    <td>some value</td>
    <td>some value</td>
    <td>some value</td>
    <td>some value</td>
  </tr>
  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>
</table>
    </div>
    <pre><code class="scss">
.nypl-basic-table
    </code></pre>
    <pre><code class="html">
&lt;table class=&quot;nypl-basic-table&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;col&quot;&gt;One&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Two&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Three&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Four&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tr&gt;
    &lt;td&gt;some value&lt;/td&gt;
    &lt;td&gt;some value&lt;/td&gt;
    &lt;td&gt;some value&lt;/td&gt;
    &lt;td&gt;some value&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;some value&lt;/td&gt;
    &lt;td&gt;some value&lt;/td&gt;
    &lt;td&gt;some value&lt;/td&gt;
    &lt;td&gt;some value&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&hellip;&lt;/td&gt;
    &lt;td&gt;&hellip;&lt;/td&gt;
    &lt;td&gt;&hellip;&lt;/td&gt;
    &lt;td&gt;&hellip;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
    </code></pre>

    <h3 id="summary">Search Results Summary</h3>

    <p>An element of class <code>nypl-results-summary</code> that presents a comma-separated list of search terms or filters along with the number of results. The result count has a special <code>span</code> tag (should be number-formatted e.g.: 1,232) of class <code>nypl-results-count</code>. Each applied facet or term is wrapped by a <code>strong</code> tag and has a <code>button</code> element to remove the facet and refresh the search results. The button contains the remove facet icon (the times “×” icon) as an SVG and the screen-reader-friendly text inside a <code>span</code> tag. A final <code>div</code> of class <code>nypl-clear-results</code> with an <code>nypl-link-button</code> will allow users to clear the current search and start over.
    </p>

    <p class="nypl-a11y-note"><strong>Accessibility note:</strong> Result count and facets must be wrapped by an <code>h2</code> tag.</p>

    <p class="nypl-a11y-note"><strong>Accessibility note:</strong> The main element must include the following attributes when being updated via JavaScript (no page refresh): <code>aria-live="assertive"</code> <code>aria-atomic="true"</code> <code>role="presentation"</code>.</p>

    <p>
    <strong>NOTE:</strong> <strong>Avoid adding a space</strong> between the facet and the remove button so that it <strong>won't wrap to the next line</strong>.</p>

    <div class="nypl-toolkit-example">
      <span class="nypl-example-text">Example</span>
<div class="nypl-results-summary" aria-live="assertive" aria-atomic="true" role="presentation">
  <h2>
    <span class="nypl-results-count">1,807</span> resources found for
    <span class="nypl-facet">
      Audience<commit_msg>:meat_on_bone: fixes #165 as per @seanredmond<commit_after>---
title: Tables And Data
description: Displaying search results and tabular data.
---

    <h3 id="basicTable">Basic Tables</h3>

    <p>Use tables sparingly, <strong>only for tabular data</strong>. Use the <code>nypl-basic-table</code> class to format a table. All tables should have a <code>thead</code> element with the corresponding headers.</p>

    <p class="nypl-a11y-note"><strong>Accessibility note:</strong> Make sure to include the <code>scope="col"</code> attribute to the headers.</p>

    <div class="nypl-toolkit-example">
      <span class="nypl-example-text">Example</span>
<table class="nypl-basic-table">
  <thead>
    <tr>
      <th scope="col">One</th>
      <th scope="col">Two</th>
      <th scope="col">Three</th>
      <th scope="col">Four</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>some value</td>
      <td>some value</td>
      <td>some value</td>
      <td>some value</td>
    </tr>
    <tr>
      <td>some value</td>
      <td>some value</td>
      <td>some value</td>
      <td>some value</td>
    </tr>
    <tr>
      <td>…</td>
      <td>…</td>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>
    </div>
    <pre><code class="scss">
.nypl-basic-table
    </code></pre>
    <pre><code class="html">
&lt;table class=&quot;nypl-basic-table&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;col&quot;&gt;One&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Two&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Three&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Four&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;some value&lt;/td&gt;
      &lt;td&gt;some value&lt;/td&gt;
      &lt;td&gt;some value&lt;/td&gt;
      &lt;td&gt;some value&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;some value&lt;/td&gt;
      &lt;td&gt;some value&lt;/td&gt;
      &lt;td&gt;some value&lt;/td&gt;
      &lt;td&gt;some value&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&hellip;&lt;/td&gt;
      &lt;td&gt;&hellip;&lt;/td&gt;
      &lt;td&gt;&hellip;&lt;/td&gt;
      &lt;td&gt;&hellip;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
    </code></pre>

    <h3 id="summary">Search Results Summary</h3>

    <p>An element of class <code>nypl-results-summary</code> that presents a comma-separated list of search terms or filters along with the number of results. The result count has a special <code>span</code> tag (should be number-formatted e.g.: 1,232) of class <code>nypl-results-count</code>. Each applied facet or term is wrapped by a <code>strong</code> tag and has a <code>button</code> element to remove the facet and refresh the search results. The button contains the remove facet icon (the times “×” icon) as an SVG and the screen-reader-friendly text inside a <code>span</code> tag. A final <code>div</code> of class <code>nypl-clear-results</code> with an <code>nypl-link-button</code> will allow users to clear the current search and start over.
    </p>

    <p class="nypl-a11y-note"><strong>Accessibility note:</strong> Result count and facets must be wrapped by an <code>h2</code> tag.</p>

    <p class="nypl-a11y-note"><strong>Accessibility note:</strong> The main element must include the following attributes when being updated via JavaScript (no page refresh): <code>aria-live="assertive"</code> <code>aria-atomic="true"</code> <code>role="presentation"</code>.</p>

    <p>
    <strong>NOTE:</strong> <strong>Avoid adding a space</strong> between the facet and the remove button so that it <strong>won't wrap to the next line</strong>.</p>

    <div class="nypl-toolkit-example">
      <span class="nypl-example-text">Example</span>
<div class="nypl-results-summary" aria-live="assertive" aria-atomic="true" role="presentation">
  <h2>
    <span class="nypl-results-count">1,807</span> resources found for
    <span class="nypl-facet">
      Audience
{'fraction_non_alphanumeric': 0.18559343758010766, 'fraction_numerical': 0.0055114073314534735, 'mean_word_length': 3.717654171704958, 'pattern_counts': {'":': 0, '<': 257, '<?xml version=': 0, '>': 257, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1044507', 'n_tokens_mistral': 2930, 'n_tokens_neox': 2830, 'n_words': 674}