====== DokuWiki: Add caption to table ======


  * This is a small piece of Javascript code to add a caption to a table.
  * Works with DokuWiki's default template.
  * Needs WRAP plugin.
  * Just add a line of ''%%<WRAP caption>Caption text</WRAP>%%'' before the table.

===== Code =====

Add the following code to your ''conf/userscript.js''.

<code javascript add_caption.js>
jQuery('.page div.table>table').each(function () {
  let $table = jQuery(this);
  let $prevDiv = $table.parent().prev();
  if ($prevDiv.hasClass('wrap_caption') || $prevDiv.hasClass('caption')) {
    if ($prevDiv.children('p').length > 0) {
      let captionText = $prevDiv.children('p').html();
      $table.prepend('<caption>' + captionText + '</caption>');
      $prevDiv.remove();
      if (location.hash) {
        location.href = location.hash;
      }
    }
  }
});
</code>

Probably you like to add the following lines or similar to your ''conf/userall.css''.

<code css styles.css>
caption {
  text-align: center;
  font-weight: bold;
}
</code>
===== Test drive =====

==== A table without caption (default) ====

The default syntax of a table is like this:

<code>
^ No. ^ Description ^ Quantity ^ Remark ^
| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
| 4   | Nunc a commodo nullam | 200 |  |
</code>

The above code is rendered as follows:

^ No. ^ Description ^ Quantity ^ Remark ^
| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
| 4   | Nunc a commodo nullam | 200 |  |


==== A table with a caption ====

Add one line above the table like this:

<code>
<WRAP caption>Table 2. Caption text is displayed like this</WRAP>

^ No. ^ Description ^ Quantity ^ Remark ^
| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
| 4   | Nunc a commodo nullam | 200 |  |
</code>

this is rendered as:

<WRAP caption>Table 2. Caption text is displayed like this</WRAP>

^ No. ^ Description ^ Quantity ^ Remark ^
| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
| 4   | Nunc a commodo nullam | 200 |  |

Since the caption is inserted within the table, it aligns with the table, as shown below with a small table. 

<WRAP caption>Table 3. Caption text is displayed like this</WRAP>

^ No. ^ Description ^ Quantity ^
| 1   | Lorem ipsum dolor sit amet | 100 |
| 2   | Konsectetur adipiscing elit molestie  | 50 |
| 3   | Scelerisque vestibulum metus risus |25 |
| 4   | Nunc a commodo nullam | 200 |

===== Mechanism =====

The original HTML text is:

<code html>
<div class="wrap_caption">
  <p> Caption text</p>
</div>
<div class="table">
  <table>
     ...
  </table>
</div>
</code> 

This is transformed to:

<code html>
<div class="table">
  <table>
    <caption>Caption text</caption>
    ...
  </table>
</div>

</code>

Since this transformation is made **after** the rendering by DokuWiki, the normal formatting syntax (such as ''%%//italic//%%'', ''%%__underline__%%'', etc.) can be used in the caption text.