====== Tables and Figures ======

{{tag>table figure help syntax}}

<alert info>This functionality is based on a tweaked version of the [[doku>plugin:caption|Plugin Caption]].</alert>

You can give captions to the following items:
  - tables
  - figures
  - image box

The syntax is as follows:

===== Tables =====
<code>
<table label-of-table>
<caption>Give you caption here and it will be numbered automatically</caption>
^ table head 1 ^ table head 2 ^ table head 3 ^ table head 4 ^
| table cell 1 | table cell 2 | table cell 3 | table cell 4 |
| table cell 5 | table cell 6 | table cell 7 | table cell 8 |
</table>
</code>

  * ''label-of-table'' should be a unique id to identify the table by the coding system, and it could not contain spaces in it.
  * The above code could be inserted in the tool bar directly so you don't have to type it manually 

How the above code looks like in reality:

<table label-of-table>
<caption>Give you caption here and it will be numbered automatically</caption>
^ table head 1 ^ table head 2 ^ table head 3 ^ table head 4 ^
| table cell 1 | table cell 2 | table cell 3 | table cell 4 |
| table cell 5 | table cell 6 | table cell 7 | table cell 8 |
</table>


===== Figures =====
<code>
<figure label-of-figure>
{{ :wiki:oxford-university-square-logo.png |University logo}}
<caption>Give you caption here and it will be numbered automatically. The primary quadrangle logo consists of an Oxford blue (Pantone 282) square with the words UNIVERSITY OF OXFORD at the foot and the belted crest in the top right-hand corner reversed out in white. The word OXFORD is a specially drawn typeface while all other text elements use the typeface Foundry Sterling.</caption>
</figure>
</code>

  * ''label-of-figure'' should be a unique id to identify the figure by the coding system, and it could not contain spaces in it.
  * The above code could be inserted in the tool bar directly so you don't have to type it manually 

How it looks like in work:

<figure label-of-figure>
{{ :wiki:oxford-university-square-logo.png |University logo}}
<caption>Give you caption here and it will be numbered automatically. The primary quadrangle logo consists of an Oxford blue (Pantone 282) square with the words UNIVERSITY OF OXFORD at the foot and the belted crest in the top right-hand corner reversed out in white. The word OXFORD is a specially drawn typeface while all other text elements use the typeface Foundry Sterling.</caption>
</figure>

The picture could be replaced by a [[graphs_or_charts|chart or plot]] if required, for example:

<code>
<figure pie-chart-1>
<caption>Caption for the pie chart</caption>
<c3>
  // some comment
  data: {
    columns: [
      ['data1', 30], /* more comment */
      ['data2', 120],
    ],
    type : 'pie',
  }
</c3>
</figure>
</code>

<figure pie-chart-1>
<caption>Caption for the pie chart</caption>
<c3>
  // some comment
  data: {
    columns: [
      ['data1', 30], /* more comment */
      ['data2', 120],
    ],
    type : 'pie',
  }
</c3>
</figure>


===== Image box =====

Occasionally you may need to include a image box in the page but does not want it to look like a figure. In this case, you may just use an image box.

<code>
<imagebox label-of-imagebox>
{{ :wiki:oxford-university-square-logo.png |University logo}}
<caption>This is an image box</caption>
</imagebox>
</code>

  * ''label-of-imagebox'' should be a unique id to identify the image box by the coding system, and it could not contain spaces in it.
  * The above code could be inserted in the tool bar directly so you don't have to type it manually
  * All image boxes are arranged to the right of the page on screen larger than 576 pixels in width

How it looks like in work (see Image {{ref>label-of-imagebox}}):

<imagebox label-of-imagebox>
{{ :wiki:oxford-university-square-logo.png?200 |University logo}}
<caption>This is a image box for the University of Oxford logo.</caption>
</imagebox>

===== Reference =====

What if I need to refer to a table/figure/image box in the text? 


We may have noticed in the image box section that there's a link to the image box. A table/figure/image box could be referred to in text by its label like this:

<code>
For more ideas, please see Table {{ref>label-of-table}}.
</code>

How it works in reality:

For more ideas, please see Table {{ref>label-of-table}}.