Differences

This shows you the differences between two versions of the page.

--- dokuwiki_add_caption [2021/06/05 22:47]
admin [A table without caption]
+++ dokuwiki_add_caption [2021/06/09 21:50]
admin [Code]
@@ Line 2: / Line 2: @@
+  * This is a small piece of Javascript code to add a caption to a table.
   * Works with DokuWiki's default template.
-  *
+  * Works with 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 (index) {
+  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 ====
+==== A table without caption (default) ====
+The default syntax of a table is like this:
 <code>
-^ No. ^ Description ^ Quantity ^
+^ No. ^ Description ^ Quantity ^ Remark ^
-| 1   | Lorem ipsum dolor sit amet | 100 |
+| 1   | Lorem ipsum dolor sit amet | 100 |Euismod posuere mus lobortis |
-| 2   | Konsectetur adipiscing elit molestie  | 50 |
+| 2   | Konsectetur adipiscing elit molestie  | 50 |Aenean sed ornare|
-| 3   | Scelerisque vestibulum metus risus |25 |
+| 3   | Scelerisque vestibulum metus risus |25 |Sociis mollis, morbi proin suspendisse magnis|
-| 4   | Nunc a commodo nullam | 200 |
+| 4   | Nunc a commodo nullam | 200 |  |
 </code>
-^ No. ^ Description ^ Quantity ^
+The above code is rendered as follows:
-| 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 |
-==== A table without caption ====
+^ 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 |  |
-<WRAP caption>Table 2. Caption for the Table in WRAP tag (block element)</WRAP>
+==== 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 ^
@@ Line 34: / Line 71: @@
 | 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 |

The Latest Edition

User Tools

Site Tools

Differences

Page Tools