Wikipedia:Advanced table formatting

This essay, Wikipedia:Advanced table formatting lists some ways to better show or change wikitables in Wikipedia. Most of the tips involve use of common text-editors. While some special software packages can be used, to allow special editing, they are typically not found when going to other computers to make wiki changes.

Some ideas shown here are beyond the basics listed in the English Wikipedia help-page "en:Help:Table" which has explanations for almost all basic options of table formatting, also showing examples of each.

A quick multi-column table with spacing

A very quick way to make multiple columns of text is as follows:

AA	BB	CC
DD	EE	FF

{| cellpadding=5
|AA || BB || CC
|-
|DD || EE || FF
|}

However, readers often like an up/down listing of data, down each column.
A border can be added with style="border:1px solid #BBB":

AA	CC	EE
BB	DD	FF

{| cellpadding=5 style="border:1px solid #BBB"
|AA || CC || EE
|-
|BB || DD || FF
|}

Note that the common background color is lighter, so a shade of light-bluegreen can be specified on each row (each line across the table), using hex-color code "#fafeff" (or "#FAFEFF"), although the color might not matter in large lists:

AA	CC	EE
BB	DD	FF

{| cellpadding=5 style="border:1px solid #BBB"
|- bgcolor="#fafeff"
|AA || CC || EE
|- bgcolor="#fafeff"
|BB || DD || FF
|}

Lists in multi-column tables

For long lists of text, the quick way is to use asterisk-bullets "*" on separate lines, with a vertical-bar "|" between groups, and then separate the text-columns with spacer-columns, such as for width="30px":

{|
|
*Aardvark
*Badger
*Coyote
|width="30px"|&nbsp;<!--spacer-column-->
|
*Dingo
*Emu
*Flounder
|}

Aardvark Badger Coyote

Dingo Emu Flounder

Again, any table can have a border using style="border:1px solid #BBB". The color #BBB matches image-boxes, but another color could be used, such as "blue" or #AA6633 (brownish):

This is a notebox to show border color.

{| cellpadding=5 style="border:1px solid #AA6633"
|- bgcolor="#fafeff"
| This is a notebox<br>to show border color.
|}

Even though the coding might seem a little awkward, the results are easily controlled for spacing and alignment. The width of the table will, by default, remain the same for wider or narrowed windows, retaining the alignment with the left-side text (or section titles) outside the table.

Compressing to one-line row format

Each row (line across the table) can be compressed, as a single line, by joining columns with double-bars "||" between them and ending each row with "<tr>".

Example row 1: |fmtspec|AA||fmtspec|CC||fmtspec|EE<tr>

Example row 2: |fmtspec|BB||fmtspec|DD||fmtspec|FF<tr>

(The fmtspec can be bgcolor=beige or style="font-size:91%" etc.)

This is done sometimes because it can be easier to re-arrange or pre-view rows that are written as separate lines of text. Multiple columns are joined by double-bars "||" between them, while each single-bar "|" along a line allows a format-specifier before each data-item which ends at a double-bar. However, the wikitable code for a new row, bar-dash ("|-"), must be omitted by adding "<tr>" at the end of the prior row above it. The final row does not need an ending "<tr>".

Floating images in the center

A table can be used to wrap an image, so that the table can float towards the center of the page (such as using: style="float: right;"). However, the table margins, border and font-size must be exactly set to match the average image display. The Image-spec parameter "thumb|" (although auto-thumbnailing to user-settings width) forces a wide left-margin that squeezes the nearby text, so the parameter "center|" can be added to suppress the left-margin padding. However, "center" sometimes shoves the caption to a 2nd line (under a centered box "[]"), so "thumb|" could be omitted and just hard-code the image size, adding a gray (#BBB) border. Using precise parameters to match other images, a floating-image table can be coded as follows:

{| style="float:right; border:1px solid #BBB;margin:.46em 0 0 .2em"
|- style="font-size:86%"
| valign="top" |[[Image:DuraEuropos-TempleOfBel.jpg|180px]]<!--
  --><br> Temple of [[Bel (mythology)|Bel]] (floating).
|}

The text inside the floating-table is sized by style="font-size:86%" (similar in size to the regular image captions). That floating-image table floats a typical image-box, but also allows setting the left-hand margin of the image (see temple-example floating below).

Infobox A
This sample infobox shows how the floating image-box aligns toward the center.

Temple of Bel  (floating).

This box shows implicit margins of [[Image:... |right]]

This box shows implicit margins of [[Image:... |left]]

The caption-text could be omitted, or just remove the parameter "thumb|" so the caption will be hidden until shown by "mouse-over display". Unfortunately the parameter "thumb|" (used for displaying the caption) also controls the auto-thumbnailing to re-size images by user-preferences size (default thumbnail size was 180px, then after 2009, became 220px). In March 2010, it was not possible to have auto-thumbnail sizing while also concealing the caption: instead, parameter "thumb|" triggers both actions and forces the caption to display underneath the image.

An image set with parameter "left|" will gain a wide right-side margin (opposite margin of parameter "right|"), so floating toward the left would require an image set as "center|" inside a table with style="float:left; margin:0.46em 0.2em".

Recall that, outside an image-table, the parameter "right|" causes an image to align (either) above or below an infobox, but would not float alongside the infobox. For that reason, many images beside an infobox are typically set as "left|" to align along the left-margin, rather than floated into the center of the page.

Note the order of precedence from the right margin: first, come infoboxes or images using "right|", then come the floating-tables, and lastly, any text will wrap that can still fit. If the first text-word is too long, no text will fit to complete the left-hand side, so beware creating a "ragged left margin" when not enough space remains for text to fit alongside floating-tables.

If multiple single image-tables are stacked, they will float to align across the page, depending on page-width. The text will be squeezed to allow as many floating-tables as can fit, as auto-aligned, then wrap whatever text (can still fit) at the left-hand side.

...by float:right

...images wrap...

All these...

That auto-aligning feature can be used to create a "floating-gallery" of images: a set of 20 floating-tables will wrap (backward, right-to-left) as if each table were a word of text to wrap across and down the page. To wrap in the typical direction (wrapping left-to-right) define all those floating-tables, instead, as left-side tables using the top parameter style="float:left; margin:0.46em 0.2em". Multiple floating-images empower more flexible typesetting of images around the text.

Undenting/bracketing of text

Real typesetting software, for over 30 years, typically has had simple directives to trigger alignments as left, right, center, or undented (beyond the left-margin line). However, for decades, HTML has had only limited options for easy alignment (one: <center>). A method for undenting the first word of a paragraph is to put the paragraph into a text-table, where the first word (or syllable) is (alone) in column 1, while the other text is in column 2.

Wikicode:  :::<table cellspacing=0 cellpadding=0><tr><td valign=top>Bee<td>thoven
                composed [[Moonlight Sonata]]<br>while he was losing his hearing.</table>

Results:

Bee	thoven composed Moonlight Sonata while he was losing his hearing.

Note the use of both "cellspacing=0 cellpadding=0" so as to not separate the spacing between the first syllable "Bee" and "thoven".

A third column can be used to enclose text in outside brackets, then putting the closing-bracket "]" in column 3, as follows:

Wikicode:  :::<table><tr><td valign=top>[<td>This is line 1.<br>Line 2.<td>]</table>

Results:

[

This is line 1. Line 2.

]

Again, the designers of the HTML language had only limited knowledge of typesetting (such as: font size=1 to 5!), so the only alignment directive was "<center>". However, the currently invalid options "<left>" and "<right>" could be added someday, as a trivial implementation, because to handle "center" then left/right must already be known to the computer. The pitfalls of HTML, developed with little knowledge of typesetting (or even of computer languages), are typical when amateurs (or college dropouts) try to create a new technology. Note that there are some examples of the opposite effect: such as an opera singer (Luciano Pavarotti) learning to sing well without being able to read music. However, in general, most attempts by hacks are botched failures. It is important to seek the knowledge of experts, but hacks might not even understand the basics that experts know, so some humility is needed in such discussions.

Tiny tables within a text line

For years in HTML, a table has always forced an implicit line-wrap (or line-break), so to keep a table within a line, the work-around is to put the whole line into a table, then imbed a table-within-a-table, using the outer table to force the whole line to stay together. Consider the following examples:

Wikicode (showing table forces line-break):

* This is a test table here <table style="border:1px solid black"><tr><td>HELLO WORLD</table> followed by this text afterward.

Result:

• This is a test table here

  HELLO WORLD

  followed by this text afterward.

Wikicode (table-within-table):

* <table style="background-color:#fafeff"><tr><td>This is a test table here<td><table height=11px><tr><td style="border:1px solid black; font-size:60%">HELLO WORLD</table></td><td>followed by this text afterward.</table> This line is more text after the outer table.

Result:

• This is a test table here

  HELLO WORLD

  followed by this text afterward.

  This line is more text after the outer table.

Use style="font-size:60%" to shrink the text within the box. However, the small text could be replaced with small images (aligned inside the inner table). The outer table is for 1 line only, so to make a 2nd line appear even, the exact length of line 1 must be pre-determined, to match the length of other lines.

Moving or exchanging columns

Sometimes columns of data need to be listed in a different order, such as different contents in the 2nd column. Yet, because a wikitable is coded in markup language, the columns cannot simply be dragged across the screen as with a column-oriented editor. Instead, the harsh reality is that the tedious hand-editing of each cell, within a row, is often required as the fastest solution, in the long run.

However, some text editors do allow a repetition-loop to be defined to locate and shift every 7th line or such, as a repeated pattern that could re-arrange the columns in a large table. In another method sometimes used, every data-item is first prefixed with an alphabetic code, hand-coded for the eventual sequence, then those lines are sorted, and afterward all the leading-text prefixes are removed. Sorting can be done in separate files, such as using a DOS-prompt command: SORT myfile.DAT > myfile2.DAT, or else use a text-editor such as Notetab, which has a modify-lines-sort option. Edit-tricks are most useful when multiple tables must be changed, then the time needed to develop complex edit-patterns can be applied to each table. For each table, insert an alpha-prefix on each column (making each row-token "|-" to sort as column zero, like prefix "Row124col00"), then sort into a new file, and then de-prefix the column entries.

Again, bear in mind, the tedious hand-editing of items, in each row, is often faster, than the potential of automated edits gone awry. If just 2 columns are being swapped, within 1 table, then cut/paste editing (of those column entries) is typically faster than column-prefixing, sorting & de-prefixing.

Related pages

WP:Advanced article editing WP:Advanced footnote formatting WP:Advanced template coding WP:Advanced text formatting WP:Alert WP:Thinking outside the infobox

WP:Pruning article revisions WP:Overlink crisis WP:Authors of Wikipedia WP:Avoiding Wikipedia quirks WP:Avoiding difficult users

Notes

[ This essay is an early form for expansion later. ]