Creating table data such as move lists in Wiki can be a bit daunting even when using the WYSIWYG tool bar, so I figured I'd provide a walkthrough on how to get this done on a time efficient matter. Some aspects of this will be helpful for any kind of tabular data you are looking to add but the example is specific to a character move list.
Feel free to use our Tekken 6 move lists as a starting point, as a matter of fact I would recommend you do to save yourself a ton of time (I know from experience) and to maintain some kind of uniform format on the wiki.
Step 1: Create your skeleton
Enter the edit interface of the blank page and set up the basic structure of the move list, at the very least you will need the following for every character. Some of course have more move groups.
The first snippet adds the character select template and moves the table of content to the right while being wrapped instead of pushing everything down below. Make sure you add the <div style="clear:both"></div> line after the first section so the first group header stays attached close to the table.
Go ahead and save the page and should have your basic skeleton set up to work from. Saving the page at this point also creates [edit] links for each section so you can edit them easier without having to deal with the entire page.
Step 2: Converting HTML to wiki synthax
I found that this converter tool does a great job, perhaps you can find others as well or maybe even a desktop application. Feel free to comment below.
First we'll grab some HTML source code from the Tekken 6 move lists, one section at a time. You'll want to copy from the opening table tag to the closing table tag and paste it into the converter. For the sake of the example I will shorten the amount of actual rows here but you should get the idea.
I leave all the options at default, but you can experiment with the 'one-line position' option and see which format you prefer to update the table later. The vertical cell listing takes up more real estate but I find it easier to 'read'. Hit the 'Convert' button and you will get something like this.
Notice how any white spaces are converted to & nbsp;, this really isn't needed for spaces between words but required to create the proper spacing on branched moves using =. One of the main reason I like this converter, if you use a different one make sure it does not just ignore white space!
Now copy and paste this into a text editor that has a 'search and replace' functionality, I use EditPad Lite, but there are plenty of free choices out there.
Step 3: Code clean up and formatting
We'll now clean up this code a bit from markup it does not need and add some basic formatting to it. You'll want to search and replace (with nothing) the following instances.
On to a bit of formatting to make things look clean and presentable
You should now have something along these lines
On the wiki page click the proper move group [edit] and paste in the cleaned up wiki code. Do not click save just yet... one final step to wrap things up.
Step 4: Finalizing things
If you are dealing with a table that has an extra info row (stance table), highlight the note and make it italic or you can do this before pasting the data by wrapping the note with ''.
becomes
If the table has footnotes you will need to add these as well. You can either copy and paste these from the site or directly from the source code and save you the trouble of having to add the line breaks after pasting it into the wiki editor.
There is a small hickup here because the wiki converts this to an 'ordered list' in HTML. So you want to mark up each line as small text to rectify that, something I woudl normally do anyway just for aesthetics. Just highlight each line and use the wiki WYSIWYG to reduce the font size, which results in the following code.
There you have it, wiki tables made easy. Rinse and repeat for all move groups and you get something like this.
Final thoughts and notes
With your base move list in place you could now locate the 'clean' HTML in the source code of the wiki page, and paste it into your favorite HTML editor (DreamWeaver, Expression Web, etc...) for easy editing, inserting row, deleting, etc... Once done simple run the HTML through the converter again and paste into the wiki. That will propably be a whole lot more convenient than doing edits by hand directly into the wiki WYSIWYG.
For more information on wiki markup, check the WikiMedia Editing Help.
Feel free to use our Tekken 6 move lists as a starting point, as a matter of fact I would recommend you do to save yourself a ton of time (I know from experience) and to maintain some kind of uniform format on the wiki.
Step 1: Create your skeleton
Enter the edit interface of the blank page and set up the basic structure of the move list, at the very least you will need the following for every character. Some of course have more move groups.
Code:
{{TTT2 Character Select}}
{| align="right"
| __TOC__
|}
==Move List Notes==
Any special info for the characters movelist, status, what needs to be done, etc...
<div style="clear:both"></div>
==Grappling Arts==
==Basic Arts==
==Special Arts==
==Unblockable Arts==
==String Hit Arts==
The first snippet adds the character select template and moves the table of content to the right while being wrapped instead of pushing everything down below. Make sure you add the <div style="clear:both"></div> line after the first section so the first group header stays attached close to the table.
Go ahead and save the page and should have your basic skeleton set up to work from. Saving the page at this point also creates [edit] links for each section so you can edit them easier without having to deal with the entire page.
Step 2: Converting HTML to wiki synthax
I found that this converter tool does a great job, perhaps you can find others as well or maybe even a desktop application. Feel free to comment below.
First we'll grab some HTML source code from the Tekken 6 move lists, one section at a time. You'll want to copy from the opening table tag to the closing table tag and paste it into the converter. For the sake of the example I will shorten the amount of actual rows here but you should get the idea.
Code:
<table width="100%" cellspacing="0" cellpadding="3" border="0" class="medium">
<tr class="subheader">
<td width="24%">Command</td>
<td width="27%">Move Name</td>
<td width="7%">Stance</td>
<td width="15%"> Damage</td>
<td width="10%">Hit Range</td>
<td width="17%">Properties</td>
</tr>
<tr>
<td colspan="6" class="thirdalt" align="center">Moves starting from Kenpo Step only - KNP - b+3+4</td>
</tr>
<tr class="secondalt">
<td>~f <sup>New </sup></td>
<td>Shifting Clouds</td>
<td>STC</td>
<td>-</td>
<td>-</td>
<td>#1</td>
</tr>
<tr class="secondalt">
<td>4 <sup>New </sup></td>
<td>Leaping Lion</td>
<td>RC</td>
<td>32</td>
<td>m</td>
<td>GB SLD</td>
</tr>
<tr class="firstalt">
<td> = 3+4 <sup>New </sup></td>
<td> = Rising Lion</td>
<td></td>
<td>24</td>
<td>m</td>
<td>KND</td>
</tr>
</table>
I leave all the options at default, but you can experiment with the 'one-line position' option and see which format you prefer to update the table later. The vertical cell listing takes up more real estate but I find it easier to 'read'. Hit the 'Convert' button and you will get something like this.
Code:
{| width="100%" cellspacing="0" cellpadding="3" border="0" class="medium" class="subheader"
| width="24%" | Command
| width="27%" | Move Name
| width="7%" | Stance
| width="15%" | Damage
| width="10%" | Hit Range
| width="17%" | Properties
|-
| colspan="6" class="thirdalt" align="center" | Moves starting from Kenpo Step only - KNP - b+3+4
|- class="secondalt"
| ~f <sup>New </sup>
| Shifting Clouds
| STC
| -
| -
| #1
|- class="secondalt"
| 4 <sup>New </sup>
| Leaping Lion
| RC
| 32
| m
| GB SLD
|- class="firstalt"
| = 3+4 <sup>New </sup>
| = Rising Lion
|
| 24
| m
| KND
|}
Notice how any white spaces are converted to & nbsp;, this really isn't needed for spaces between words but required to create the proper spacing on branched moves using =. One of the main reason I like this converter, if you use a different one make sure it does not just ignore white space!
Now copy and paste this into a text editor that has a 'search and replace' functionality, I use EditPad Lite, but there are plenty of free choices out there.
Step 3: Code clean up and formatting
We'll now clean up this code a bit from markup it does not need and add some basic formatting to it. You'll want to search and replace (with nothing) the following instances.
- class="secondalt"
- class="firstalt"
- <sup>New </sup> (you'll need to add these again later to new moves when you insert them)
- class="thirdalt" (only appears in table with extra notes, usually stance tables)
On to a bit of formatting to make things look clean and presentable
- You'll want to get rid of the table properties (might vary on the table), aside from the width you want to get rid of everything and define a new class. In the above example replace cellspacing="0" cellpadding="3" border="0" class="medium" class="subheader" with just class="tabular". Avoid using any sort of color markup, if you set a table border to black for example they would not show up in future themes with a dark background. I have created the 'tabular' CSS class specifically for wiki tabular data table use, not just for move lists.
- Replace the | for the first row with !, this makes the row a header row with bold entries.
You should now have something along these lines
Code:
{| width="100%" class="tabular"
! width="24%" | Command
! width="27%" | Move Name
! width="7%" | Stance
! width="15%" | Damage
! width="10%" | Hit Range
! width="17%" | Properties
|-
| colspan="6" align="center" | Moves starting from Kenpo Step only - KNP - b+3+4
|-
| ~f
| Shifting Clouds
| STC
| -
| -
| #1
|-
| 4
| Leaping Lion
| RC
| 32
| m
| GB SLD
|-
| = 3+4
| = Rising Lion
|
| 24
| m
| KND
|}
On the wiki page click the proper move group [edit] and paste in the cleaned up wiki code. Do not click save just yet... one final step to wrap things up.
Step 4: Finalizing things
If you are dealing with a table that has an extra info row (stance table), highlight the note and make it italic or you can do this before pasting the data by wrapping the note with ''.
Code:
|-
| colspan="6" align="center" | Moves starting from Kenpo Step only - KNP - b+3+4
|-
becomes
Code:
|-
| colspan="6" align="center" | ''Moves starting from Kenpo Step only - KNP - b+3+4''
|-
If the table has footnotes you will need to add these as well. You can either copy and paste these from the site or directly from the source code and save you the trouble of having to add the line breaks after pasting it into the wiki editor.
Code:
#1 Auto parry high & mid strings<br />
#2 Move can only be done when the opponent is grounded<br />
There is a small hickup here because the wiki converts this to an 'ordered list' in HTML. So you want to mark up each line as small text to rectify that, something I woudl normally do anyway just for aesthetics. Just highlight each line and use the wiki WYSIWYG to reduce the font size, which results in the following code.
Code:
<small>#1 Auto parry high & mid strings</small><br />
<small>#2 Move can only be done when the opponent is grounded</small><br />
There you have it, wiki tables made easy. Rinse and repeat for all move groups and you get something like this.
Final thoughts and notes
With your base move list in place you could now locate the 'clean' HTML in the source code of the wiki page, and paste it into your favorite HTML editor (DreamWeaver, Expression Web, etc...) for easy editing, inserting row, deleting, etc... Once done simple run the HTML through the converter again and paste into the wiki. That will propably be a whole lot more convenient than doing edits by hand directly into the wiki WYSIWYG.
For more information on wiki markup, check the WikiMedia Editing Help.
Last edited by Castel on Mar 2nd, 2012 at 18:57
