Tables

There are two ways to integrate tables into your posts and pages: by using the table block from the WordPress block editor, or by inserting a custom HTML block for a responsive table that turns into a tabbed list on smaller screens (see below)

WordPress Block

Custom HTML (responsive)

The custom table is fully responsive and will turn into a tabbed list on screens smaller or equal to 640px. Copy and paste the source code below into a “Custom HTML” content block. Thank you, Davide Rizzo!

Source code

<div class="mnmlwp-table mnmlwp-table--3cols mnmlwp-table--collapse js-mnmlwp-table-tabs">
  
  <div class="mnmlwp-tablist" role="mnmlwp-tablist"> 
    <button class="mnmlwp-tab" role="tab" aria-selected="true">Ned</button>
    <button class="mnmlwp-tab" role="tab" aria-selected="false">Jon</button>
    <button class="mnmlwp-tab" role="tab" aria-selected="false">Arya</button>
  </div>

  <div style="order:0;" class="mnmlwp-table-cell mnmlwp-table-cell--head">Eddard Stark</div>
  <div style="order:1;" class="mnmlwp-table-cell mnmlwp-table-cell">Has a sword named Ice</div>
  <div style="order:2;" class="mnmlwp-table-cell">No direwolf</div>
  <div style="order:3;" class="mnmlwp-table-cell mnmlwp-table-cell--foot"><strong>Lord of Winterfell</strong></div>

  <div style="order:0;" class="mnmlwp-table-cell mnmlwp-table-cell--head">Jon Snow</div>
  <div style="order:1;" class="mnmlwp-table-cell mnmlwp-table-cell--highlight">Has a sword named Longclaw</div>
  <div style="order:2;" class="mnmlwp-table-cell">Direwolf: Ghost</div>
  <div style="order:3;" class="mnmlwp-table-cell mnmlwp-table-cell--foot"><strong>Knows nothing</strong></div>

  <div style="order:0;" class="mnmlwp-table-cell mnmlwp-table-cell--head">Arya Stark</div>
  <div style="order:1;" class="mnmlwp-table-cell mnmlwp-table-cell--alert">Has a sword named Needle</div>
  <div style="order:2;" class="mnmlwp-table-cell">Direwolf: Nymeria</div>
  <div style="order:3;" class="mnmlwp-table-cell mnmlwp-table-cell--foot"><strong>No one</strong></div>

</div>

Notes

In order to get the custom responsive tables to work you will have to download and install the most recent version of the mnmlWP Shortcodes plugin (>= 0.2.4). There will be a shortcode for responsive tables in the next version of the theme.

You must use the following table classes to achieve a 2, 3, 4, 5, or 6 column layout:

• mnmlwp-table–2cols
• mnmlwp-table–3cols
• mnmlwp-table–4cols
• mnmlwp-table–5cols
• mnmlwp-table–6cols

Single cells can be highlighted by using the following additional cell classes:

• mnmlwp-table-cell–highlight
• mnmlwp-table-cell–alert

Make sure to adjust the tabbed list accordingly so that it reflects the content of the table.