Help:Wikitables vs HTML tables

From Ballotpedia
Jump to: navigation, search
Editing Help
1328101905 Help.png
Index
Editing guide
Cheatsheet
Policies
Copyright
Textual standards
Visual standards
Glossary of terms
Edit review process

On the wiki, there are two ways to format tables. Each formatting has different benefits and detriments. This page will highlight formatting for both forms of tables, including a section highlighting different stylistic methods for changing the tables. Most staff is familiar with standard wiki tables. However, at certain points when creating more complex wiki pages including DPLs, parsed templates and advanced infoboxes, HTML tables are necessary for proper functioning on the wiki.

Wiki tables

Pros v. cons

Pros

  • Only requires one closing bracket, causing less mistakes.
  • Everyone is trained to use and edit these tables.



Cons

  • Requires very specific spacing and line breaks.
  • Won't work inside DPLs and Parser Functions

Coding basics

All pieces of code must begin on a new line.

  • Open table: “{|”
  • Table header: “!”
  • Table row: “|-”
  • Table cell: “|”
  • Close table: “|}”

Example

The Code:
{|border="1"
|-
|Cell one
|Cell two
|-
|Cell three
|Cell four
|}
Cell one Cell two
Cell three Cell four

HTML tables

Pros v. cons

Pros:

  • Can be used anywhere on the wiki, including templates, parser functions, DPLs and even regular pages.
  • Does not require specific spacing and line breaks to function.

Cons:

  • Requires both opening and closing tags leading to more possible mistakes.

Code basics

All code requires an opening tag, <TEXT>, and a closing tag, </text>, i.e. <ref>Reference Text</ref>.

FunctionWiki codeHTML
Open table “{|”<table>
Table row“|-”<tr> </tr>
Table cell“|”<td> </td>
Close table “|}”</table>
Table header"!"<th> </th>

Example

The Code:
<table border=“1”>
<tr>
<td>Cell one</td>
<td>Cell two</td>
</tr>
<tr>
<td>Cell three</td>
<td>Cell four</td>
</tr>
</table>
Cell one Cell two
Cell three Cell four

Formatting tables

Both wiki tables and HTML tables are formatted in the same fashion, using the same code to edit the table. There are a number of points in each table where you can edit the style of the table. The code below compares the two different methods for editing the table"

Editing InstructionsThe CodeThe Output
  • You can edit the style of the whole table to the right of the open table command ( {|style=“” )
  • You can edit individual cells to the right of the Cell’s pipe. You must add an additional pipe after the style code. (|style=“”|Text goes here)
  • Some editing can be done for entire table rows by placing the code between the pipe and the hash. (|style=“”-)
{| border="1”
|-
| style="background-color:blue;"|Cell one
|Cell two
|-
|bgcolor="red"|Cell three
|Cell four
|}
Cell one Cell two
Cell three Cell four
  • You can edit the style of the whole table to the right of the table tag, but before you close it: <table HERE>
  • You can edit individual cells to the right of the table division call, <td HERE>.
  • Some editing can be done for entire table rows by placing the code the right of the table row call, <tr HERE>.
<table border="1”>
<tr>
<td style="background-color:blue;”>Cell one</td>
<td>Cell two</td>
</tr>
<tr>
<td bgcolor="red”>Cell three</td>
<td>Cell four</td></tr>
</table>
Cell one Cell two
Cell three Cell four

Formatting guidelines

Style edits are formatting changes made within a "style="" " prompt while Tag edits are edits made inside the tag, but not within a style call.

AspectTag editStyle editOptions
Border Border="PIXELS" border:FONT STYLE COLOR;

border-style:STYLE;

border-SIDE:FONT STYLE COLOR;
PIXELS = 1, 3, 5, etc.

FONT = 1px, 3px, etc.
STYLE=dotted, dashed, none, hidden, solid, double, grooved, ridged, inset, outset[1]
COLOR = red, blue, #33ffcc, etc.

SIDE = top, bottom, left, right
Font none font:STYLE WEIGHT SIZE FAMILY GENERIC;

font-style:STYLE;
font-weight:WEIGHT;
font-size:SIZE;

font-family:FAMILY GENERIC
STYLE=normal, italic[2]

WEIGHT=normal, bold, bolder, lighter, 100-900(400 normal)[3]
SIZE=xx-small - xx-large, #px, #cm, #%[4]
FAMILY=Family Name

GENERIC= serif, sans-serif, etc.
Alignment align="ALIGN"(whole cell)
valign="VERTICALALIGN"(whole cell)
text-align:ALIGN;(text only) ALIGN= left, center, right
VERTICALALIGN=top, middle, bottom
Text Color none color:COLOR; COLOR = red, blue, #CCFF33, ##AA2244, etc.
Background color bgcolor="COLOR" background-color:COLOR; COLOR = red, blue, #CCFF33, ##AA2244, etc.
Padding and Spacing cellpadding="PIXELS"(Inside a cell)
cellspacing="PIXELS"(Between cells)
border-collapse="COLLAPSE"(Outside table)
none PIXELS = #, e.g. 4, 5, 12, etc.
COLLAPSE = collapse or separate (Default)
Width and Height width="SIZE"
height="SIZE"
width:SIZE;
height:SIZE;
SIZE = ##px, ##cm, ##%(cells go against table, table goes against page)
Collapsing class="CLASS"(only in table tag)noneCLASS = collapsible (open but can collapse),
CLASS = collapsible collapsed(collapsed but can open),
CLASS = collapsible autocollapse (collapsible and starts based on number of other templates on the page)
Sortingclass="CLASS"noneCLASS = "sortable"(Only used in table tag, sorts columns)
CLASS="sortbottom"(Used to keep rows from sorting in "tr" call)
CLASS="unsortable"(Used in a "th" to lock the column from sorting)
WikiTable formattingclass="CLASS"noneCLASS = "Wikitable"(Only used in table tag)

Frequently asked questions

Question:  Why does my page look like this?
Closefail.png

Response:  
1.Check to be sure all of your tags are closed for HTML tables and your final tag is closed and all new tags start on fresh lines for wiki tables. This error is most commonly created by the failure to close a <tr> tag somewhere in the code.
2.Identify the table in error. This is best done by deleting portions of the code, then previewing and canceling. If the previewed code is corrected, you know where your error is. Be sure to check infoboxes and templates as well.
3. Check to see that any style tags are closed with " marks. This will cause the <tr> tag to fail.



Question:  Why does my page look like this?
Tableclosetagerror.png

Response:  
1.) Identify the table in error. This is best done by deleting portions of the code, then previewing and canceling. If the previewed code is corrected, you know where your error is. Be sure to check infoboxes and templates as well.
2.) Check to be sure all of your tags are closed for HTML tables and your final tag is closed and all new tags start on fresh lines for wiki tables. This error is most commonly created by the failure to close a <table> tag at the end of the code.
3.) Check to see that any style tags are closed with " marks. This will cause the <table> tag to fail.
4.) Check for nested tables to make sure you have the same number of opening tables as closing tables.


External links

References