Easy Table Title Footers

By JSVJSV

Description

This snippet adds titles at the foot of a table.

Code

[[div]] and style method

Page Code

[[div style="text-align: center; font-style: italic; margin: 0; padding: 0; margin-top: -1em;"]]
Table 1: My table. This line of text is the footer.
[[/div]]

[[div]] and CSS method

This replaces the style attribute (above) with a class attribute. You need to insert a definition for .tablefoot into your custom theme CSS.

Page Code

[[div class="tablefoot"]]
Table 1: My table. This line of text is the footer.
[[/div]]

CSS

.tablefoot {
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 0;
    margin-top: -1em; /* you might want to tweak this in your custom style */
}

Abstracted, using [[include]] and CSS

This is the simplest way to use them all over your Wikidot site. You can go one step further, and use [[include]] to include commonly-used tables.

Page Code

 [[include tables:footer name=Table 1 | title=My table. This line of text is the footer. ]]

tables:footer

[[div class="tablefoot"]]
{$name}: {$title}
[[/div]]

CSS (put this into your custom theme CSS)

.tablefoot {
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 0;
    margin-top: -1em; /* you might want to tweak this in your custom style */
}

In action

[[div]] and style method

Column 1 Column 2
1a 1b 1c 2a 2b 2c
David 1,552,725 Blue Team 3 55 89
Elizabeth 5,782,112 Purple Team 2 42 301

Table 1: My table. This line of text is the footer.

Abstracted, using [[include]] and CSS

See this page for an example that includes a common table. Inside that table is an [[include tables:footer ... ]] tag.


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by JSV


Rate this solution

If you think this solution is useful — rate it up!

rating: +19+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License