Example:[simple-sitemap-menu menu="Main Menu"]
| Description | Color | Size | Units Sold | Price |
|---|---|---|---|---|
| Product #1 | Red | Small | 23 | $23.50 |
| Product #2 | Green | Medium | 45 | $34.75 |
| Product #3 | Orange | Large | 34 | $39.88 |
| Product #4 | Blue | XL | 34 | $45.88 |
| Product #5 | Violet | XXL | 34 | $55.88 |
As you can see from the code below, Tabular generates semantic HTML automatically. No manual coding is necessary!
<table class="tabular zebra-3-template">
<thead>
<tr>
<th>Description</th>
<th>Color</th>
<th>Size</th>
<th>Units Sold</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product #1</td>
<td>Red</td>
<td>Small</td>
<td>23</td>
<td>$23.50</td>
</tr>
<tr>
<td>Product #2</td>
<td>Green</td>
<td>Medium</td>
<td>45</td>
<td>$34.75</td>
</tr>
<tr>
<td>Product #3</td>
<td>Orange</td>
<td>Large</td>
<td>34</td>
<td>$39.88</td>
</tr>
<tr>
<td>Product #4</td>
<td>Blue</td>
<td>XL</td>
<td>34</td>
<td>$45.88</td>
</tr>
<tr>
<td>Product #5</td>
<td>Violet</td>
<td>XXL</td>
<td>34</td>
<td>$55.88</td>
</tr>
</tbody>
</table>
HTML demo page for the SVG Flags WordPress plugin.
The examples below show how to add flags to your content directly via HTML. The plugin now also supports a [svg-flags] shortcode to make it easier to add SVG flags to the new block editor in WordPress 5.0 and above. See plugin settings page for more details.
All flags are SVG files, and each one is available in 4:3 or 1:1 (i.e. square) aspect ratios.
This is just some text inside a span tag with the flag to the left.
Here is another span with the flag to the right and sized to be slightly smaller.
It’s easy to add flags to <p> tags too!
Change the dimensions of the flag to better fit in with the paragraph text.
We can also use vertical alignment inside block level elements. This paragraph is middle aligned.
Adding flags to a table is very simple. Just add HTML markup for an individual flag to each table cell.
(20×15)
(40×30)
(60×45)
(80×60)
(100×75)
(160×120)
(320×240)
Because the flags are SVG images then they look great at any size. Go as big as you like! Just make sure to keep the width/height equal for 1×1 SVG flags, and at a 4×3 aspect ratio for the 4×3 SVG flags. e.g. 20×15, 40×30, 60×45, 80×60 are all valid sizes for any 4×3 flag to display at the best possible size.
Code:
(4:3)
Code:
(1:1)
Code:
(160×120)
Code:
Examples:[simple-sitemap-tax][simple-sitemap-tax taxonomy="wpgo_portfolio_group" show_count="1"]
[simple-sitemap-child child_of=”5699″]
nofollow="1" shortcode attribute. Inspect the code for the sitemap below. Each link includes the rel="nofollow" HTML attribute.
Example:[simple-sitemap nofollow="1"]
Examples:[simple-sitemap-group type="wpgo_portfolio" tax="wpgo_portfolio_group"][simple-sitemap-group list_icon="false" image="true" type="wpgo_portfolio" tax="wpgo_portfolio_group"]
include_terms and exclude_terms shortcode attributes. See the plugin documentation for more details.
Examples:[simple-sitemap-group][simple-sitemap-group include_terms="Edge Case, Latest Posts, Media"]PRO
This sitemap displays all post categories.
This sitemap displays posts ONLY from specified categories.
flex-wrap:wrap;) to make your sitemap responsive!
Example:<div class="simple-sitemap-wrapper">[simple-sitemap types="page"][simple-sitemap types="post"]</div>
Then add this CSS:.simple-sitemap-wrapper { display:flex;justify-content:space-around; }
@media only screen and (max-width: 600px) { .simple-sitemap-wrapper { flex-direction: column; } }
Example:[simple-sitemap excerpt="true"]