Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Table

Usage notes

Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.

Default

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

Toggle markup


        <table is="coral-table">
          <thead is="coral-table-head">
          <tr is="coral-table-row">
            <th is="coral-table-headercell">Activities</th>
            <th is="coral-table-headercell">Numbers</th>
            <th is="coral-table-headercell">Date</th>
          </tr>
          </thead>
          <tbody is="coral-table-body">
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Alpha</td>
            <td is="coral-table-cell">23,857</td>
            <td is="coral-table-cell">January 28, 2012</td>
          </tr>
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Beta</td>
            <td is="coral-table-cell">20,398</td>
            <td is="coral-table-cell">December 1, 2011</td>
          </tr>
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Charlie</td>
            <td is="coral-table-cell">3,498</td>
            <td is="coral-table-cell">February 15, 2012</td>
          </tr>
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Delta</td>
            <td is="coral-table-cell">20,398</td>
            <td is="coral-table-cell">May 16, 2012</td>
          </tr>
          </tbody>
        </table>

Quiet variant

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

Toggle markup


        <table is="coral-table" variant="quiet">
          <thead is="coral-table-head">
          <tr is="coral-table-row">
            <th is="coral-table-headercell">Activities</th>
            <th is="coral-table-headercell">Numbers</th>
            <th is="coral-table-headercell">Date</th>
          </tr>
          </thead>
          <tbody is="coral-table-body">
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Alpha</td>
            <td is="coral-table-cell">23,857</td>
            <td is="coral-table-cell">January 28, 2012</td>
          </tr>
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Beta</td>
            <td is="coral-table-cell">20,398</td>
            <td is="coral-table-cell">December 1, 2011</td>
          </tr>
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Charlie</td>
            <td is="coral-table-cell">3,498</td>
            <td is="coral-table-cell">February 15, 2012</td>
          </tr>
          <tr is="coral-table-row">
            <td is="coral-table-cell" role="rowheader">Delta</td>
            <td is="coral-table-cell">20,398</td>
            <td is="coral-table-cell">May 16, 2012</td>
          </tr>
          </tbody>
        </table>

Checkbox selection

	Activities	Date
	Alpha	January 28, 2012
	Charlie	February 15, 2012
	Delta	May 16, 2012
	Alpha	January 28, 2012
	Beta	December 1, 2011
	Charlie	February 15, 2012
	Delta	May 16, 2012

Toggle markup


        <style>
          .table-sticky [coral-table-scroll] {
            max-height: 200px;
          }
        </style>
        <table is="coral-table" selectable="" orderable="" multiple="" class="table-sticky">
          <colgroup>
            <col is="coral-table-column" fixedwidth="">
            <col is="coral-table-column" sortable="">
            <col is="coral-table-column" sortable="" sortabletype="date">
            <col is="coral-table-column" fixedwidth="">
          </colgroup>
          <thead is="coral-table-head" sticky="">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">
                <coral-checkbox coral-table-select=""></coral-checkbox>
              </th>
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Date</th>
              <th is="coral-table-headercell"></th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <coral-checkbox></coral-checkbox>
                <coral-icon icon="folder" autoarialabel="on"></coral-icon>
              </td>
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">January 28, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <coral-checkbox></coral-checkbox>
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">February 15, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <coral-checkbox></coral-checkbox>
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">May 16, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <coral-checkbox></coral-checkbox>
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">January 28, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <coral-checkbox></coral-checkbox>
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">December 1, 2011</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <coral-checkbox></coral-checkbox>
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">February 15, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">May 16, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
          </tbody>
        </table>

ListView selection

	Activities	Date
	Alpha	January 28, 2012
	Charlie	February 15, 2012
	Delta	May 16, 2012
	Alpha	January 28, 2012
	Beta	December 1, 2011
	Charlie	February 15, 2012
	Delta	May 16, 2012

Toggle markup


        <style>
          .table-sticky [coral-table-scroll] {
            max-height: 200px;
          }
        </style>
        <table is="coral-table" selectable="" orderable="" multiple="" class="table-sticky" variant="list">
          <colgroup>
            <col is="coral-table-column" fixedwidth="">
            <col is="coral-table-column" sortable="">
            <col is="coral-table-column" sortable="" sortabletype="date">
            <col is="coral-table-column" fixedwidth="">
          </colgroup>
          <thead is="coral-table-head" sticky="">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">
                <coral-checkbox coral-table-select=""></coral-checkbox>
              </th>
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Date</th>
              <th is="coral-table-headercell"></th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <coral-icon icon="folder" autoarialabel="on"></coral-icon>
              </td>
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">January 28, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">February 15, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">May 16, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">January 28, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">December 1, 2011</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">February 15, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" coral-table-rowselect="">
                <img alt="" src="https://via.placeholder.com/128x128">
              </td>
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">May 16, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
          </tbody>
        </table>

Content with centered alignment

There are no saved activities in your account yet. Get started now.

There are no saved activities in your account yet.

Get started now.

Toggle markup


        <table is="coral-table">
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell">
                <p>There are no saved activities in your account yet.</p>
                <p>Get started now.</p>
              </td>
            </tr>
          </tbody>
          <colgroup>
            <col is="coral-table-column" alignment="center">
          </colgroup>
        </table>

Column divider

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

Toggle markup


        <table is="coral-table">
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tbody is="coral-table-body" divider="column">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
          </tbody>
        </table>

Cell divider

	Activities	Numbers	Date
Left Label	Alpha	23,857	January 28, 2012	Right Label
Left Label	Beta	20,398	December 1, 2011	Right Label
Left Label	Charlie	3,498	February 15, 2012	Right Label

Toggle markup


        <table is="coral-table">
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell"></th>
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
              <th is="coral-table-headercell"></th>
            </tr>
          </thead>
          <tbody is="coral-table-body" divider="cell">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Left Label</th>
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
              <th is="coral-table-headercell">Right Label</th>
            </tr>
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Left Label</th>
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
              <th is="coral-table-headercell">Right Label</th>
            </tr>
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Left Label</th>
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
              <th is="coral-table-headercell">Right Label</th>
            </tr>
          </tbody>
        </table>

Sticky head example

Column 1 with loooooooonnnnnng text	Column 2 with loooooooonnnnnng text	Column 3
Sub Column 1 has a long text also	Sub Column 2	Sub Column 3 wants to mimic sub column 1
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3
Cell 1	Cell 2	Cell 3

Toggle markup


        <table is="coral-table" class="table-sticky">
          <thead is="coral-table-head" divider="cell" sticky="">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Column 1 with loooooooonnnnnng text</th>
              <th is="coral-table-headercell">Column 2 with loooooooonnnnnng text</th>
              <th is="coral-table-headercell">Column 3</th>
            </tr>
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Sub Column 1 has a long text also</th>
              <th is="coral-table-headercell">Sub Column 2</th>
              <th is="coral-table-headercell">Sub Column 3 wants to mimic sub column 1</th>
            </tr>
          </thead>
          <tbody is="coral-table-body" divider="column">
            <tr is="coral-table-row">
              <td is="coral-table-cell">Cell 1</td>
              <td is="coral-table-cell">Cell 2</td>
              <td is="coral-table-cell">Cell 3</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell">Cell 1</td>
              <td is="coral-table-cell">Cell 2</td>
              <td is="coral-table-cell">Cell 3</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell">Cell 1</td>
              <td is="coral-table-cell">Cell 2</td>
              <td is="coral-table-cell">Cell 3</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell">Cell 1</td>
              <td is="coral-table-cell">Cell 2</td>
              <td is="coral-table-cell">Cell 3</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell">Cell 1</td>
              <td is="coral-table-cell">Cell 2</td>
              <td is="coral-table-cell">Cell 3</td>
            </tr>
          </tbody>
        </table>

Sortable columns

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

sorted by column Activities in ascending order

Toggle markup


        <table is="coral-table">
          <colgroup>
            <col is="coral-table-column" sortable="" sortabledirection="ascending">
            <col is="coral-table-column" sortable="" sortabletype="number">
            <col is="coral-table-column" sortable="" sortabletype="date">
          </colgroup>
          <thead is="coral-table-head">
          <tr is="coral-table-row">
            <th is="coral-table-headercell">Activities</th>
            <th is="coral-table-headercell">Numbers</th>
            <th is="coral-table-headercell">Date</th>
          </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell" value="20398">20,398</td>
              <td is="coral-table-cell" value="1322694000000">December 1, 2011</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell" value="23857">23,857</td>
              <td is="coral-table-cell" value="1327705200000">January 28, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell" value="3498">3,498</td>
              <td is="coral-table-cell" value="1329260400000">February 15, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell" value="20398">20,398</td>
              <td is="coral-table-cell" value="1337119200000">May 16, 2012</td>
            </tr>
          </tbody>
        </table>

Custom sorting

Activities
Alpha
Beta
Charlie
Delta

sorted by column Activities in ascending order

Toggle markup


        <style>
          .table-custom-sorting {
            min-height: 200px;
          }
        </style>

        <table is="coral-table" class="table-custom-sorting">
          <colgroup>
            <col is="coral-table-column" sortable="" sortabletype="custom" sortabledirection="ascending">
          </colgroup>
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
            </tr>
          </thead>
          <tbody is="coral-table-body"></tbody>
        </table>

        <script>
          window.addEventListener('load', function() {
            var activities = ['Beta', 'Alpha', 'Charlie', 'Echo', 'Delta', 'Golf', 'Hotel', 'Foxtrot'];

            function appendActivity (table, activity) {
              table.items.add().appendChild(new Coral.Table.Cell().set({
                content: {
                  textContent : activity
                }
              }));
            }

            function customSort(table, newDirection) {
              table.items.clear();
              var data = activities.slice();
              if (newDirection === Coral.Table.Column.sortableDirection.DEFAULT) {
                data.slice(0,4).forEach(function(activity) {
                  appendActivity(table, activity);
                });
              }
              else if (newDirection === Coral.Table.Column.sortableDirection.ASCENDING) {
                data.sort().slice(0,4).forEach(function(activity) {
                  appendActivity(table, activity);
                });
              }
              else if (newDirection === Coral.Table.Column.sortableDirection.DESCENDING) {
                data.sort().reverse().slice(0,4).forEach(function(activity) {
                  appendActivity(table, activity);
                });
              }
            }

            // Custom sorting example
            var customSortingTable = document.querySelector('.table-custom-sorting');
            customSort(customSortingTable, customSortingTable.columns.firstElementChild.sortableDirection);

            customSortingTable.on('coral-table:beforecolumnsort', function(event) {
              customSort(customSortingTable, event.detail.direction);
            });
          });
        </script>

Sortable + orderable columns

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012
Activities	Numbers	Date

sorted by column Activities in ascending order

Toggle markup


        <table is="coral-table">
          <colgroup>
            <col is="coral-table-column" orderable="" sortable="" sortabledirection="ascending">
            <col is="coral-table-column" orderable="" sortable="" sortabletype="number">
            <col is="coral-table-column" sortable="" sortabletype="date">
          </colgroup>
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tfoot is="coral-table-foot">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </tfoot>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
          </tbody>
        </table>

Selectable rows

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012
Echo	1,331	June 26, 2015
Foxtrot	41,331	July 12, 2014

Toggle markup


        <table is="coral-table" selectable="" multiple="">
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Echo</td>
              <td is="coral-table-cell">1,331</td>
              <td is="coral-table-cell">June 26, 2015</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Foxtrot</td>
              <td is="coral-table-cell">41,331</td>
              <td is="coral-table-cell">July 12, 2014</td>
            </tr>
          </tbody>
        </table>

Selectable cells

Version A	Version B	Version C
Select Demo	Select Demo	Select Demo
Update	Update	Update
Publish	Publish	Publish

Toggle markup


        <table is="coral-table">
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Version A</th>
              <th is="coral-table-headercell">Version B</th>
              <th is="coral-table-headercell">Version C</th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row" selectable="">
              <td is="coral-table-cell" coral-table-cellselect="">
                <coral-checkbox></coral-checkbox>
                <h3 class="coral-Heading coral-Heading--5">Demo</h3>
              </td>
              <td is="coral-table-cell" coral-table-cellselect="">
                <h3 class="coral-Heading coral-Heading--5">Demo</h3>
              </td>
              <td is="coral-table-cell" coral-table-cellselect="">
                <h3 class="coral-Heading coral-Heading--5">Demo</h3>
              </td>
            </tr>
            <tr is="coral-table-row" selectable="" multiple="">
              <td is="coral-table-cell">
                <coral-checkbox coral-table-cellselect="">Update</coral-checkbox>
              </td>
              <td is="coral-table-cell">
                <coral-checkbox coral-table-cellselect="">Update</coral-checkbox>
              </td>
              <td is="coral-table-cell">
                <coral-checkbox coral-table-cellselect="">Update</coral-checkbox>
              </td>
            </tr>
            <tr is="coral-table-row" selectable="">
              <td is="coral-table-cell">
                <coral-checkbox coral-table-cellselect="">Publish</coral-checkbox>
              </td>
              <td is="coral-table-cell">
                <coral-checkbox coral-table-cellselect="">Publish</coral-checkbox>
              </td>
              <td is="coral-table-cell">
                <coral-checkbox coral-table-cellselect="">Publish</coral-checkbox>
              </td>
            </tr>
          </tbody>
        </table>

Orderable columns + orderable rows

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

Toggle markup


        <table is="coral-table" orderable="">
          <colgroup>
            <col is="coral-table-column" orderable="">
            <col is="coral-table-column" orderable="">
            <col is="coral-table-column" orderable="">
          </colgroup>
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
          </tbody>
        </table>

Orderable columns + orderable rows + sticky head

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012
Delta	20,398	May 16, 2012
Delta	20,398	May 16, 2012
Delta	20,398	May 16, 2012
Delta	20,398	May 16, 2012

Toggle markup


        <table is="coral-table" orderable="" class="table-sticky">
          <colgroup>
            <col is="coral-table-column" orderable="">
            <col is="coral-table-column" orderable="">
            <col is="coral-table-column" orderable="">
          </colgroup>
          <thead is="coral-table-head" sticky="">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
          </tbody>
        </table>

Fixed width columns + sticky head + quiet variant

Activities	Numbers	Date
Charlie	3,498	February
Delta	20,398	December
Delta	20,398	June
Delta	20,398	April
Delta	20,398	May
Beta	20,398	December
Alpha	23,857	January 28

sorted by column Numbers in ascending order

Toggle markup


        <table is="coral-table" orderable="" variant="quiet" class="table-sticky">
          <colgroup>
            <col is="coral-table-column" orderable="" fixedwidth="">
            <col is="coral-table-column" orderable="" sortable="" sortabledirection="ascending" sortabletype="number">
            <col is="coral-table-column" orderable="" fixedwidth="">
          </colgroup>
          <thead is="coral-table-head" sticky="">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tbody is="coral-table-body" divider="cell">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">April</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">June</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December</td>
            </tr>
          </tbody>
        </table>

Orderable rows with handles

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

Toggle markup


        <table is="coral-table" orderable="">
          <colgroup>
            <col is="coral-table-column">
            <col is="coral-table-column">
            <col is="coral-table-column">
            <col is="coral-table-column" fixedwidth="">
          </colgroup>
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tbody is="coral-table-body" orderable="">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" variant="quietaction" icon="dragHandle" aria-label="Reorder" aria-roledescription="drag handle" coral-table-roworder=""></button>
              </td>
            </tr>
          </tbody>
        </table>

Lockable rows

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

sorted by column Activities in ascending order

Toggle markup


        <table is="coral-table" lockable="">
          <colgroup>
            <col is="coral-table-column" sortable="" sortabledirection="ascending">
            <col is="coral-table-column">
            <col is="coral-table-column">
            <col is="coral-table-column" fixedwidth="">
          </colgroup>
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell" sortable="">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
              <th is="coral-table-headercell"></th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock=""></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
              <td is="coral-table-cell">
                <button is="coral-button" type="button" icon="lockClosed" variant="quietaction" iconautoarialabel="on" coral-table-rowlock=""></button>
              </td>
            </tr>
          </tbody>
        </table>

Hidden columns example

Toggle activities

Toggle numbers

Toggle date

Activities	Numbers	Date
Alpha	23,857	January 28, 2012
Beta	20,398	December 1, 2011
Charlie	3,498	February 15, 2012
Delta	20,398	May 16, 2012

Toggle markup


        <div class="hide-control">
          <coral-checkbox type="checkbox" target=".hide-activities-col">Toggle activities</coral-checkbox>
          <coral-checkbox type="checkbox" target=".hide-numbers-col">Toggle numbers</coral-checkbox>
          <coral-checkbox type="checkbox" target=".hide-date-col">Toggle date</coral-checkbox>
        </div>

        <table is="coral-table">
          <colgroup>
            <col is="coral-table-column" class="hide-activities-col">
            <col is="coral-table-column" class="hide-numbers-col">
            <col is="coral-table-column" class="hide-date-col">
          </colgroup>
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
              <th is="coral-table-headercell">Date</th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">January 28, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">December 1, 2011</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">February 15, 2012</td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">May 16, 2012</td>
            </tr>
          </tbody>
        </table>

        <script>
          window.addEventListener('load', function() {
            document.addEventListener('change', function(event) {
              if (event.target.closest('.hide-control')) {
                var checkbox = event.target.closest('coral-checkbox');
                event.target.closest('.markup').querySelector(checkbox.getAttribute('target')).hidden = checkbox.checked;
              }
            });
          });
        </script>

Additive table

Activities	Numbers
Alpha	23,857
Beta	20,398
Charlie	3,498
Delta	20,398

Toggle markup


        <table is="coral-table">
          <colgroup>
            <col is="coral-table-column">
            <col is="coral-table-column">
            <col is="coral-table-column" fixedwidth="">
          </colgroup>
          <thead is="coral-table-head">
            <tr is="coral-table-row">
              <th is="coral-table-headercell">Activities</th>
              <th is="coral-table-headercell">Numbers</th>
            </tr>
          </thead>
          <tbody is="coral-table-body">
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Alpha</td>
              <td is="coral-table-cell">23,857</td>
              <td is="coral-table-cell">
                <button row-remove="" is="coral-button" type="button" icon="close" iconsize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Beta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">
                <button row-remove="" is="coral-button" type="button" icon="close" iconsize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Charlie</td>
              <td is="coral-table-cell">3,498</td>
              <td is="coral-table-cell">
                <button row-remove="" is="coral-button" type="button" icon="close" iconsize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell" role="rowheader">Delta</td>
              <td is="coral-table-cell">20,398</td>
              <td is="coral-table-cell">
                <button row-remove="" is="coral-button" type="button" icon="close" iconsize="XS" variant="quietaction" aria-label="Remove" title="Remove"></button>
              </td>
            </tr>
            <tr is="coral-table-row">
              <td is="coral-table-cell">
                <input aria-label="input" is="coral-textfield" variant="quiet" type="text" placeholder="Type Activity">
              </td>
              <td is="coral-table-cell">
                <input aria-label="input" is="coral-textfield" variant="quiet" type="text" placeholder="Type Number">
              </td>
              <td is="coral-table-cell">
                <button row-add="" is="coral-button" type="button" icon="add" iconsize="XS" variant="quietaction" aria-label="Add" title="Add"></button>
              </td>
            </tr>
          </tbody>
        </table>
        <script>
          window.addEventListener('load', function() {

            // Additive table example
            document.addEventListener('click', function(event) {
              if (event.target.closest('[row-remove]')) {
                event.target.closest('tr[is="coral-table-row"]').remove();
              }
            });

            document.addEventListener('click', function(event) {
              if (event.target.closest('[row-add]')) {
                var row = event.target.closest('tr[is="coral-table-row"]');
                var rowClone = row.cloneNode(true);
                var table = row.closest('table[is="coral-table"]');

                // Copy user input to cell content
                row.items.getAll().forEach(function(cell) {
                  var textfield = cell.querySelector('input');
                  if (textfield) {
                    cell.content.textContent = textfield.value;
                  }
                  cell.classList.remove('u-coral-nopadding');
                });

                // Change button
                var button = row.querySelector('[row-add]');
                if (button) {
                  button.icon = 'close';
                  button.removeAttribute('row-add');
                  button.setAttribute('row-remove', '');
                }

                // Append the clone
                Array.prototype.forEach.call(rowClone.querySelectorAll('input'), function(textfield) {
                  textfield.value = '';
                });
                table.items.add(rowClone);
              }
            });
          });
        </script>

CSS only

Pet Name	Type	Good/Bad
Squeak	Mouse	Bad
Spot	Dog	Bad
Fluffy	Velociraptor	Good

Toggle markup


        <!-- Deprecated -->
        <table class="coral-Table">
          <thead class="coral-Table-head">
          <tr class="coral-Table-row">
            <th class="coral-Table-headerCell">Pet Name</th>
            <th class="coral-Table-headerCell">Type</th>
            <th class="coral-Table-headerCell">Good/Bad</th>
          </tr>
          </thead>
          <tbody class="coral-Table-body">
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Squeak</td>
            <td class="coral-Table-cell">Mouse</td>
            <td class="coral-Table-cell">Bad</td>
          </tr>
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Spot</td>
            <td class="coral-Table-cell">Dog</td>
            <td class="coral-Table-cell">Bad</td>
          </tr>
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Fluffy</td>
            <td class="coral-Table-cell">Velociraptor</td>
            <td class="coral-Table-cell">Good</td>
          </tr>
          </tbody>
        </table>

CSS only with hover state

Pet Name	Type	Good/Bad
Mongo	Chihuahua	Bad
Tiny	Great Dane	Bad
Jaws	Pit Bull	Good

Toggle markup


        <!-- Deprecated -->
        <table class="coral-Table coral-Table--hover">
          <thead class="coral-Table-head">
          <tr class="coral-Table-row">
            <th class="coral-Table-headerCell">Pet Name</th>
            <th class="coral-Table-headerCell">Type</th>
            <th class="coral-Table-headerCell">Good/Bad</th>
          </tr>
          </thead>
          <tbody class="coral-Table-body">
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Mongo</td>
            <td class="coral-Table-cell">Chihuahua</td>
            <td class="coral-Table-cell">Bad</td>
          </tr>
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Tiny</td>
            <td class="coral-Table-cell">Great Dane</td>
            <td class="coral-Table-cell">Bad</td>
          </tr>
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Jaws</td>
            <td class="coral-Table-cell">Pit Bull</td>
            <td class="coral-Table-cell">Good</td>
          </tr>
          </tbody>
        </table>

CSS only with borders

Pet Name	Type	Good/Bad
Hopper	Frog	Good
Pokey	Porcupine	Good
Mr. Snuggles	Snake	Bad

Toggle markup


        <!-- Deprecated -->
        <table class="coral-Table coral-Table--bordered">
          <thead class="coral-Table-head">
          <tr class="coral-Table-row">
            <th class="coral-Table-headerCell">Pet Name</th>
            <th class="coral-Table-headerCell">Type</th>
            <th class="coral-Table-headerCell">Good/Bad</th>
          </tr>
          </thead>
          <tbody class="coral-Table-body">
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Hopper</td>
            <td class="coral-Table-cell">Frog</td>
            <td class="coral-Table-cell">Good</td>
          </tr>
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Pokey</td>
            <td class="coral-Table-cell">Porcupine</td>
            <td class="coral-Table-cell">Good</td>
          </tr>
          <tr class="coral-Table-row">
            <td class="coral-Table-cell" role="rowheader">Mr. Snuggles</td>
            <td class="coral-Table-cell">Snake</td>
            <td class="coral-Table-cell">Bad</td>
          </tr>
          </tbody>
        </table>