Wikipedia:Advanced table formatting

There are several advanced table formatting techniques to improve the display or editing of wikitables in Wikipedia. Most of the tips involve use of standard text-editors. While some special software packages exist, to allow customized editing, they are typically not available when travelling to other computers for wiki-editing.

Some techniques here are beyond the basics described in the Wikipedia help-page "Help:Table" which explains almost all basic options of table formatting, also showing examples of each.

A quick multi-column table with spacing

The quickest way to create multiple columns of text is as follows:

AA	BB	CC
DD	EE	FF

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

However, readers often prefer a vertical 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 default background color is lighter, so a shade of light-bluegreen can be specified on each row, 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
|}

Compressing to one-line row format

Each row 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 preview rows that are coded 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 precisely set to match a typical image display. The Image-spec parameter "thumb|" (although auto-thumbnailing to user-preference 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 adjusting 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.

]

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 workaround is to put the whole line into a table, then embed 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.

Another alternative is to copy the entire table from the displayed page, paste the text into a spreadsheet, move the columns as you will. Then reconstruct the table lines with a formula. This formula handles a three column table, reconstructing a single line. Copy the line for each line of the table, copy the formula rows back to your editing page and you're back in business.

 =A1&" || "&A2&" || "&A3&"<tr>"

A non-bug in HTML

If you use tables for two-dimensional graphics you might discover a "feature" in HTML that promotes grey hair. It can affect both rows and columns, depending on the use of either rowspan or colspan.

In this 7-row table three cells have the height of 3 rows, but the total is 6 rows. Where is row 4? There is a row 5-4!

row one	row one	row one
row two 3 rows	row two	row two
	row three 3 rows	row three
		row four 3 rows
row five
row six	row six
row seven	row seven	row seven

The answer is that when the table has a row without containing any rowspan=1 cell, this row is "compressed" upwards and disappears.

"Solution": divide one of the tall cells so that that the row gets one rowspan=1 cell (and don't mind the eventual loss of text-centering). Then kill the border between them. Don't forget to fill the cell with nothing (nbsp).

row one	row one	row one
row two 3 rows	row two	row two
	row three 3 rows	row three
		row four 3 rows
row five
row six	row six
row seven	row seven	row seven

WAVE Support (Edge Migration)

Overview

We have migrated some of our WAVE Edge DMZ server to from RHEL5 to RHEL7, but the main function of the edge services remains the same. We will migrate the rest of WAVE to RHEL7 in the next year or so. The main differences that you will notice are:

• Accessing the RHEL7 servers is different (and I think simpler)
• The RHEL7 host names are in a different format ( I think less confusing)
• The Admin function which was on the premium boxes has been stripped out to sit on its own server group
• JBoss has been replaced by Tomcat although you may still see references to JBoss because Red Hat uses that as an overall product name for its web products. Confusingly even Apache is now part of its JBoss product.

Diagram

Since we have only changed the Edge DMZ, I’ve only listed the Edge server groups below. All other servers remain as they were for the mean time. Hopefully it’s obvious that the little numbers in circles refer to the version of RHEL that the servers are using.

Server names for RHEL7 servers

Server Group	Server Name	Notes
wave-prd-core-lgn	exvwaveprdcorelgn01/02	logon servers
wave-prd-core-ptnr	exvwaveprdcoreptnr01/02	Partner servers
wave-prd-core-util	exvwaveprdcoreutil01/02	Util servers. Not yet implemented so still on exvwaveprodutil01-02
wave-prd-core-web-public	exvwaveprdcorewebpublic01/02/03/04	Public Web servers
wave-prd-core-web-premium	exvwaveprdcorewebpremium01/02/03/04	Premium Web servers
wave-prd-core-web-layer	exvwaveprdcoreweblayer01/02/03/04	Layer Web servers. Not yet implemented, so still on exxvmwaveprodweb05-08
wave-prd-core-adm	exvwaveprdcorewebadm01/02	Admin servers. The admin function used to be run on the premium web servers.

How do I access those servers?

These are now all IPA account servers so no more shared usernames. First log onto mgztisssh01 and then just ssh onto the individual servers.

Where are the log files?

Tomcat log files are under

/var/log/tomcat

So for example the old server.log is now just called localhost

/var/log/tomcat/localhost

And Cache logs are store under

/var/log/tomcat/meto

Microservices are kept running by a services called supervisor and so their log files are stored under

/var/log/supervisor/subprocess

What Services are running and how do I Restart Them?

Tomcat

sudo systemctl stop jws-tomcat8.service
sudo systemctl start jws-tomcat8.service
sudo systemctl restart jws-tomcat8.service
sudo systemctl status jws-tomcat8.service

Apache

sudo systemctl stop jws-httpd.service
sudo systemctl start jws-httpd.service
sudo systemctl restart jws-httpd.service
sudo systemctl status jws-httpd.service

Supervisor (restarts all supervised services too)

sudo systemctl stop supervisord.service
sudo systemctl start supervisord.service
sudo systemctl restart supervisord.service
sudo systemctl status supervisord.service

How do I reduce Impacts while Restarting? (Graceful Restarts)

Just like the RHEL7 servers, it’s best to restart servers one half at a time. For example for the premium servers restart 1&2 and then 3&4 etc.

It’s also useful to know that rebooting the VM will bring all services back up in the correct order.

PRE, tst and dev environments

PRE

Access to PRE is the same route as for PROD, i.e through mgztisssh01. The server names are

Server Group	Server Name	Notes
wave-pre-core-lgn	exvwaveprecorelgn01/02	logon servers
wave-pre-core-ptnr	exvwaveprecoreptnr01/02	Partner servers
wave-pre-core-util	exvwaveprecoreutil01/02	Util servers. Not yet implemented so still on exvwaveprodutil01-02
wave-pre-core-web-public	exvwaveprecorewebpublic01/02/03/04	Public Web servers
wave-pre-core-web-premium	exvwaveprecorewebpremium01/02/03/04	Premium Web servers
wave-pre-core-web-layer	exvwaveprecoreweblayer01/02/03/04	Layer Web servers. Not yet implemented, so still on exxvmwaveprodweb05-08
wave-pre-core-adm	exvwaveprecorewebadm01/02	Admin servers. The admin function used to be run on the premium web servers.

tst

Access to tst is through exvtisssh01 using a valid MO Internal IPA account. If you don't have one you should raise a Work Order with Platforms team.

Server Group	Server Name	Notes
wave-tst-core-lgn	exvwavetstcorelgn01	logon servers
wave-tst-core-ptnr	exvwavetstcoreptnr01	Partner servers
wave-tst-core-util	exvwavetstcoreutil01	Util servers. Not yet implemented so still on exvwaveprodutil01-02
wave-tst-core-web-public	exvwavetstcorewebpublic01	Public Web servers
wave-tst-core-web-premium	exvwavetstcorewebpremium01	Premium Web servers
wave-tst-core-web-layer	exvwavetstcoreweblayer01	Layer Web servers. Not yet implemented, so still on exxvmwaveprodweb05-08
wave-tst-core-adm	exvwavetstcorewebadm01	Admin servers. The admin function used to be run on the premium web servers.

dev

Access to dev is through exvtisssh01 using a valid MO Internal IPA account. If you don't have one you should raise a Work Order with Platforms team.

Server Group	Server Name	Notes
wave-dev-core-lgn	exvwavedevcorelgn01	logon servers
wave-dev-core-ptnr	exvwavedevcoreptnr01	Partner servers
wave-dev-core-util	exvwavedevcoreutil01	Util servers. Not yet implemented so still on exvwaveprodutil01-02
wave-dev-core-web-public	exvwavedevcorewebpublic01	Public Web servers
wave-dev-core-web-premium	exvwavedevcorewebpremium01	Premium Web servers
wave-dev-core-web-layer	exvwavedevcoreweblayer01	Layer Web servers. Not yet implemented, so still on exxvmwaveprodweb05-08
wave-dev-core-adm	exvwavedevcorewebadm01	Admin servers. The admin function used to be run on the premium web servers.

Lists in multi-column tables

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

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.

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.

See also

• WP:Advanced article editing
• WP:Advanced footnote formatting
• WP:Advanced template coding
• WP:Advanced text formatting
• WP:Alert
• WP:Thinking outside the infobox
• WP:About translating German Wikipedia
• WP:Pruning article revisions
• WP:Overlink crisis
• WP:Authors of Wikipedia
• WP:Avoiding Wikipedia quirks
• WP:Avoiding difficult users

Notes

[ This essay is a draft to be expanded later. ]

External links

• Editing Wikitext/Tables at Wikibooks
• Editing Wikitext/Tables Ready to Use at Wikibooks
• Online table builder with mediawiki export
• Wikitable Editor, a visual table editor in wiki code
• HTML-WikiConverter, various versions and languages

Wikipedia technical help Get personal technical help at the Teahouse, Help desk, Village pump (technical), talk pages or IRC. General technical help Multilingual support Special Characters Entering Browser notes Troubleshooting Bypass cache Mobile access Printing Keyboard shortcuts Editing Edit toolbar CharInsert Edit conflict VisualEditor User guide Create a page Page history Reverting Page name Introduction User access levels Editnotice IRC Tutorial Special page related Special page help Searching Advanced search Logging in Reset passwords Notifications/Echo FAQ Moving a page Fix cut-and-paste moves Watching pages User contributions Emailing users Random pages Logs What links here Related changes Recent changes Pending changes Page Curation Linksearch Page import Edit filter Wiki markup Wiki markup main page Cheatsheet Colours use Columns Line-break handling Lists Magic words For beginners Conditional expressions Switch parser function Time function Redirects Sections and TOCs Tables Introduction Basics Conditional tables Sorting Collapsing Advanced table formatting Links and diffs URLs Links Permanent link Interwikimedia links Interlanguage links Link color Pipe trick Colon trick Magic links Diffs Simplest diff guide Simple diff and link guide Complete diff and link guide Media files: images, videos and sounds Media help Options to hide an image Uploading images Introduction Files Creation and usage Moving files to Commons Visual file markup Images Preparing images for upload Picture tutorial Extended image syntax Gallery tag Graphics tutorials Basic bitmap image editing How to improve image quality Graphics Lab resources Sound file markup SVG help Other graphics Family trees Graphs and charts How to create To scale charts Barcharts Math formula Math symbols Rendering math LaTeX symbols Musical scores Musical symbols Timeline EasyTimeline syntax WikiHiero syntax Templates and Lua modules Templates Template messages Citation templates Transclusion Labeled section Substitution Advanced template coding Template limits Template sandbox and test cases Template documentation Purge Lua help Lua project To do Resources Guide to Scribbling Namespaces Main/Article Talk namespaces Archiving User User page design Project/Wikipedia File MediaWiki Bug reports and feature requests Template Help Category Portal Book Draft Education Program TimedText Module/Lua Topic/Flow Special Media HTML and CSS HTML in wikitext Markup validation Span tags Cascading Style Sheets Catalogue of CSS classes Useful styles Classes used in microformats Ambox classes Common.js and common.css Customisation and tools Preferences Skins Customizing watchlists Hide pages Gadgets Beta Features User scripts Guide Techniques IRC Scripts User styles Tools Navigation shortcuts Browser tools Alternative browsing Editing tools Optimum tool set Cleaning up vandalism tools Citation tools Wikimedia Labs Toolserver Automating editing Bots Creating Twinkle FurMe NPWatcher HotCat WPCleaner igloo AutoWikiBrowser Navigation popups STiki AfC helper script Huggle Relevant navigation Help pages Administrators Templates Referencing Citation metadata Accessibility Bots User scripts