Help talk:Tables

Let's keep it simple at the top and add tricks in extra sections down the page. Cheers :-) --Rogerhc 07:07, 4 September 2006 (UTC)

Page layout
The page is laid out as follows:
 * Under each heading is a 2 column parent table with the example table nested into its left column and the example's wiki markup in pre tags in the right column.
 * The parent table is width="100%" and the two columns containing the nested tables are each width="50%". Pre tags containing long lines in the right column override its width="50%" attribute in most browsers which is good flexible browser behavior.
 * None of the page's sectional headings, H1, H2, H3, etc. are within tables, except the one in the example of how to do that. This avoids the to some confusing problem that when one previews an edit section within a parent table the parent table previews as broken; broken because the part of it above the edit section previewed is outside of and thus not parsed in the section previewed.

This will work well in most browsers I think.

Let us know if the layout breaks anything in your browser and which browser and version that is.

--Rogerhc 17:44, 4 September 2006 (UTC)

Headings in tables
Of course, you can use headings within tables. Your above note on "MediaWiki not supporting this" is wrong. -- :Bdk: 11:11, 4 September 2006 (UTC)
 * Thank you. I have now added a section on Tables with H1, H2, H3 etc. headings. :-) Rogerhc 04:45, 5 September 2006 (UTC)

When using attributes on headings, you must be aware that, although the header starts with an exclamation mark '!', the attributes parameter is still divided by a vertical bar '|'.

Example:

It took me a while to find out why my table was not formatting correctly, until I found the reas, as described here. All worth a change I made in the main HELP page, section 'Basics>Table Headers'. JanEnEm 07:39, 18 July 2011 (UTC)

Tables in Excel (/Calc) converted to Wiki Markup
Is there any software available to convert an "Microsoft Excel" or "Open-Office Calc" table into a MediaWiki markup text document?

Would this be something people would consider usefull, as if it doesn't already exist, and there is a demand, I could a quick, basic one, as I use quite a few tables in my wiki.--Barryred


 * Yes! This would be absolutely helpful! --Nino Gonzales 04:10, 26 January 2007 (UTC)


 * See m:User talk:DBP.--Patrick 08:57, 26 January 2007 (UTC)

I've not tried this as I'm not a Python man but it might help. http://just-tech.blogspot.com/2007/01/python-html-tables-to-mediawiki.html --Dopple 09:27, 18 October 2007 (UTC)

On internet, several converters exists, one is excel2wiki.net

If there was a way for an extension to dynamically create and update an embedded excel (htm) file every time a wiki page loads or every time the excel base file was updated, that would be the coolest thing ever.

couple of conversion methods
With a newer OpenOffice (I have 3.2 on ubuntu 10.04), one can:


 * Open a new spreadsheet, design your table
 * Select your table cells, copy
 * Open a new text document
 * 'Paste Special' the copied  table cells as "HTML (HyperText Markup Language)" ["Formatted text (RTF)" does not seem to preserve formatting like color] in

At this point, one can directly export this table in Writer via File/Export - and choosing 'MediaWiki (txt)' as 'File type' (note that Calc does not have a 'Mediawiki export'; however, Writer does.)
 * Note, however, that this export seems to be buggy, in respect to not recognizing  cells (although, it seems to work with   cells correctly).

A better way for me, was to install wikEd (via Wikipedia:Tools/Editing tools); I installed it as a Greasemonkey script in Firefox.
 * Then, you can copy the html table from, and paste it in a wikEd editor - formatting should be visibly preserved...
 * However, to actually convert it into Mediawiki markup, remember that: "If you want to keep a certain formatting, a link, or a table, you can convert the formatted pasted text into wiki code by pushing the wikify button [w]" (from wikEd_help#Converting_to_wiki_code)
 * This method - through wikEd - seems to not have a problem neither with, nor   cells - nor font color..

Cellpadding doesn't work
Old discussion deleted since this issue was fixed

...but thanks to Splarka for figuring out where the problem was in the CSS and Bdk for fixing it. -- Harry Wood 12:10, 4 January 2008 (UTC)

CSS style background-image not working inside cell style
Inside a cell the style parameter seems not to accept the parenthesis in. See sample code:

Here is the table:

I tried using a template (like the  | ) and tried using &amp;#40; and &amp;#41;. Do I see/do something wrong? How could I solve this? Didn't find anything in the docs or discussions yet...

- 80.254.136.33 - 11:19, 14 February 2008


 * Yeah most CSS within the style attribute should work ok, but I think any mention of 'url' is forbidden. So you can't use background images.
 * I could be wrong about that, but style attribute checking happens in includes/Sanitizer.php in the checkCSS function, and the comments there mention that urls are forbidden.
 * Probably the reason is to prevent certain kinds of minor security issues, people trying malicious CSS tricks. There is a setting Manual:$wgAllowExternalImages which malicious users might try to devise a workaround for, using style urls like this.
 * -- Harry Wood 14:28, 14 February 2008 (UTC)
 * There is a CSS way to fake this, by adding the cell content to a DIV and position it relative to the entire height or width of the image back. I cannot workout the cell-height entirely though.
 * -- Kokkan 01:59 September 19 2010 (CET)


 * You can even add a class to ...?title=Mediawiki:common.css and include the class to the tabel cell

add to common.css, where the path can be path to an uploaded file inside the wiki itself: .MYBACKGROUNDCLASSNAME{ background-image: url(http://MYPATHTO/MYBACKGROUND.png); } You can use more css to format the behavior of the pic. f.e. repeat: norepeat; ...

insert to table cell: class="MYBACKGROUNDCLASSNAME"
 * I don't use this wiki, however, I wish to say this to whoever designed this beautiful, ingenious piece of code: thank you, thank you, thank you. 59.167.155.3 09:20, 5 June 2012 (UTC)

FWIW, I think the previous formatting was easier to read
This is better: http://www.mediawiki.org/w/index.php?title=Help:Tables&oldid=234654

The  foo   content inside of a bordered table is redundant...why use a box in a box?

Why not use  foo  (via   foo  ) instead?

Applicationswhisperer 18:45, 17 February 2009 (UTC)
 * I just tried to make it a little more consistent with other help pages, such as Help:Images and Help:Formatting. --Aotake 22:00, 17 February 2009 (UTC)

Rowspan
Mention rowspan. People will be wondering if it is implemented or not. Best to not leave them guessing. Jidanni 04:15, 26 April 2009 (UTC)

Table Footer?
I noticed that ! denotes a table header, but there doesn't seem to be a tag/indicator for a table footer

There isn't one. 'Bang' (!) corresponds to HTML's  (table header) tag. Pipe (|) corresponds to HTML's  (table data) tag. HTML does not have a 'table footer' tag. - Turing 07:26, 3 September 2009 (UTC)

HTML 5
See also W:MediaWiki_talk:Common.css. Jidanni 18:42, 19 August 2009 (UTC)

Borderless table
Hello everyone, I was wondering if anyone could tell me (or show me) how to make a borderless table, not one with a white border but with no border at all, thanks. Supaman89 (talk) 23:12, 6 October 2009 (UTC)

Answer:

Here is the table:

or

Here is the table:

Try this:

--Ayvengo21 09:28, 12 May 2010 (UTC)

Table Height
Hey, is there a way to specify a height cell- or table-wise? Bud0011 21:12, 25 September 2010 (UTC).

It can be specified cell-wise: Hamilton Abreu 23:53, 25 September 2010 (UTC)
 * Sweet, thank you. On a side note, do you know much about hooks? Bud0011 14:20, 26 September 2010 (UTC).
 * Nope, try Project:Support desk. Hamilton Abreu 16:10, 26 September 2010 (UTC)
 * Ok. Thank you. Bud0011 16:33, 26 September 2010 (UTC).

No text next to table
I have a table on a page: Trouble is the next header gets placed on the right side of the table and now I have to add a lot of br's. How do make up the table so no text is allowed on either side of it?

TIA!
 * Please elaborate on your problem. Examples of what i think you mean are in the collapsed table bellow
 * If you want no text in the next cell to the right, then placing no next cell to the right would help with that (Example #1).
 * If you are looking to clear both the sides of the table,  could help clear the text, like Example 2 bellow.
 * Example #3 uses margins to push the outside text away from the

{| class = "collapsible collapsed" width=100% style = "border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -icab-border-radius: 10px; -o-border-radius: 10px; border: 5px groove #000066;" ! width=25% | Example ! width=75% | Text

TEXT APPEAR OUTSIDE OF TABLE

TEXT APPEAR OUTSIDE OF TABLE


 * }
 * Hope this helps. Bud0011 15:56, 17 January 2011 (UTC).
 * Hope this helps. Bud0011 15:56, 17 January 2011 (UTC).

Tables messed up in theme change
When I changed the customizable page color (for the background), it messed up the wikitables, making the borders a different color and making the backgrounds match. While the matching/transparent background is fine, is there a way to make the borders stay the default black? <span style="border:4px solid; color:#9999CC; padding-top: 1px; background-color: white; -moz-border-radius:12px 12px 12px 12px; -webkit-border-radius:12px 12px 12px 12px; font-weight: bold;"> Neocarleen •  Talk  01:36, 17 February 2011 (UTC)

Mutliple Tables - Padding

 * I have a Template that builds a table using the Wiki syntax but when it is shown, instead of each table being on top of each other, there seems to be a natural "padding" or "margin" between the tables. Roughly 15 to 25px buffer between the tables.  Anyone know how i can get rid of this? Example: http://batheo.wikia.com/wiki/Quests/Attack#Rewards
 * Thanx in advance, Goldbishop 20:30, 2 March 2011 (UTC)

Table Restarts number Sequence
Hello people, say does anyone know how to use a table in a number sequence and not have the table restart it? I'll show you what I mean if I didn't make that clear:
 * 1) test
 * 2) test
 * 3) test
 * 4) See how the numbers start over at One here.
 * 5) How do I fix this???

March 8th 10:13am CST 2011

Table needs NewLine, which stops sequences. One solution is to manually start again the list with fixed number, using the  and   codes:


 * 1) test
 * 2) test
 * 3) test

<li>See, the numbers don't start over at One here. </li> <li>This is a possible fix</li> <li>But you have to manually fix the starting number to 4</li> </ol>

Align not working?
I've noticed that the align used in tables does not work anymore, even on older mediawiki versions? Any explanations?

Different text-align for different columns
How do I set up the wikitables so that the first column is align:left and the last column is align:right?

Advanced Layout
Can anyone advise on the best way to create the following layout, I'm creating a table with an Icon, then 8 pieces of data to the right of that, then another icon and 8 pieces of data adjacent.

This is my code;

! colspan="2" align="left" | <font face="Arial Black" size="5" style="text-transform: uppercase;"> Heading A ! colspan="2" align="left" | <font face="Arial Black" size="5" style="text-transform: uppercase;"> Heading B ! align="left" | Item A Detail 1: ! align="left" | Item B Detail 1: ! align="left" | Item A Detail 2: ! align="left" | Item B Detail 2: ! align="left" | Item A Detail 3: ! align="left" | Item B Detail 3: ! align="left" | Item A Detail 4: ! align="left" | Item B Detail 4: ! ! align="left" | Item B Detail 5: ! ! align="left" | Item B Detail 6: ! !
 * rowspan="8" valign="top" width="120" | [[File:Information.png|]]
 * rowspan="8" valign="top" align="center" width="150" | [[File:Example.jpg|]]
 * Item A Info 1
 * Item B Info 1
 * Item A Info 2
 * Item B Info 2
 * Item A Info 3
 * Item B Info 3
 * Item A Info 4
 * Item B Info 4
 * Item B Info 5
 * Item B Info 6

Result:

This is repeated down the page to allow for several levels of icons and their respective data, Nested templates sounds like a cleaner way to present this, however I've heard nested templates are a bad way to go from an SEO perspective, however the alternative means data in the wiki syntax is non sequential, So I'm jumping from Item A to Item B, which can't be good practise and mess up SEO?

Is there a better way to do this kind of layout, that is cleaner and will not affect SEO?

Repeating headers
In a large table, it might be user-friendly to repeat the header every 20 or ? rows. Might it be possible to add an option to the header that tells mediawiki to repeat the header automatically?

Section removed from article
[I removed the "Simple one-pixel table border" section, below, to this talk page because it is more information than is probably helpful and similar results are now achievable with the simpler class="wikitable" attribute] --Rogerhc (talk) 04:40, 15 December 2012 (UTC)

Simple one-pixel table border
The default table formatting uses the "border-collapse: separate" model, which adds table cell spacing (which also separates the table outer border from its content cells). Even with a zero cellspacing, the borders of consecutive cells (and of the overall table container) will add up, so to get a one-pixel separation between cells, you need to selectively remove one or more of the four borders of cells.

Such tables may be formatted more simply, using the "border-collapse: collapse" CSS property; in this table formatting model, the cellspacing attribute (or the CSS "border-spacing:" property) and the table's "padding:" CSS property is ignored and only the larger border of adjacent inner cells (or the table border for outer cells) will be used.

An example of the above for one-pixel table border, using each model (without need for external extensions):

{| class="wikitable" ! You type ! You get <pre style="font-size: 80%">
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 20px;"|

<pre style="font-size: 80%">
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 20px;"|


 * }

Notes :
 * When using the "border-width:" CSS shortcut property, the order of the four space-separated specified values is: top, right, bottom, left. As an example from above:
 * "border-width: 0 1px 0 0"
 * When there are fewer than 4 values, the value for left takes its default from the value for right, the value for bottom takes its default from the value for top, and the value for right takes its default from the value for top.


 * The HTML attributes (such as "width=", "border=", "cellspacing=", "cellpadding=") do not need any length unit (the pixel unit is assumed). The CSS style properties (which override the HTML attributes) require an explicit length unit (if the value is not 0) such as "px" for the pixel.