Difference between revisions of "Table Help"

Latest revision as of 01:36, 24 April 2025

The following text (when you view the edit screen) will show you how to construct a table. Use this in conjunction with the editor's "table" function. I have included many variables that can change how the table shows information. Each column is also sortable.

In the code, you can change the table caption.
Header Info	Something Else	Another Category
regular plain text	blah blah	2025-06-22
this is green	This is Bold	This is Italics
A Reference^[1]		Gummi a interwiki link

Float Tables

Two table classes floatleft and floatright (case sensitive) help floating the table and adjusting table margins so that they do not stick to the text. floatleft floats the table to the left and adjusts right margin. floatright does the opposite. This markup doesn't work on newer mediawiki themes like Vector 2022. Example:

This table is floatleft
Header A	Header B	Header C
row 1 A	row 1 B	row 1 C
row 2 A	row 2 B	row 2 C

This table is floatright
Header A	Header B	Header C
row 1 A	row 1 B	row 1 C
row 2 A	row 2 B	row 2 C

Column Width

This column is 100 points wide	This column is 200 points wide	This column is 300 points wide
blah	blih	bluh

More Column Width

You can also use "px" instead of percentages.

House	Wilson	Cuddy
Fire (faked)	Cancer	Don't know

Cell content indenting and padding

Cell content that is not indented or padded
`style="padding-left: 2em;"`
`style="text-align:right; padding-right: 2em;"`
`style="padding-top: 2em;"`
`style="padding-bottom: 2em;"`
`style="padding: 3em 5%;"` (Top and Bottom: 3em. Left and Right: 5%)
`style="padding: 3em 4em 5%;"` (Top: 3em. Left and Right: 4em. Bottom: 5%)
`style="padding: 3%;"` (Top, Right, Bottom, and Left: all 3%)
`style="padding: 1em 20px 8% 9em;"` (Top: 1em. Right: 20px. Bottom: 8%. and Left: 9em.)

Plain Padding

Cell	Cell
Cell	Cell

Border Colors

Left	Center	Right
blah blah blah	blah blah blah	blah blah blah
Blue Blah	Thick Red Blah	Thicker Green Blah

More Border Styles

Even though I will probably never use these, the style='border:' and style='border-style:' properties can accept the following arguments:

Argument	Cell border	Additional notes
`none`	`style="border-style: none;"`
`solid`	`style="border-style: solid;"`
`double`	`style="border-style: double;"`
`dashed`	`style="border-style: dashed;"`
`dotted`	`style="border-style: dotted;"`
`ridge`	`style="border:5px ridge red;"`	3D ridged border
`groove`	`style="border:5px groove blue;"`	3D grooved border
`inset`	`style="border: 5px inset yellow;"`	3D inset border
`outset`	`style="border: 5px outset cyan;"`	3D outset border
`inherit`	`style="border-style: inherit;"`	Inherit value from parent
`initial`	`style="border-style: initial;"`	Set to default value

It gets even crazier:

`style="border-top: solid;"`
border-top: solid 2px red; border-right: dashed 3px green; border-bottom: double 5px blue; border-left: dotted 6px yellow;

In case you want to mess with interior borders:

Top_Left	Top_Center	Top_Right
Middle_Left	Middle_Center	Middle_Right
Bottom_Left	Bottom_Center	Bottom_Right

Shading certain cells

		To
		Solid	Liquid	Gas
From	Solid	Solid–solid transformation	Melting	Sublimation
	Liquid	Freezing	---	Boiling/evaporation
	Gas	Deposition	Condensation	---

Remove the image and...some rowspans

Year	Size	Year	Size	Year	Size
1990	1000 (est)	2000	1357	2010	1776
1991	1010	2001	1471	2011	1888
⋮		⋮		⋮
1999	1234	2009	1616	2019	1997 (est)

References

↑ this is a reference

[1] this is a reference

[1]

@@ Line 1: / Line 1: @@
-The following text (when you view the edit screen) will show you how to construct a table.  Use this in conjunction with the editor's "table" function.  I have included many variables that can change how the table shows information.  Each column is also sortable.
+__NOTOC__The following text (when you view the edit screen) will show you how to construct a table.  Use this in conjunction with the editor's "table" function.  I have included many variables that can change how the table shows information.  Each column is also sortable.
 {| class="wikitable sortable collapsible" width="100%" style="text-align: center;"
@@ Line 10: / Line 10: @@
 | <font color="green">this is green</font> || '''This is Bold''' || ''This is Italics''
 |-
-| A Reference<ref>this is a reference</ref> || [[File:Exclaimorange.jpg|15px]] || Example
+| A Reference<ref>this is a reference</ref> || [[File:Point.jpg|15px]] || [[Gummi]] a interwiki link
 |}
 ==Float Tables==
-Two table classes <code>floatleft</code> and <code>floatright</code> (case sensitive) help floating the table and adjusting table margins so that they do not stick to the text. <code>floatleft</code> floats the table to the left and adjusts right margin. <code>floatright</code> does the opposite. Example:
+Two table classes <code>floatleft</code> and <code>floatright</code> (case sensitive) help floating the table and adjusting table margins so that they do not stick to the text. <code>floatleft</code> floats the table to the left and adjusts right margin. <code>floatright</code> does the opposite. This markup doesn't work on newer mediawiki themes like '''Vector 2022.''' Example:
 {| class="wikitable floatleft"
@@ Line 28: / Line 28: @@
 {| class="wikitable floatright"
-|+ This table is also floatleft
+|+ This table is floatright
 |-
 ! Header A !! Header B !! Header C
@@ Line 36: / Line 36: @@
 | row 2 A || row 2 B || row 2 C
 |}
+<br><br><br><br>
 ==Column Width==
@@ Line 196: / Line 197: @@
 {| class=wikitable style="border: none; background: none;"
-! colspan=2 rowspan=2 style="border: none; background: none;" | [[File:Exclaimorange.jpg|20px]]
+! colspan=2 rowspan=2 style="border: none; background: none;" | [[File:Point.jpg|20px]]
 ! colspan=3 | To
 |-