Help:Tables

Tables are commonly used to organize information and anyone who has spent time working with HTML to any degree will be well aware (perhaps painfully so) of their flexibility and limitations. This page will provide an overview of using tables on Subsistence Wiki, with plenty of examples to get you started building them quickly and easily.

See also Mediawiki's Help on tables

Table Code and Formatting

Tables begin and end with the following:

{| opens the table

|} closes the table

Every table must have rows and columns inside the opening and closing tags.

|- Table row

| Table cell

A simple 2x2 table code will look like this:

{|
|-
| Row 1 Cell 1
| Row 1 Cell 2
|-
| Row 2 Cell 1
| Row 2 Cell 2
|}

Which will look like:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

Quick Reference

Note: Basic styling (light grey background, borders, padding, and align left) can be achieved by adding class="wikitable" to the beginning tag {|.

Markup code	Function	HTML equivalent
{| ... |}	Open/close a table	<table> ... </table>
!	Start a new table header cell	<th> ... </th>
|+	Include a table caption	<caption> ... </caption>
|-	Start a new table row	<tr> ... </tr>
| or ||	Start a new table cell	<td> ... </td>

Back to the Top

Advanced Editing

Borders

Here are some tricks for working with borders inside a table. As always remember that wiki code is often shorthand of true HTML code for those who work with coding. First -- a stock table with borders turned on...
{| border="3"

Header 1	Header 2	Header 3	Header 4
row 1, col 1	row 1, col 2	row 1, col 3	row 1, col 4
row 2, col 1	row 2, col 2	row 2, col 3	row 2, col 4

{| border="3" rules="cols"

Header 1	Header 2	Header 3	Header 4
row 1, col 1	row 1, col 2	row 1, col 3	row 1, col 4
row 2, col 1	row 2, col 2	row 2, col 3	row 2, col 4

{| border="3" rules="rows"

Header 1	Header 2	Header 3	Header 4
row 1, col 1	row 1, col 2	row 1, col 3	row 1, col 4
row 2, col 1	row 2, col 2	row 2, col 3	row 2, col 4

{| border="3" rules="all"

Header 1	Header 2	Header 3	Header 4
row 1, col 1	row 1, col 2	row 1, col 3	row 1, col 4
row 2, col 1	row 2, col 2	row 2, col 3	row 2, col 4

{|border="3" rules="none"

Header 1	Header 2	Header 3	Header 4
row 1, col 1	row 1, col 2	row 1, col 3	row 1, col 4
row 2, col 1	row 2, col 2	row 2, col 3	row 2, col 4

Back to the Top

Collapsible and Sorting Table

There are some general rules that must be followed when creating collapsible tables, this is just one trick of how to collapse a table.

Use 2 tables - one outer table that will be the container that collapses and one inner table that is the sorting table.

• The first table header ( <th> ! ) will be the collapse table so use 1.
• Seperate this title <th> element from the actual table (don't try and put it on the ! line.
• Embedded tables *MUST* be on separate lines from the actual line.

Exampe:

{| border="1"

 !| Column Header

|-

|| <===== Notice: This is the table row that the sort table will appear in.

{| <===== Notice: Start of new table -- on a new line AFTER the line you might try and start it on.

The example that follows has the following specifications. Here they are and what it means.

• collapsed in the collapsible class definition. This will make the table collapsed or "hidden" from view. To leave the table expanded, do not specify the "collapsed" portion of the class.
• Inside the sorting table, class="unsortable" is used as an option to demonstrate how to remove a column from having the sort option. Note: This can be applied to separate columns and more than one

Any % based width use for your sort table will be based upon it's container table. As in 50% width will make it HALF the width of the ROW it is appearing in so a table with a 50% width as your collapse table and a table with 50% width for your sort table will show as 25% of the screen space (half of half the screen...) Thus (usually) sortable tables embedded in a row should be set to 100% to fill that row.

{| class="mw-collapsible mw-collapsed" border="1"
 !| Collapse Header
 |-
 ||
 {|
 {| class="sortable"
  !| Sort Col 1
  !| Sort Col 2
  !class="unsortable"| Unsortable Column
  |-
  || Data 1, Col 1
  || Data 1, Col 2
  || Unsortable data 1
  |-
  || Data 2, Col 1
  || Data 2, Col 2
  || Unsortable data 2
  |-
  || Data 3, Col 1
  || Data 3, Col 2
  || Unsortable data 3
 |}
|}
|}

Collapse Header
Sort Col 1 Sort Col 2 Unsortable Column Data 1, Col 1 Data 1, Col 2 Unsortable data 1 Data 2, Col 1 Data 2, Col 2 Unsortable data 2 Data 3, Col 1 Data 3, Col 2 Unsortable data 3

Back to the Top