Table of contents
Introduction
This is a very simple jQuery-based template designed to do one very simple task: remove excess vertical space from table cells due to <p> tags.
How do I Install it?
- Create a template, call it "Template:CleanTables" (or rename as you desire). You must have "unsafecontent" permission for this to work.
- Create a "Dekiscript" block on the template page (use the "Style" menu in the editor")
- Copy the code from the end of this page and paste it into the Dekiscript block. To copy, click "expand source", then mouse over the top right corner of the source code, and click the "view source" button. This will pop up a window with the source code. Select all, then copy to clipboard.
- Make sure there isn't an extra blank paragraph after the Dekiscript block! Do this every time you edit!!! Save.
A functioning example
Here we show a before-and-after of what the template code does. Because using the template itself would preclude the "before", the code has instead been embedded onto this page and bound to a button.
The first table has no superfluous paragraphs in it. When entered, the carriage return key was not touched. This is the way you want your tables to look:
| this | table |
| has | no |
| paragraphs | Nice! |
For this second table, a carriage return was hit in some of the cells. Backspace was used in an attempt to remove the inserted paragraphs, but the damage is done: the editor has wrapped those cells in paragraphs and won't undo it without some extra and conscious effort in source mode. Most wiki users don't know how to do this, and even if they did they would not take the time. This results in a lot of ugly tables. Fortunately, our bit of jQuery code can do a nice little cosmetic clean-up:
| this | one |
| has | some |
| paragraphs | Yuck! |
Different ways to use the code
There are two useful ways to apply this code to your wiki.
Use the template
The template is an easy way to apply this code selectively. If you want to clean up all tables on a page, just insert this call on your page:
{{ CleanTables() }}
If you know the ID of your table (let's say it's "messytable"), then supply an ID selector like this:
{{ CleanTables("table#messytable") }}
Finally, if you have a class of tables you'd like to clean up ("messyclass") then supply a class selector:
{{ CleanTables("table.messyclass") }}
Steal the code
This is a very small chunk of jQuery code, and is easy to embed into your own code. Feel free. I plan to transplant it into TSTable().
Apply to every page
If you want to apply this processing to every table on every page, then just stick this code in a custom HTML area in the control panel:
<script type="text/javascript">
DekiWiki.$(document).ready(function($) {
var $tables = Deki.$('div#pageContent table');
$tables.find('td > p:first-child').css({'margin-top':'0px','padding-top':'0px'});
$tables.find('td > p:last-child').css({'margin-bottom':'0px','padding-bottom':'0px'});
});
</script>
The primary disadvantage here is that it may waste some processing time on some pages with large tables. It's a bit of a brute-force approach, but might still be reasonable for some users.
Template Code
// CleanTables() by neilw, 2009
//
// Usage:
// CleanTables(table : str?)
// table = a single jQuery selector for tables you want to clean. By default, all tables on the page are selected.
// Note that only tables inside div#content are affected.
// Examples: "table#FixThisTableOnly", "table.FixAllTablesWithThisClass"
//
var tableSelect = $0 ?? $table ?? "table";
<html><tail>
<script type="text/javascript"> "
DekiWiki.$(document).ready(function($) {
var $tables = Deki.$('div#pageContent "..tableSelect.."');
$tables.find('td > p:first-child').css({'margin-top':'0px', 'padding-top':'0px'});
$tables.find('td > p:last-child').css({'margin-bottom':'0px', 'padding-bottom':'0px'});
});
" </script>
</tail></html>
- Tag page (Edit tags)
- What links here
| Images 0 | ||
|---|---|---|
| No images to display in the gallery. |