Help:Table
A table is an arrangement of columns and rows that organizes and positions data. Tables in Saintapedia can be created easily using the Enhanced editor (see image to the right). As a general rule, it is best to avoid using a table unless you need one. Table markup often complicates page editing.
Tables can be edited with either editor:
- It is recommended to use Visual editor when modifying tables. See Help:Visual editor#Tables for more details
- To make changes using the Enhanced editor, see the steps in the Enhanced editor sections below.
Wikipedia has Introduction to tables
is a good guide to getting started with tables and their comprehensive Help:Table has an expanded list of functionality table options. The Excel converter is useful in bringing in non-sensitive content in from Microsoft Excel.
Visual editor
This information is being shown from Help:Visual editor#Tables.
A table is an arrangement of columns and rows that organizes and positions data. You can use VisualEditor to insert and change tables. Please note, you can even import a table by dragging a comma-separated value (.csv) file from your computer into the main editing window.
Inserting a table
When you click on "Table", in the "Insert" menu, the visual editor inserts a blank four-by-four table.
Now the "Table" menu is available. From that menu, you can add a caption to the top of the table.
To select a cell, click it once.
Edit contents
To edit the contents of the cell (for example, to add content or to correct a spelling error), double click in the cell. Or you can select the cell and then press Return.
To end your editing of a cell, just click elsewhere.
Add or delete a column or a row
You can add or delete a column or a row by clicking on a column or a row.
For rows, you are given the options to:
- Insert above
- Insert below
For columns, you are given the options to:
- Insert before
- Insert after
Merge cells
You can merge cells: Select them and then click on "Merge cells" on the popup.
If you merge cells, only the text in one cell is kept; any text in the other cells is deleted when you merge the cells. If you decide that you wanted some or all of the text that was deleted, use the Undo button, move or copy the text you want, then merge the cells again.
Un-merge cells
You can also split cells that were previously merged. All the content that was in the merged cell will remain in the first cell when you do the split. You can then cut and paste text to other cells, if you want.
Enhanced editor
Standard table format
To create a table manually, copy the following wikitext to your page:
{|class="wikitable"
|+ Title
! Column 1 header
! Column 2 header
|-
| a
| b
|-
| c
| d
|}
|
|
Wiki table summary
| {| | table start |
| |+ | table caption, optional; only between table start and first table row |
| |- | table row, optional on first row -- wiki engine assumes the first row |
| ! | table header cell, optional. Consecutive table header cells may be added on same line separated by double marks (!!) or start on new lines, each with its own single mark (!).
|
| | | table data cell, required! Consecutive table data cells may be added on same line separated by double marks (||) or start on new lines, each with its own single mark (|).
|
| |} | table end |
Basic table
| <column header 1> | <column header 2> |
|---|---|
| <row 1, column 1 info> | <row 1, column 2 info> |
| <row 2, column 1 info> | <row 2, column 2 info> |
Copy the text below to create this table:
{| class=wikitable
|+ <this row is used for a title>
! <column header 1>
! <column header 2>
|- <this is used as a row break>
| <row 1, column 1 info>
| <row 1, column 2 info>
|-
| <row 2, column 1 info>
| <row 2, column 2 info>
|}
|
Expanding tables - Adding rows and columns
It's common to to want to edit an existing table by adding just one extra column or row of information.
Adding a row
To add an extra row into a table, you'll need to insert an extra row break and the same number of new cells as are in the other rows.
The easiest way to do this in practice, is to duplicate an existing row by copy-pasting the wikitext. It's then just a matter of editing the cell contents.
|
You type |
You get | ||||||
|---|---|---|---|---|---|---|---|
{| class=wikitable
|+ Basic table from above
! <column header 1>
! <column header 2>
|- <this is used as a row break>
| <row 1, column 1 info>
| <row 1, column 2 info>
|-
| <row 2, column 1 info>
| <row 2, column 2 info>
|}
|
|
|
You type |
You get | ||||||||
|---|---|---|---|---|---|---|---|---|---|
{| class=wikitable
|+ Basic table with third row
! <column header 1>
! <column header 2>
|- <this is used as a row break>
| <row 1, column 1 info>
| <row 1, column 2 info>
|-
| <row 2, column 1 info>
| <row 2, column 2 info>
|-
| <row 3, column 1 info>
| <row 3, column 2 info>
|}
|
|
Adding a column
To add an extra column to a table, you'll need to add a single extra cell in the same position to each row. If the table has a heading, don't forget to add it as well.
|
You type |
You get | ||||||
|---|---|---|---|---|---|---|---|
{| class=wikitable
|+ Basic table from above
! <column header 1>
! <column header 2>
|- <this is used as a row break>
| <row 1, column 1 info>
| <row 1, column 2 info>
|-
| <row 2, column 1 info>
| <row 2, column 2 info>
|}
|
|
|
You type |
You get | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
{| class=wikitable
|+ Basic table with third column
! <column header 1>
! <column header 2>
! <column header 3>
|- <this is used as a row break>
| <row 1, column 1 info>
| <row 1, column 2 info>
| <row 1, column 3 info>
|-
| <row 2, column 1 info>
| <row 2, column 2 info>
| <row 2, column 3 info>
|}
|
|
HTML colspan and rowspan
You can use HTML colspan and rowspan attributes on cells for advanced layout.
| You type | You get | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable"
|-
! colspan="6" | Shopping List
|-
| rowspan="2" | Bread & Butter
| Pie
| Buns
| Danish
| colspan="2" | Croissant
|-
| Cheese
| colspan="2" | Ice cream
| Butter
| Yogurt
|}
|
| |||||||||||||||||
class="wikitable"
By adding class="wikitable" the table gets basic styling (light gray background, borders, padding and align left).
| Without wikitable formatting | With wikitable formatting | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| You type: | You get: | You type: | You get: | |||||||||||||
{|
|+ Food complements
|-
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream
|}
|
|
{| class="wikitable"
|+ Food complements
|-
| Orange
| Apple
|-
| Bread
| Pie
|-
| Butter
| Ice cream
|}
|
| |||||||||||||
Sortable table
| Column 1 | Column 2 |
|---|---|
| 44 | Joe |
| 10 | Jack |
| 11 | Sally |
Copy the text below to create this table:
{| class="sortable" width="300px" border="4" align="center"
|+ Centered Table that is sortable
! Column 1
! Column 2
|-
| 44 || Joe
|-
| 10 || Jack
|-
| 11 || Sally
|}
|
Note that you can specify entries for more than one column in a single line by separating the entries with two vertical pipe (||) characters, as in the example above.
Secondary sortkey
 |
This page in a nutshell: It is possible to sort by one column and then a second column by holding down the ⇧ Shift-key when clicking on the 2nd column. |
It is possible to sort by column A (primary sortkey), while for equal values in column A, sort by column B (secondary sortkey): first sort by A by clicking the sort button of column A once or twice, then, while holding the shift-key, click the sort button of column B once or twice.
Example:
First click on column Text and then, while holding the ⇧ Shift-key, on Numbers, you'll see that the ordering is on Text (1), Numbers (2).
| Numbers | Text | Dates | Currency | More text |
|---|---|---|---|---|
| 4 | a | 01.Jan.2005 | 4.20 | row 1 |
| 5 | a | 05/12/2006 | 7.15 | row 2 |
| 1 | b | 02-02-2004 | 5.00 | row 3 |
| 1 | a | 02-02-2004 | 5.00 | row 4 |
| 2 | x | 13-apr-2005 | row 5 | |
| 2 | a | 13-apr-2005 | row 6 | |
| 3 | a | 17.aug.2006 | 6.50 | row 7 |
| 3 | z | 25.aug.2006 | 2.30 | row 8 |
| 3 | z | 28.aug.2006 | 5.50 | row 9 |
| 3 | z | 31.aug.2006 | 3.77 | row 10 |
| 3 | z | 01.sep.2006 | 1.50 | row 11 |
| Bottom |
Advanced formatting
In general, it is recommended that tables simply use Wikipedia's default formatting. In some circumstances, however, you may need to apply some more complicated formatting using HTML. The appearance of each cell can be controlled by adding style=" " | before the cell's contents. HTML formatting is added to headings and captions in the same way.
Any HTML attributes can be added in the style=" " |.
For cell contents| style="" | R1C1 | style="" | R1C2 | style="" | R1C3 |
For headings! style="" | Header C1 ! style="" | Header C2 ! style="" | Header C3 |
| Property | Meaning | Example |
|---|---|---|
| background | back ground fill | background:yellow
|
| color | text colour | color:blue
|
| width | cell width | width:100px
|
| border-width | border width | border-width:3px
|
| text-align | Text alignment within cell | text-align:center
|
As an example, here's an example with some varied formatting added to specific cells
{| class="wikitable"
|+ Caption: some cells yellow.
|-
! Header1
! Header2
! Header3
|-
| style="background: yellow" | R1C1
| R1C2
| style="background: yellow" | R1C3
|-
| R2C1
| style="background: yellow" | R2C2
| R2C3
|}
Then it would produce this:
| Header1 | Header2 | Header3 |
|---|---|---|
| R1C1 | R1C2 | R1C3 |
| R2C1 | R2C2 | R2C3 |
HTML attributes can be added to the whole table by editing the first line of the table using {| style=" " in the first line. Similarly, attributes can be added to a row using |- style=" " The example below would fill the whole table yellow.
{| class="wikitable" style="background: yellow"
All of these formatting options should be used sparingly. Tables in crazy colors are hard to read and affect the Accessibility of the Saintapedia page.
Hidden comments
In complicated tables, sometimes hidden comments can be useful to explain formatting. These hidden comments are only visible when editing the page, not when reading it normally. Comments can be added by placing them between <!-- and -->.
| R1C1 || R1C2 ||R1C3 <!-- Hidden comment to explain this row -->
}}
Alignment
Horizontal
There are three variations of horizontal alignment:
Left aligned (default):
style="text-align: left;"
Center aligned:
style="text-align: center;"
Right aligned:
style="text-align: right;"
Vertical
There are three variations of vertical alignment:
Top alignment (default):
style="vertical-align: top;"
Middle alignment:
style="vertical-align: middle;"
Bottom alignment:
style="vertical-align: bottom;"
Example of both
{| class="wikitable" style="width: 60%;"
|-
| style="text-align: left;" | Left aligned (default)
| style="text-align: center;" | Center aligned
| style="text-align: right;" | Right aligned
|-
| style="vertical-align: top;" | A longer piece of text with top alignment. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
| style="vertical-align: middle;" | Middle alignment
| style="vertical-align: bottom;" | Bottom alignment
|}
| Left aligned (default) | Center aligned | Right aligned |
| A longer piece of text with top alignment. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | Middle alignment | Bottom alignment |
Centering tables
align="center" is deprecated in HTML5, and does not work well in Mediawiki software. For example; it will not override the left alignment of tables via class=wikitable.
Centered tables can be achieved, but they don't "float"; that is to say, no text appears to either side. The trick is
{| style="margin-left: auto; margin-right: auto; border: none;"
[note 1]
Wiki text
Text before table...
{| class="wikitable" style="margin-left: auto; margin-right: auto; border: none;"
|+ Cells left-aligned, table centered
|-
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text after tableAs it appears in a browser:
Text before table...
| Duis | aute | irure |
|---|---|---|
| dolor | in reprehenderit | in voluptate velit |
| esse cillum dolore | eu fugiat nulla | pariatur. |
...text after table.
Making a collapsible table
Use the "mw-collapsible" class command. There must be a header row. The following is the simplest possible table with one header and one data row.
{|class="mw-collapsible"
!Header
|-
|test
|}
|
|
Advanced nesting of tables can create collapsible lists
{|
|- valign=top
|
{|class="mw-collapsible mw-collapsed wikitable" width=200px
!Courses
|-
|Science
|-
|Technology
|-
|Engineering
|-
|Math
|}
|
{|class="mw-collapsible wikitable" width=200px
!Institution
|-
|
Northern University of the Arts
Eastern Medical University
Southern Junior College
|}
|
{|class="mw-collapsible mw-collapsed wikitable" width=200px
!About us
|-
|
* History
* Staff
* Organization charts
|}
|
{|class="mw-collapsible wikitable" width=200px
!Contact Us
|-
|
President<br />
Vice President<br />
Treasurer<br />
|}
|}
|
|
Color templates
There is a series of colors that can be added to a table with whatever text you desire. The Enhanced editor needs to be used to add these template. Please always consider Saintapedia:Accessibility when using colors. See Template:Yes for even more color options.
Green, yellow, and red
Templates used
| Name | Description | Example | Code |
|---|---|---|---|
| Yes | The Yes template has a light green background. | Required | {{yes|Required}}
|
| Partial | The Partial template has a yellow background. | Recommended | {{partial|Recommended}}
|
| Okay | The Okay template has a light yellow background. | Optional | {{Okay|Optional}}
|
| No2 | The No2 template has a light pink background. | Not Recommended | {{no2|Not Recommended}}
|
| No | The No template has a light red background. | Must Not Implement | {{no|Must Not Implement}}
|
Templates used together
| Field | Option 1 | Option 2 |
|---|---|---|
| 1 | Must Not Implement | Must Not Implement |
| 3 | Must Not Implement | Must Not Implement |
| 5 | Not Recommended | Required |
| 6 | Must Not Implement | Must Not Implement |
| 7 | Not Recommended | Required |
| 8 | Required | Required |
| 10 | Not Recommended | Required |
| 12 | Must Not Implement | Optional |
| 13 | Required | Required |
| 14 | Optional | Recommended |
| 15 | Recommended | Recommended |
| 16 | Optional | Recommended |
Blue and white family
Blue and white templates
| Name | Description | Example | Code |
|---|---|---|---|
| Blue white cell | The Blue white cell template has a dark blue background with white text. | Dark blue | {{Blue white cell|Dark blue}}
|
| Blue cell | The Blue cell template has a light blue background. | Light blue | {{Blue cell|Light blue}}
|
Blue and white example
| Field | Option 1 | Option 2 |
|---|---|---|
| 1 | Must Not Implement | Must Not Implement |
| 3 | Must Not Implement | Must Not Implement |
| 5 | Not Recommended | Required |
| 6 | Must Not Implement | Must Not Implement |
| 7 | Not Recommended | Required |
| 8 | Required | Required |
| 10 | Not Recommended | Required |
| 12 | Must Not Implement | Optional |
Importing and exporting tables
Wiki table editor
At http://wikitable.eu5.org/, there is a wiki table editor where you can paste your table code into the box at the top, and see the results underneath, and then you can click in any of the cells in the table underneath to edit the contents of those cells, and the changes will be reflected in your code at the top. When you are done, you can copy the code from the top back into Saintapedia.
Notes:
- Table coding is reformatted
- Cell content lines (starting with
|) are indented underneath the new row|-lines - Where multiple cells are specified on the same line (separated by
||), they will be moved to separate lines
- Cell content lines (starting with
- A new row
|-line is required before the first row in the table, even though it is optional in Saintapedia- If the initial new row line is missing, the contents of the first row will generally be lost when the wiki table editor reformats the code
- The site does not understand table caption
|+lines
Exporting to Microsoft Office
Wiki tables can be exported to Microsoft Word and Excel by direct cutting-and-pasting.
- External hyperlinks will be preserved
- Internal hyperlinks (to Saintapedia) will also be preserved. To remove them, see this guidance from Microsoft.
Importing from Microsoft Excel
It is possible to import a table from Microsoft Excel using the Copy and Paste Excel-to-Wiki Converter. This simple tool to converts excel information to wiki text. Once you copy the wiki text from the tool, you can paste it into Saintapedia in edit mode. Some formatting may need to be done after the conversion.
External Links
Advanced table formatting
References
- ↑ border: none; avoids an unsightly empty column in tables narrower than the browser window on Android Chrome.
 |
If this page has been recently modified, it may not reflect the most recent changes. Please purge this page to view the most recent changes. |