Tables

Tables

Tables are the best way to represent data and information in tabular format.

A tables sole purpose is to display data. They are not only easily readable (if built correctly) but also accessible for screen readers.

You can build tables utilising most WYSIWYG (What You See Is What You Get) editors as the HTML code behind it is fairly basic and has been around since HTML code was created.

When should you use tables? 

A general rule of thumb is that if it’s something you would put into a spreadsheet, you’ll probably want to put it into a table. If you would use a text document instead, then put it in a list or paragraph format.

How can you make a table more mobile friendly?

With the standard set up of a table on a mobile device, there will be a slider down the bottom of the table of which you will need to move in order to access the rest of the content in the table. Alternatively, you can add the class of "responsive-table" to your <table> tag to make the table cascade it's information downwards. Depending on how much content you have in the table however, this may not be advisable. See below for an example of the code required.

Column 1 Column 2 Column 3
Data 1-1 Data 2-1 Data 3-1
Data 1-2 Data 2-2 Data 3-2
<table class="responsive-table"> 
  <thead> 
    <tr>  
      <th>
         Column 1 
      </th>
      <th>
         Column 2 
      </th>
      <th>
         Column 3 
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
         Data 1-1 
      </td>
      <td>
         Data 2-1 
      </td>
      <td>
         Data 3-1 
      </td>
    </tr>
    <tr>
      <td>
         Data 1-2 
      </td>
      <td>
         Data 2-2 
      </td>
      <td>
         Data 3-2 
      </td>
    </tr>
  </tbody>
</table>
Back to the top of this page