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
Header 1 | Header 2 | Header 3 |
---|---|---|
Value 1 | Value 2 | Value 3 |
Lorem | Dolor | Sit |
Whatever | Whenever | However |
Footer 1 | Footer 2 | Footer 3 |
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.