From NWNWiki
[edit] Converting from HTML tables to wiki table syntax
This can be done automatically with several of the tools listed at Meta:Help:Table.
(cnic.org - wackyboy.com - uni-bonn.de - diberri.dyndns.org - pywikipediabot)
[edit] Layout of images
Many times, images in an article are placed using a quirk of table rendering. Because a table can be floated to the left or right side of the screen, it has become common practice to utilize a simple one-celled table to place an image in a particular part of the screen. This was a necessary workaround for old browsers, since it generates a consistent rendering of images in browsers which do not adequately support Cascading Style Sheets. By far, the majority of browsers in use today, however, should do just fine with style sheets. The recommended practice now is to arrange images using an element called div.
[edit] Table formatting (Don't do this)
<table align="right" border="0" cellpadding="0"><tr><td>[[Nwn_logo_400x178.jpg]]</td></tr></table>
[edit] Without tables (Do this instead)
[[Nwn_logo_400x178.jpg|right]]
[edit] Possible problems
Tables may cause other difficulties, even when used appropriately. Here are some issues you may want to consider if you use tables in your articles:
- Tables may be hard for other people to edit, especially for people who are new to wiki editing. New editors may be daunted if they click "Edit this page" and see a large block of unintelligible (to them) HTML code. Try to keep your tables simple, and well-formatted in the code. You might also add a comment (which won't appear in the rendered page) like "<!-- To edit the text of this article, skip past the table. -->" in order to reassure editors.
- It is tricky, even for experienced HTML authors, to make sure that tables render correctly on all (or even many) web browsers. Even the slightest typographical mistake can cause drastic visual problems with the table. You may be confident of your abilities to prevent this from happening, but future editors may not be. Again, keep tables simple and well-formatted, and this is less likely to be a problem.
- Large tables, with lots of information, may run off the right side of the screen on lower resolutions. This is sometimes acceptable, especially if the user is warned beforehand (for example, Periodic table (large version) is deliberately very large). If you find it necessary to create a very large table for an article, you may want to consider creating a simpler, smaller version for users who cannot effectively use the larger version (for example, the periodic table is also available in a smaller version).
- If you include fixed-width text inside a table (using the HTML
code, pre, or tt elements, for example), it may force the page to be wider than necessary. Whenever possible, avoid using fixed-width text inside tables, so the text can flow naturally. A similar problem can happen if you include images inside tables (since images are usually constrained to be a fixed width).
- Cells containing a great deal of information may cause rendering problems on some browsers. In particular, a cell containing a large paragraph may jumble the formatting on text-only browsers such as Lynx. This is often necessary, depending on what sort of table you're creating, but if at all possible, try to limit the amount of content you place in table cells.
- In some browsers, tables which are right-aligned allow justified text to run right up to the edge of a border. This can look unsightly. One solution is to use style = "margin-left: 0.5em;" in the table header.
[edit] How to sort tables
Despite the present lack of support at Wikipedia for sorting tables (or querying them), one alternative would be to copy the javascript link from here (control-click the "sort table" link to copy the link) and once you have come back to this page, paste the javascript code you have copied into your URL window and run it. (The other table scripts there can also be used here: transposing columns and rows, and numbering rows.) Alternatively, instead of copying the link, you could drag it into your bookmarks toolbar, allowing the link to be accessible in the future from the toolbar. The script provides "a/d" (ascending/descending) links for each column, allowing one to sort (in either direction) for a given column. (This script is valid for any HTML page which includes a table element.)
Tables can be used for displaying data, and also for creating box-type designs for pages on your Wikia.
Some HTML table tags are currently supported by MediaWiki, but there is no guarantee these will not be deprecated. For this reason, you are advised to use the wiki syntax, which is described on this page.
Note, the following information does not apply to the WYSIWYG mode of the new editor, though you will notice the syntax when in source mode
Markup
|
| XHTML
| Wiki syntax
|
| Table
| <table></table>
| {| params
|}
|
| Caption
| <caption></caption>
| |+ caption
|
| Row
| <tr></tr>
| |- params
|
| Data cell
| <td>cell1</td>
<td>cell2</td>
|
| cell1
| cell2
|
| Data cell
| <td>cell1</td> <td>cell2</td> <td>cell3</td>
| |cell1||cell2||cell3
|
| Header cell
| <th></th>
| ! heading
|
See also MetaWikipedia:Help:Table on Meta-Wiki for more markup information, including how to make tables sortable.
Sample table
| XHTML
| Wiki syntax
|
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
|
{|
| 1 || 2
|-
| 3 || 4
|}
|
Notes
- The entire table begins with
{| and ends with the required |}.
- A caption is a succinct way to describe your table, and can be included with
|+ on the line after {|.
- Table rows are horizontal groups of cells in the table. A row begins with
|- and ends at the next row.
- Table headings are cells with headings in them, and are often rendered in a bold font. They begin with
!. Note that parameters are still separated from the actual content of the cell with |, however
- Table data cells fill out the rest of the table. A cell begins with
| or || and ends at the next cell.
Each row must have the same number of cells as the other rows, so that the number of columns in the table remains consistent (unless there are cells which span several columns or rows, but this is not discussed here). For empty cells, use the non-breaking space as content to ensure that the cells are displayed.
Complex layout (made simple)
This advanced example shows some of the options available for making tables. You can play with these settings in your own table to see what effect they have. Not all of these techniques may be appropriate in all cases; just because you can add colored backgrounds, for example, doesn't mean it's always a good idea. Try to keep the markup in your tables relatively simple — remember, other people are going to be editing the page too.
An example layout
| First header
| Second header
|
| upper left
|
| right side
|
| lower left
| lower middle
|
|
|
|
Welcome to the twin cities
|
Your table code reflect the table structure. Although it is possible to compose complex layout as one table, it is generally not advisable. For simplicity, it is best to split the layout into small units.
Split it up
While you can nest table
| layout
| code
|
An example layout
| First header
| Second header
|
| upper left
|
| right side
|
| lower left
| lower middle
|
A table in a table
|
|
|
|
{| border="1" cellpadding="5" cellspacing="0" style="border-collapse:collapse;" width="330"
|+'''An example layout'''
|-
! First header
! colspan="2" | Second header
|-
| upper left
|
| rowspan=2 | right side
|-
| | lower left
| | lower middle
|-
| colspan="3" align="center" |
{| border="0"
|+''A table in a table''
|-
|| [[File:Wiki.png]]
|| [[File:Wiki.png]]
|}
|}
|
It may be better to split the tables up:
| layout
| code
|
An example layout
| First header
| Second header
|
| upper left
|
| right side
|
| lower left
| lower middle
|
|
{| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
|+'''An example layout'''
|-
! First header
! colspan="2" | Second header
|-
| upper left
|
| rowspan=2 | right side
|-
| | lower left
| | lower middle
|}
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[File:Wiki.png]]
|| [[File:Wiki.png]]
|}
|
Don't use table for simple box
Table code should be used for tables only. For simple boxes, use <div></div> instead. For example, instead of:
| layout
| code
|
|
|
|
Welcome to the twin cities
|
|
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[File:Wiki.png]]
|| [[File:Wiki.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red;"|
Welcome to the twin cities
|}
|
You may use
| layout
| code
|
|
|
|
Welcome to the twin cities
|
|
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[File:Wiki.png]]
|| [[File:Wiki.png]]
|-
| align="center" colspan="2"|
<div style="border:1px solid red;">Welcome to the twin cities</div>
|}
|
The complete code
An example layout
| First header
| Second header
|
| upper left
|
| right side
|
| lower left
| lower middle
|
|
|
|
Welcome to the twin cities
|
{| border="1" cellpadding="5" cellspacing="0" width="330" style="border-collapse:collapse;"
|+'''An example layout'''
|-
! style="background:#efefef; color:#000;" | First header
! colspan="2" style="background:#ffdead; color:#000;" | Second header
|-
| upper left
|
| rowspan=2 | right side
|-
| | lower left
| | lower middle
|}
{| style="border:1px solid; border-top:none; width:330px;"
|-
|| [[File:Wiki.png]]
|| [[File:Wiki.png]]
|-
| align="center" colspan="2"|
<div style="border:1px solid red;">Welcome to the twin cities</div>
|}
See also
- MetaWikipedia:Help:Table on Meta-Wiki, upon which this page was based. This page has more detailed information, and also has a number of external links to sites offering HTML-to-wiki-conversion.
- Help:Editing
External links