Tables & Lists

Tables are useful for displaying data sets, and should not be used to display content that can be easily displayed using ordered (numbered) or unordered (bulleted) lists.

Creating a List

You can create ordered (ol) or unordered (ul) lists using the buttons in the WordPress editor toolbar, see below.

wp-lists

Unordered (bulleted) List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered (numbered) List

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Creating a Table

What is tabular data?
If ALL your items in a column share something in common that is completely different than the items in other columns AND if all the items in a particular row make it distinct from the other rows.

If you do need to use a table, it is important that it is responsive. Follow these steps to make your tables responsive.

Start with adding this code before your table.
```
<div class="table-wrapper">
   <p class="slide-icon">Slide left or right to view data</p>
</div>
```
This adds the “swipe to scroll” image in tablet and mobile.

You can add a table using the “insert table” button in the WordPress visual editor toolbar (see below). There you can choose how many columns and rows you want and you can add the data. wp-tables

Note: if you choose to add a table this way you must wrap the table with

<div class="responsive-table"></div>

Alternatively, you can add this code to the WordPress text editor to create your table. You can add additional columns and rows by copy and pasting the appropriate code.

<div class="responsive-table">
   <table>
     <thead>
       <tr>
         <th>Column 1 Heading</th>
         <th>Column 2 Heading</th>
         <th>Column 3 Heading</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
       </tr>
       <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
       </tr>
     </tbody>
</div>

The final code should look like this.

<div class="table-wrapper">
   <p class="slide-icon">Slide left or right to view data</p>
</div>

<div class="responsive-table">
   <table>
     <thead>
       <tr>
         <th>Column 1 Heading</th>
         <th>Column 2 Heading</th>
         <th>Column 3 Heading</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
       </tr>
       <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
       </tr>
     </tbody>
</div>