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 Help:Tables page is laid out as follows:

• Under each heading is a 2 column parent table with the example table nested into its right column and the example's wiki markup in pre tags in the left column.
• The parent table is width="100%" and the two columns containing the nested tables are each width="50%". Pre tags do not line wrap so please keep the example wikitext lines short within the pre tags, so that the presentation does not get messed up.
• 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 keeps the sections easier to edit.

(Updated above text) --Rogerhc (talk) 06:19, 15 December 2012 (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:

Heading
tekst

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

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 (Calc) spreadsheet, design your table
• Select your table cells, copy
• Open a new (Writer) text document
• 'Paste Special' the copied Calc table cells as "HTML (HyperText Markup Language)" ["Formatted text (RTF)" does not seem to preserve formatting like color] in Writer

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 rowspan cells (although, it seems to work with colspan 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 Writer, 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 rowspan, nor colspan cells - nor font color..

A possibly simpler route

A possibly simpler route using Libre Office Calc (and maybe Open Office since they're related):

• File, Save As... HTML (Don't export as HTML, as this does something diferent.)
• Open the new file in notepad etc.. and copy/paste to http://bmanolov.free.fr/html2wiki-tables.php#wiki
• Click convert. Copy/Paste result to MediaWIki editor.
• Trim off everything before the first "{|" and after the last "|}" and preview.

This got about 95% of the formatting correct, which is not bad for this kind of conversion.

NOTE: When I tried "Save as HTML" in MS Excel, it saved it as generated javascript, so I didn't pursue that too far. --Lensman99

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)

AFAICS this problem still exists. Maybe I am missing something, but:

{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="50"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Gives (note the cellpadding="50" above):

Orange	Apple
Bread	Pie
Butter	Ice cream

Maybe I am missing something.

--Mikepeat (talk) 16:30, 1 June 2014 (UTC)

class="wikitable" overrides it. That's because cellpadding is not a CSS property, and it's deprecated, while the wikitable class defines the padding on each cell, which is more specific than cellpadding on the table. You should either remove the wikitable class from the table, or specify the padding on each cell (style="padding:50px;") --Ciencia Al Poder (talk) 09:16, 2 June 2014 (UTC)

---

EXAMPLE

{|class=wikitable 
| style="padding:10px;"  | (<code>style="padding:10px;"</code>)
|-
| style="padding:50px;"  | Specify the padding on '''EACH CELL''' (<code>style="padding:50px;"</code>)
|-
| style="padding:100px;"  | (<code>style="padding:100px;"</code>)
|}

Creates:

(style="padding:10px;")

Specify the padding on EACH CELL (style="padding:50px;")

(style="padding:100px;")

Flylikeaseagull (talk) 16:07, 3 August 2018 (UTC)

CSS style background-image not working inside cell style

Inside a cell the style parameter seems not to accept the parenthesis in background-image:url(/path/to/image.png);. See sample code:

{| border="1" 
| style="background-image:url(head.jpg); width:300px;" | fooo...
| style="width:100px;" align="right" | working style
|}

Here is the table:

fooo...

working style

I tried using a template (like the {{!}}) and tried using ( and ). 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)

{| border="1"
   ||[[File:information.png]]<div style="position: relative; left: 0px; top: -256px; height: 100px; ">fooo... </div>
  | style="width:100px;" align="right" | working style
  |}

fooo... Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

working style

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 <pre> foo </pre> content inside of a bordered table is redundant...why use a box in a box?

Why not use foo (via <code> foo </code>) 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 <th> (table header) tag. Pipe (|) corresponds to HTML's <td> (table data) tag. HTML does not have a 'table footer' tag. - Turing 07:26, 3 September 2009 (UTC)

HTML does have a 'table footer' element, since html 4 (1998). The tag is <tfoot>.

:q! Colin Q Bang (talk) 17:42, 6 October 2017 (UTC)

HTML does have a <tfoot> tag, corresponding to <thead>, but the Wikitables syntax supports neither.

(<thead> is different from <th>, which as Turing said is what ! creates; the former denotes the header section for the table itself, the latter denotes a header cell within a table row <tr>...</tr>. <th> cells can appear inside a <tr> in any table section: <thead>, <tbody>, or <tfoot>.)

In HTML5 a table's structure is technically this...

<table>
 <caption>Optional</caption>
 <colgroup><col><col><col></colgroup>
 <colgroup span=3> <!-- Equivalent to previous -->
 <thead>
  <tr>
   <th>Optional header labels</th>
   <th>...</th>
   <th>...</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Optional header cells</th>
   <td>Optional data cells</td>
   <td>...</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <th>Optional footer labels</th>
   <th>...</th>
   <th>...</th>
  </tr>
 </tfoot>
</table>

(Technically it's even more complex/flexible, and it's perfectly legal HTML to place <td> inside the <thead> or <tfoot> as well.)

Wikitables predate widespread support for any of that enhanced structure, and will place all table content, including rows consisting only of <th> cells, inside the<tbody>. The only exception is the caption, which does go into a <caption>...</caption> element. FeRDNYC (talk) 08:38, 16 April 2023 (UTC)

HTML 5

See also W:MediaWiki_talk:Common.css#Wikitable borders disappear in email, blogs, disks, mobile devices. 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:

{| border="0" 
|colspan="2" bgcolor="blue"|explicit
|-
|bgcolor="red"|borderless
|bgcolor="green"|table
|}

Here is the table:

explicit
borderless	table

or

{|
|colspan="2" bgcolor="blue"|implicit
|-
|bgcolor="red"|borderless
|bgcolor="green"|table
|}

Here is the table:

implicit
borderless	table

Try this:

{| style="border-spacing: 0px;"
|colspan="2" bgcolor="blue"|implicit
|-
|bgcolor="red"|borderless
|bgcolor="green"|table
|}

implicit
borderless	table

--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:

a

b

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:
{| border = "1" align="left" style="width:100%; background-color:#FFFFCC; color:black" | none !style="color: blue; font-style:italic"| Poort # |}
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

1. 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).
2. If you are looking to clear both the sides of the table, <div style="clear:both;"> could help clear the text, like Example 2 bellow.
3. Example #3 uses margins to push the outside text away from the

Example	Text
Example #1 cell-to-the-right TEXT APPEAR OUTSIDE OF TABLE	{| border = "1" align="left" style="width:70%; background-color:#FFFFCC; color:black" | none !style="color: blue; font-style:italic"| Example #1 !style="color: blue; font-style:bold;" | cell-to-the-right |}TEXT APPEAR OUTSIDE OF TABLE
Example #2 TEXT APPEAR OUTSIDE OF TABLE	<div style="clear:both;"> {| border = "1" align="left" style="width:70%; background-color:#FFFFCC; color:black;" | none !style="color: blue; font-style:italic"| Example #2 |} <div style="clear:both;">TEXT APPEAR OUTSIDE OF TABLE
Example #3 TEXT APPEAR OUTSIDE OF TABLE	{| border = "1" align="left" style="width:70%; background-color:#FFFFCC; color:black;Margin:20px;" | none !style="color: blue; font-style:italic"| Example #3 |}TEXT APPEAR OUTSIDE OF TABLE

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? Neocarleen • Talk 01:36, 17 February 2011 (UTC)

umm, did you try changing the border color? 58.11.147.228

Multiple 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

Documentation Required:	other

1. See how the numbers start over at One here.
2. 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 ol and li codes:

1. test
2. test
3. test

Documentation Required:	other

4. See, the numbers don't start over at One here.
5. This is a possible fix
6. But you have to manually fix the starting number to 4

Align not working?

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

See https://bugzilla.wikimedia.org/show_bug.cgi?id=36495 Cursich (talk) 22:38, 22 February 2013 (UTC)

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?

If you don't want to specific | style="text-align: [right/left];" | cell content for every single cell, you can set the whole table to a specific alignment by: {| class="wikitable" style="text-align: right;" and then | style="text-align: left" | cell content for the cells in the first column.

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;

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

Result:

	Heading A			Heading B
	Item A Detail 1:	Item A Info 1		Item B Detail 1:	Item B Info 1
	Item A Detail 2:	Item A Info 2		Item B Detail 2:	Item B Info 2
	Item A Detail 3:	Item A Info 3		Item B Detail 3:	Item B Info 3
	Item A Detail 4:	Item A Info 4		Item B Detail 4:	Item B Info 4
				Item B Detail 5:	Item B Info 5
				Item B Detail 6:	Item B Info 6

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?

I also think that at least, some good practice should be written down somewhere. Jona (talk) 11:32, 29 March 2018 (UTC)

Simple one-pixel table border

I don't understand what this section is about. It may be better moved to a Help:Advanced Tables page. I will leave it in the Help:Tables page for now. But someone may want to remove it. Really, how does it help folks? Who is going to want all that cruft in their wiki markup? --Rogerhc (talk) 06:08, 15 December 2012 (UTC)

Fixed your grammar mistake. 58.11.147.228 00:06, 8 May 2013 (UTC)

Text is overriding row height even if the font is small

I tried pixels and percentages and it only works if the entire row is empty, even if I set the font size with the html font tag to somethign really small, it doesn't work. How can I edit the actual classes for my wiki?--88.104.102.18 12:42, 2 April 2013 (UTC)

It seems I can only make the row height bigger, not smaller, small font sizes still do not work, I have tiny text surrounded by pointless space.

Table centering?

How to center tables in the middle of a page? 58.11.147.228 00:04, 8 May 2013 (UTC)
Place your tables between the center tag — Preceding unsigned comment added by 134.174.140.67 (talk • contribs)

Don't do that! Use style="margin:auto;". I've updated the page explaining it. --Ciencia Al Poder (talk) 11:07, 14 December 2013 (UTC)

too complex for the average editor

"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):"

really? too complex for the average editor to understand or care about. Igottheconch (talk) 15:38, 11 October 2013 (UTC)

In wikitable change the font colore to better readable

There can i change the font color in the last table (Sample 3), the colore can't change to a other on
Sorry for my bad english ;)

Sample 1

Sample 2

Sample 3

--Shadowslight (talk) 12:27, 21 October 2013 (UTC)

Problem with Vertical align on nested tables

So I have a big table with lots of rows and columns inside a small 2 columns table, the table is nested on the 1st colummn and I want to have simple text, vertical aligned on the second column, but I can't figure it out because even after creating the table and assigning the valign attribute the text does not centers vertically. Any help with this? --Kanecow (talk) 12:31, 30 January 2014 (UTC)

Automatically Summing Table Column

If you allow Raw HTML and JavaScript in your mediawiki installation, then you can use this script below to sum up your columns as you would in a spreadsheet. --Brett.Dutton (talk) 00:57, 25 June 2014 (UTC)

Add this to LocalSettings.php

$wgRawHtml = true;

{|  id="resource"
|- style="background:silver; color:black"
|Dept || Effort Estimate<br/>(person Hours) || Comments
|-
| Analysis || 5 ||  
|- 
| Solutioning || 5 ||  
|- 
| UI || 5 ||  
|- 
| Dev || 5 ||  
|- 
| Documentation || 5 ||  
|- 
| QA || 5 ||  
|- style="background:silver; color:black"
| Total || <span id="resource_sum">TOT</span> ||   |
|- 
|}

<html>
<script type="text/javascript">
    function sumColumn( id, col ) {
        var total = 0;
        var mytable = document.getElementById( id );
        for ( var v=1; v < mytable.rows.length - 1; v++ ) {
            total += parseInt( mytable.rows[v].cells[col].innerHTML );
        }
        document.getElementById( id + '_sum' ).innerHTML = total;
    }
    sumColumn('resource', 1 );
</script>
</html>

Making long table a "two-column" layout on the page

It there a way to make a very long table (with multiple columns within the table itself) into two side-by-side sections on page in a "two-cloumn" format (similar to breaking up a long list of footnotes into a multi-column section of footnotes)...? Lestatdelc (talk) 02:18, 9 February 2016 (UTC)

XHTML, HTML 5 and attributes

This page talks a lot about XHTML, but the (default) output of MediaWiki is actually HTML 5. Should all references be changed to "HTML"? In particular the section "XHTML attributes" links to the HTML 4.01 spec, which is obviously neither the XHTML spec nor the spec for HTML 5. I can only assume this is a mistake. Considering the first release of MediaWiki was in 2002, two years after the XHTML 1.0 spec, did it ever output HTML 4.01?

Second, this page currently suggests using width, border, cellspacing and cellpadding table attributes. But these have all been deprecated since HTML 4.01 and are all obsolete in HTML 5 (except that border="" or border="1" may be used to indicate a table that is not used for layout); using them results in invalid HTML 5, though browsers are generally patient enough to respect them. The spec provides that these should be replaced with CSS. Unfortunately you can't do this for a table created with wiki markup because you can't add CSS inline (unless the CSS extension is enabled, which it isn't on Wikimedia) and there is no markup for ‎<colgroup>. Hairy Dude (talk) 19:29, 4 March 2016 (UTC)

I took the liberty of replacing the outdated reference to the HTML 4.01 spec with the current one. Hairy Dude (talk) 19:36, 4 March 2016 (UTC)

Showing/hiding certain rows based on parameters

I would like to build a table that hides rows with certain parameters unless a box is ticked.

Header 1	Header 2
Item 1	Param 1
Item 2	Param 2
Item 3	Param 1
Item 4	Param 2
Item 5	Param 3

[x] Show params 2 and 3

In this example, I would like items 2, 4, and 5 to be hidden by default because they have Params 2 and 3.

Header 1	Header 2
Item 1	Param 1
Item 3	Param 1

[_] Show params 2 and 3

Is this possible? If so, how would I go about doing this? — Preceding unsigned comment added by RFlan (talk • contribs)

MediaWiki doesn't provide a way to do that. It can only be done with JavaScript. You should ask on any JavaScript support forum how to do that. Once you got a working JavaScript code, you can load it in MediaWiki following Manual:Interface/JavaScript --Ciencia Al Poder (talk) 15:49, 31 December 2016 (UTC)

Wikimarkup -> html conversion

Hi, does anyone have a function to convert Wikitables to normal html tables in a Lua module ? Wikitables sometimes have a weird behavior indide template, and that's a problem. See Commons:Module talk:Artwork. --Zolo (talk) 11:52, 12 March 2017 (UTC)

Reverted edit

Just a temporary note: Current Problem, with using tables. If you use the clipboard, while splitting large tables horizontally and edit undo and then repeat, edit undo, and then do it vertically. It sometimes stops functioning the Save feature of Open Office and then eventually the program fails.

What Exactly Happened. 60 plus row, Colum 3. In the clipboard was pasting of titles for the left. Spilt the cells in the middle, horizontal, Undo, then split vertical, System crashed repeatedly. Thought it was the internet, so started working offline, it happened 9 times in the last hour of working with the program, with the intent to create the problem again. So I would say its a repeatable error.

I have no idea where this is supposed to go, but it shouldn't go were it original was placed (Special:Diff/2505694/2528418) —Mainframe98 _talk 08:42, 1 August 2017 (UTC)

transcluding into a cell

Plain text works alright ie. Enclosing page name in curley braces

<td>This </td> Does not transclude

Help please Mikhat (talk) 02:14, 29 October 2017 (UTC)

Try to transclude the contents of the cell and not the cell itself. --Ciencia Al Poder (talk) 16:19, 29 October 2017 (UTC)

Global "Show/Hide All" button

I have a wiki page on which there will be 25 tables, each with 200 rows. For easier navigation, only the current table is expanded. All of the other tables are collapsed. Eventually all of the tables will start up collapsed. However, users may want to search for content that may appear in any of the tables. To search for content in all of the tables via the browser search function, it will be necessary to first expand all of the tables. Hence, I am looking for some way to create a button that would "Show/Hide All". (To manually expand all 25 tables would be extremely tedious.)

Somewhere I found a suggestion to add some code to the MediaWiki:Common.js page:

$(function() {
    $('#collapse-global').html('<a class="mediawiki-button" onclick="for (var i=0; i<50; i++) { "wikitable sortable collapsible collapsed"([i]); }">Show/Hide All</a>');
});

Afterwards, a button may be loaded on the relevant page with:

<div id="collapse-global">Loading...</div>

The button appears on the page, but it does nothing. So I assume that the js code is incorrect. Is there anyone who can provide the correct code or guide me on how to achieve the desired result? --Abhidevananda (talk) 12:37, 2 November 2017 (UTC)

Use this code:

$(function() {
	var $collapseglobal = $('#collapse-global');
	if ( $collapseglobal.length > 0 ) {
		$collapseglobal.html('');
		$('<a class="mediawiki-button">Show/Hide All</a>').on('click', function() {
			$('a.mw-collapsible-text').trigger('click.mw-collapsible');
		}).appendTo($collapseglobal);
	}
});

Note it will toggle the current state of each collapsible individually, not make all of them visible/hidden, which seems to be more complicated --Ciencia Al Poder (talk) 10:41, 3 November 2017 (UTC)

Thanks for the suggestion, Ciencia Al Poder. I have tried adding that code to the bottom of my MediaWiki:Common.js file and tested the button. As with the previous code, this one too seems to do nothing at all except load the button on to my test page. But clicking the button has no impact on the status of the tables. You may see my MW:Common.js file with your code in it here and test it here. Also, what I really need is to be able to expand all of the tables with a single click. Would your code do that? --Abhidevananda (talk) 13:28, 3 November 2017 (UTC)

My code works only for Manual:Collapsible elements made with "mw-collapsible" class, not other custom collapsible things. Your wiki seems to be using a different collapsible code. Also, some script of your wiki seem to cause an error, at least one appears in the error console, which may cause some scripts to not function properly. My code will expand all tables if all tables are collapsed. --Ciencia Al Poder (talk) 16:14, 3 November 2017 (UTC)

Thanks. I am pretty sure that we don't use any custom collapsible code, but I also see various errors on the page. This is probably the consequence of a recent MediaWiki upgrade of several major versions. I will look into it and see if resolving those errors solves the problem. --Abhidevananda (talk) 17:16, 3 November 2017 (UTC)

I have resolved the various minor errors that could be resolved (by one with the limited skills that I have). In the error console for Internet Explorer and Microsoft Edge, there are 0 errors showing. In Firefox (x64), there remain two errors, both of which apparently relate to Java (which is not supported by the 64-bit Firefox). That said, the Show/Hide All button does not work in any of the browsers. So it does not appear that the remaining errors that show up in Firefox have anything to do with the functionality of the button. And that brings us back to the question of "different collapsible code"... and I really have no idea why or how my wiki would be using that. Any suggestions about where to look or what to change? --Abhidevananda (talk) 04:58, 4 November 2017 (UTC)

Your table is using class="collapsible" which is a custom functionality provided by your MediaWiki:Common.js (search for it on the page), whereas you should use class="mw-collapsible" for my code to work, since this is the "integrated" collapsible code provided by MediaWiki, which I linked before. --Ciencia Al Poder (talk) 11:51, 4 November 2017 (UTC)

Ciencia, first let me say that I totally, really, greatly appreciate your help and advice. But I am completely out of my depth here. I have followed your link to Manual:Collapsible elements and copied the source code under Collapsible tables into my MediaWiki:Common.js file (replacing and reverting version 2.0.3 with version 2.0.2). But this had no noticeable effect. I also tried a number of other minor changes, but none of them achieved anything... except occasionally to break the collapsible function altogether. So, after all my testing, I am right back where I started. If you might be interested to take on a consulting administrative role on my humble wiki, I'd be most happy to have you on board. Regrettably, my former technical genius and admin, a great man, seems to have retired. --Abhidevananda (talk) 14:31, 4 November 2017 (UTC)

Please read carefully the page you've linked. The important parts here: the first phrase: This module is in MediaWiki core by default as of MediaWiki 1.18 and higher. Add the class mw-collapsible to any element (div, table, list, anything) to trigger it. This is all you need to do. Remove all collapsible code from your MediaWiki:Common.js and start using the mw-collapsible class instead of collapsible. --Ciencia Al Poder (talk) 10:23, 5 November 2017 (UTC)

Wow... I will give that a try in a few hours... in a meeting now. I never would have thought to completely remove all of that material, given that it still appears in the Wikipedia Common.js file and that the manual subsequently gives the same type of content. But what you say makes sense. I'll let you know how it turns out. Thanks. --Abhidevananda (talk) 15:21, 5 November 2017 (UTC)

Okay, it's probably another stupid mistake on my part, but I still can't get the Show/Hide All button to work. I have removed the roughly 100 lines of code in my Common.js for "collapsible tables". (I did not remove the code about collapsible navbars, because I did not figure it was relevant; and I wasn't clear where to start and end cutting.) It would be a lot easier if there is a sample Common.js on MediaWiki or Wikipedia that I could copy as a base. (I don't seem to be able to view the Common.js on MediaWiki,and the Common.js on Wikipedia still uses the old collapsible code.) Anyway, see my current, somewhat edited Common.js here. I also changed the class of my tables to be "mw-collapsible mw-collapsed sortable wikitable"... resulting in roughly what I had before. But the Show/Hide All button on the target page does not load. Before it was loading and doing nothing, but now it does not load. See here. So maybe that code should read differently? --Abhidevananda (talk) 17:48, 5 November 2017 (UTC)

The error console displays a big error... ReferenceError: collapseCaption is not defined. This comes from your Common.js. If the errors aren't fixed, scripts may not work... --Ciencia Al Poder (talk) 20:08, 5 November 2017 (UTC)

Ciencia, thanks for your patience. So I removed all of the code about navbars showing and hiding and so on. As I said, this would be so much easier if there was just a barebones version of Common.js that we could see and copy. But, anyway, the collapseCaption error is gone now; and the Show/Hide All button loads again. But it still does nothing. As far as I can tell, it doesn't expand or collapse any tables. --Abhidevananda (talk) 21:59, 5 November 2017 (UTC)

Ok, the problem now is that I tested my code against the current version of MediaWiki used here, which changed some behavior from the version you're using. This is the fixed code that should work on both:

$(function() {
        var $collapseglobal = $('#collapse-global');
        if ( $collapseglobal.length > 0 ) {
                $collapseglobal.html('');
                $('<a class="mediawiki-button">Show/Hide All</a>').on('click', function() {
                        $('.mw-collapsible-toggle a').trigger('click.mw-collapsible');
                }).appendTo($collapseglobal);
        }
});

--Ciencia Al Poder (talk) 10:29, 7 November 2017 (UTC)

Eureka!!! It works perfectly... see here. Ciencia, you are a star! --Abhidevananda (talk) 12:22, 7 November 2017 (UTC)

Side-by-side Tables

You can also place tables side by side by adding style="display: inline-table;" to the opening of your table. For example:

{| class="wikitable" style="display: inline-table;"
|+Table 1
|-
! Name
! Color
|-
|Fred
|Orange
|-
|Bob
|Green
|-
|Lindy
|Yellow
|}
{| class="wikitable" style="display: inline-table;"
|+Table 2
|-
! Animal
! State
|-
|Racoon
|Maine
|-
|Whale
|Alaska
|-
|Manta Ray
|Florida
|}

Gets:

Table 1

Name	Color
Fred	Orange
Bob	Green
Lindy	Yellow

Table 2

Animal	State
Racoon	Maine
Whale	Alaska
Manta Ray	Florida

--Evanlamarr88 18:30, 11 May 2018 (UTC)

Suggestion for Section on Cell Widths

I'm a rookie trying to learn formatting. Adding text and background colors to the example table for controlling cell widths created a bunch of noise. Perhaps the following table, which adds the wikitable class and removes the coloring attributes, might be better?

This column width is 85% of the screen width
This column is 30% counted from 85% of the screen width	This column is 70% counted from 85% of the screen width

— Preceding unsigned comment added by 192.91.171.34 (talk • contribs)

Done, thanks. --Ciencia Al Poder (talk) 10:01, 2 September 2018 (UTC)

Issue with Table Templates

I've setup three templates on my personal Wiki so that I can with ease add a table as a Template variable. The issue I ran into with them however, is that the last cell on each row is experiencing some weird formatting issues. The text in the last cell on each row is always located at the very top of the cell, regardless of whether or not I use html attributes to try and move it. I can move it horizontally, but not vertically. This applies to the header as well.

I am using parserfunctions and variables to control the amount of columns on each row.

I use them like this:

{{Table\Start|Header1|Header2}}

{{Table|Row1Item1|Row1Item2}}

{{Table|Row2Item1|Row2Item2}}

{{Table\End}}

The templates are as follows:

Table\Start

{| class="wikitable"

{{#if: {{{1|}}} |! {{{1|}}}| }}

{{#if: {{{2|}}} |! {{{2|}}}| }}

{{#if: {{{3|}}} |! {{{3|}}}| }}

{{#if: {{{4|}}} |! {{{4|}}}| }}

{{#if: {{{5|}}} |! {{{5|}}}| }}

Table

<includeonly>|-

| {{{1|}}} {{#if: {{{2|}}} | {{!}}{{!}} {{{2|}}} }} {{#if: {{{3|}}} | {{!}}{{!}} {{{3|}}} }} {{#if: {{{4|}}} | {{!}}{{!}} {{{4|}}} }} {{#if: {{{5|}}} | {{!}}{{!}} {{{5|}}} }}

</includeonly>

Table\End

<includeonly>

|}

</includeonly>

Tables feature request: Sticky headers & Sticky left column

Feature request for Tables (specifically useful for large tables that extend beyond the page.

• Pink: Sticky headers (as you scroll, you can still see the column header)
• Blue: Sticky left side column (usually used for the "name" of the item)

I'm not sure if this is where I can put feature requests, if I need to move this elsewhere, please let me know I will gladly do so :)

--Mapmaker345 (talk) 00:36, 27 January 2019 (UTC)

Mapmaker345, I would also like to see this feature implemented. However, instead of all leftmost columns, it's better to apply stickiness to row headers only (typed with !scope=row|…), as not all tables require their left column to be sticky. Also, we shouldn't enable this on all tables automatically—there are lots of tiny tables for which sticky headers would be unnecessary and even distracting. — UnladenSwallow (talk) 16:56, 17 April 2020 (UTC)

see phab:T42763 and phab:T289817 and w:en:MediaWiki:Gadget-StickyTableHeaders.js --AKlapper (WMF) (talk) 11:30, 20 May 2023 (UTC)

Change background color per column

Is there a way to change the background color per column?

Say I have a table that has 4 columns in it and i want the fourth column to have a black background, how would I do that? — Preceding unsigned comment added by 24.205.199.32 (talk • contribs)

You'll need to set a background for each cell. There's no way to define the style for columns, unless you use CSS stylesheets to affect "the nth child cell of each row" (which may not be the desired column if you use rowspan or colspan). --Ciencia Al Poder (talk) 09:24, 4 June 2019 (UTC)

so how do i do that then? can i have individual backgrounds per cell or would all of them have to have a black background 24.205.199.32 20:40, 4 June 2019 (UTC)

Header text	Header text	Header text
Example	Example	Example
Example	Example	Example
Example	Example	Example

See the example above. --Ciencia Al Poder (talk) 09:31, 5 June 2019 (UTC)

hey that did it! cheers. 24.205.199.32 22:46, 5 June 2019 (UTC)

Questions about columns sorting

1. Is it possible to have a table presorted? In other words I mean without the user having to click the header for the initial sorting to happen.
2. Is it possible to treat multiple columns that share the same header as one column during sorting? For example if the table is sorted in alphabetic order the 2nd column should start with the word that follows alphabetically the last one of the first column and so on.

--Costas Athan (talk) 06:50, 14 April 2020 (UTC)

Neither of the questions are possible right now. --Ciencia Al Poder (talk) 19:47, 16 April 2020 (UTC)

Outdated information on what row groups are rendered

The "Common attributes for columns, column groups and row groups" subsection of the "Caveats" section says:

All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element <tbody></tbody>) without any attributes or styles.

This information appears to be out-of-date. The header rows are now rendered inside <thead></thead>. — UnladenSwallow (talk) 16:41, 17 April 2020 (UTC)

No, it is not out-of-date. Those headers are converted into <thead></thead> only if you make the table sortable, and this is done by JavaScript, but the original HTML spit from MediaWiki doesn't contain thead. --Ciencia Al Poder (talk) 12:53, 19 April 2020 (UTC)

Two lines without possible translation

Related to the help text:

• Padding, and the next line with
• You type You get

--Jmarchn (talk) 15:50, 25 August 2020 (UTC)

Done, thanks for pointing this out. --Ciencia Al Poder (talk) 20:28, 25 August 2020 (UTC)

Content change proposals

@Ciencia Al Poder:

• 3.7.1 Attributes should be renamed to Attributes on caption and headers and moved it after 3.3 Attributes on rows. Then change its example to (for example):

{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|''Food complements''
! style="color:green" | Fruits
! style="color:red" | Fats
|-
|Orange
|Butter
|-
|Pear
|Pie
|-
|Apple
|Ice cream 
|}

Food complements

Fruits	Fats
Orange	Butter
Pear	Pie
Apple	Ice cream

• Change (because it is not exactly a padding):

====Column width====

for

===Column width===

--Jmarchn (talk) 20:39, 29 August 2020 (UTC)

Done. thanks! --Ciencia Al Poder (talk) 11:19, 1 September 2020 (UTC)

@Ciencia Al Poder:

In "Attributes on caption and headers":

• You added column headers (as I proposed), but not column content has been update (which is not appropriate, i.e. apple is not a fruit!).
• It is necessary to add Fruits, Fats and Pears to be able to translate. Or only Fruits and Fats deleting the row where Pears is.

--Jmarchn (talk) 06:53, 2 September 2020 (UTC)

Ok, I think this should work now. --Ciencia Al Poder (talk) 10:47, 2 September 2020 (UTC)

Are scope=rowgroup and scope=colgroup supported?

It is not clear to me in Help:Table#Caveats. The Caveats section. Am I correct in reading it to mean that scope=rowgroup and scope=colgroup are not supported?

Search for scope="colgroup" in this article:

• HTML table advanced features and accessibility. From Mozilla developers.

See the section titled "Tables for visually impaired users".

Here is the example table there:

Items Sold August 2016

		Clothes			Accessories
		Trousers	Skirts	Dresses	Bracelets	Rings
Belgium	Antwerp	56	22	43	72	23
	Gent	46	18	50	61	15
	Brussels	51	27	38	69	28
The Netherlands	Amsterdam	89	34	69	85	38
	Utrecht	80	12	43	36	19

--Timeshifter (talk) 09:44, 15 February 2021 (UTC)

Looks like you're confusing the <colgroup> HTML element with the scope="colgroup" attribute. The former is not supported. The latter is supported. --Ciencia Al Poder (talk) 11:55, 15 February 2021 (UTC)

Thanks! I am trying to figure out scope tags, and under which circumstances they are really needed by visually-impaired people with screen readers. Especially the latest free open-source screen readers. --Timeshifter (talk) 23:51, 18 February 2021 (UTC)

How to add empty space?

Okay, so I have this table:

1	2	3
4	5	6
7	8	9

If I add a new cell to any row, it will create a new column with a cell in it:

1	2	3
4	5	6
7	8	9	10

1	2	3
4	5	6	6.5
7	8	9

1	2	3	3.5
4	5	6
7	8	9

And I can also remove the final cell from any row, creating a gap in the final column.

1	2	3
4	5
7	8

But I can't, for example, remove cell 8 without changing the positions of 7 and 9, and I can only add a new cell to the bottom of column 1. How do I remove one or more cells not at the end of a row while leaving all other cells in place?

In other words, how do I create an empty gap in a table?

Creating an empty cell instead of them doesn't work, as (1) the background may be a different color from the cells and (2) you can't do a non-rectangular area like this:

1	2	3
4	5
7

73.220.135.34 21:11, 10 October 2021 (UTC)

You have to add an empty cell. About the background, the wikitable CSS class explicitly adds a background color to cells. If you want a "transparent" cell, set it to a transparent background:

1	2	3
4	5
7		9

--Ciencia Al Poder (talk) 12:58, 11 October 2021 (UTC)

Is there a way to remove borders so it looks like a non-rectangular cell? 73.220.135.34 15:07, 11 October 2021 (UTC)

Tables automatic width/height adjustment

I have some tables (a variable number), nested in a parent one. I need them to automatically fill all the space (width and height) they have available, sharing it equally, is it possible to do so? I tried looking on the wiki but couldn't find any mention about it. Cavans99 (talk) 01:50, 14 January 2022 (UTC)

Do you have a link? Nested tables are not usually a good idea. There are other options. See:

Wikipedia:Help:Table#Nested tables

w:Help talk:Table#Help page nests tables

On that help page the many nested tables are in the process of being removed. See the history.

If you are trying to fill a horizontal space, and allow wrapping, see:

w:Help:Table#Side by side tables

--Timeshifter (talk) 16:48, 14 January 2022 (UTC)

Thank you for the help, another user suggested me an alternative solution that seems to work perfectly in this case. I'll report it here in case anyone else may need it as future reference:

{| width="100%" style="text-align: center; border: 3px solid #000; background: #FFF; table-layout: fixed"
! colspan="4"| Table
|-
| style="vertical-align: top" |
{| style="background: #e1e1e1; border: 1px solid #000; width: 100%"
|- style="background: #FFF"
|Nested 1
|-
|}
| style="vertical-align: top" |
{| style="background: #e1e1e1; border: 1px solid #000; width: 100%"
|- style="background: #FFF"
|Nested 2
|-
|2
|-
|2
|}
| style="vertical-align: top" |
{| style="background: #e1e1e1; border: 1px solid #000; width: 100%"
|- style="background: #FFF"
|Nested 3
|-
|}
| style="vertical-align: top" |
{| style="background: #e1e1e1; border: 1px solid #000; width: 100%"
|- style="background: #FFF"
|Nested 4
|-
|4
|-
|}
|}

Cavans99 (talk) 13:58, 19 January 2022 (UTC)

Rendered result:

Table
Nested 1	Nested 2 2 2	Nested 3	Nested 4 4

--Timeshifter (talk) 09:18, 20 January 2022 (UTC)

Can I pre-define the number of characters in tables?

Hi, is that possible to predefine how many characters can be typed per each field? Lmdg2000 (talk) 13:35, 24 September 2022 (UTC)

Global attributes

Global attributes aren't limited to style.

Group examples 3.1, 3.2, 3.3 and 3.4 together under 3.1.1, 3.1.2, 3.1.3 and 3.1.4 respectively. The new section 3.1 may have "Global attributes" as its name.

Add more references for further reading:

1. "Global attributes" on MDN
2. "3.2.6 Global attributes"

Viu54071 (talk) 06:55, 24 January 2023 (UTC)

Global attribute style is over presented with about 10 examples...

These examples are not limited to tables and can be covered as separate page.

The style attribute is quite old and many may know it... (redacted) 14:09, 25 January 2023 (UTC)

Padding layout is partially out of the page

In padding section, the rightmost part of 'You get' is out of the page ...intentionally ? -- Christian 🇫🇷 FR (talk) 14:08, 13 March 2023 (UTC)

@Wladek92: All depends on your screen size / window width — at certain widths, both columns fit on the page with no problems. At other widths, the right column is too large to fit its allotted space. If the page is being displayed really narrow, it'll happen to other examples as well; first ones to go over (after padding) are the "Shopping List" in colspan and rowspan and the second example in minimal syntax because that one long code line won't permit the left side to shrink beyond a certain point.

Really, the entire page should probably be updated to present the examples in an over/under fashion, like the column width example already does. The side-by-side layout wasn't a major problem for visitors using desktop browser skins, but in a mobile-first world it no longer fits well with the majority of readers' devices. There's always more vertical space, but any kind of strict width requirements are a design killer. FeRDNYC (talk) 21:14, 17 April 2023 (UTC)

§ Column width vs. reality

IMHO § Column width explains things entirely wrong — as anyone can plainly see, nothing in the math there has anything to do with "screen width". And it overcomplicates things to explain individual column widths as being related to anything other than the table width itself. I'd propose this, as a far clearer real-world explanation:

Column width

Column width can be added as follows.

You type:

{| class="wikitable" style="width: 85%;"
|+ This table's width is 85% of its container width
| colspan="2" | This column is 100% of the table width
|-
| style="width: 30%"|'''This column is 30% of the table width'''
| style="width: 70%"|'''This column is 70% of the table width'''
|}

You get:

This table's width is 85% of its container width

This column is 100% of the table width
This column is 30% of the table width	This column is 70% of the table width

(85% of the "screen" width — actually, 85% of the viewport width, which in a windowed browser will be the window width — can be expressed in CSS: it's width: 85vw. That markup should almost never be used in MediaWiki content, as it ignores the page template.) FeRDNYC (talk) 07:15, 16 April 2023 (UTC)

as anyone can plainly see, nothing in the math there has anything to do with "screen width"

I should've qualified that more accurately — as anyone can plainly see if they're viewing the wiki using a non-fullwidth page layout, like any of the standard desktop skins.

On a mobile device, due to size constraints most likely container width and screen width are synonymous, since the table's container (the page content) occupies the full viewport. But that's not always the case, was my point, nor is it the right way to think about table sizing even when it happens to be true. FeRDNYC (talk) 20:55, 17 April 2023 (UTC)

Floating objects don't float anymore, without CSS

Table floating around text

To be able to keep tables floating right, the following code needs to be added to your MediaWiki:Common.css

.floatright {
    margin: 0 0 0.5em 0.5em;
    clear: right;
    float: right;
}

.floatleft {
    margin: 0 0.5em 0.5em 0;
    float: left;
    clear: left;
}

Since "Float" has been deprecated from MW 1.41, the above code is the only alternative to keep using the mentioned feature in the Help page. Rodejong (talk) 15:33, 7 February 2024 (UTC)

Shouldn't there be a mention of 'class="wikitable sortable"'?

It seems odd that there's no mention of class="wikitable sortable" this on the parent page. That's a pretty useful feature—maybe the most useful feature. Is it because the CSS classes and/or JavaScript to enable that to work that aren't in place across all Wikimedia sites? --Ernstkm (talk) 21:39, 19 February 2024 (UTC)