| Latest revision |
Your text |
| Line 1: |
Line 1: |
| '''Tables''' are a very useful tool for presenting data neatly. There are many different ways of using wikicode, HTML, and CSS, to achieve the desired appearance of the table, although in most situations, only the basics are required. Experiment in the [[Wars Wiki:Sandbox|Sandbox]] to get a feel for designing tables, and don't hesitate to ask for help where necessary.
| | <div class="messagebox" style="width: 35em; border: 3px solid #003597; background-color: #572433; padding: 0.5em;"> |
| | | <center> |
| == Basic coding ==
| | It has been suggested that this page or section be split into {{Pagelist|delim=''|{{{1|}}}|{{{2|}}}|{{{3|}}}|{{{4|}}}|{{{5|}}}|{{{6|}}}|{{{7|}}}|{{{8|}}}|{{{9|}}}|{{{10|}}}|{{{11|}}}|{{{12|}}}|{{{13|}}}|{{{14|}}}|{{{15|}}}|{{{16|}}}|{{{17|}}}|{{{18|}}}|{{{19|}}}|{{{20|}}}}}<br> |
| | | Please discuss this on this page's [[{{TALKPAGENAME}}|talk page]].</center></div><includeonly>[[Category:Pages to be split]]</includeonly><noinclude> |
| {| class="wikitable"
| | {{doc}} |
| |+ Basic coding used in designing a table.
| | [[Caategory:Notice Templates|{{PAGENAME}}]]</noinclude> |
| ! Code
| |
| ! Purpose
| |
| |-
| |
| ! <nowiki>{|</nowiki>
| |
| | Begins a table. Immediately after this, CSS coding (such as <code>class="wikitable"</code>) to define the table's appearance should be written.
| |
| |-
| |
| ! <nowiki>|+</nowiki>
| |
| | Used between the table's start and first row to add a caption (which appears above the table, as above).
| |
| |-
| |
| ! <nowiki>|-</nowiki>
| |
| | Defines the end of a row, and the beginning of a new one. It may be omitted at the end of the final row.
| |
| |-
| |
| ! <nowiki>!</nowiki>
| |
| | Defines a heading. All text in this cell will be bolded, and centred, and the cell will be highlighted.
| |
| |- | |
| ! <nowiki>|</nowiki>
| |
| | Defines a basic cell.
| |
| |-
| |
| ! <nowiki>|}</nowiki>
| |
| | Ends the table.
| |
| |}
| |
| * '''Important:''' Each code must be placed at the beginning of a new line. However, an entire row may be placed on one line, by duplicating the code used to begin the row. This is explained further below.
| |
| | |
| == Simple tables ==
| |
| {| class="wikitable" | |
| |+ A series of basic tables, and the required coding.
| |
| ! Description
| |
| ! Wikicode
| |
| ! Result
| |
| |-
| |
| | The most basic table, a 3x2 table with three headers.
| |
| | <pre>{| class="wikitable"
| |
| ! Header 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |- | |
| | Cell 1 | |
| | Cell 2
| |
| | Cell 3
| |
| |}</pre> | |
| | | |
| {| class="wikitable" | |
| ! Header 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |- | |
| | Cell 1 | |
| | Cell 2 | |
| | Cell 3 | |
| |} | |
| |- | |
| | The same table, with an added caption. | |
| | <pre>{| class="wikitable" | |
| |+ A test table | |
| ! Header 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |- | |
| | Cell 1 | |
| | Cell 2 | |
| | Cell 3 | |
| |}</pre> | |
| | | |
| {| class="wikitable" | |
| |+ A test table | |
| ! Header 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |- | |
| | Cell 1 | |
| | Cell 2 | |
| | Cell 3 | |
| |} | |
| |- | |
| | The same table, with the wikicode contained on one line per row. | |
| | <pre>{| class="wikitable" | |
| ! Header 1 !! Header 2 !! Header 3
| |
| |- | |
| | Cell 1 || Cell 2 || Cell 3
| |
| |}</pre> | |
| | | |
| {| class="wikitable" | |
| ! Header 1 !! Header 2 !! Header 3
| |
| |-
| |
| | Cell 1 || Cell 2 || Cell 3
| |
| |}
| |
| |- | |
| | An extended table, with randomly added header cells. Any cell can be designated as a "header" by using the <nowiki>!</nowiki> mark. Note that this effect cannot be achieved with the wikicode contained on one line per row.
| |
| | <pre>{| class="wikitable"
| |
| | Header 1
| |
| ! Header 2
| |
| | Header 3
| |
| |-
| |
| | Cell 1
| |
| | Cell 2
| |
| ! Cell 3
| |
| |-
| |
| ! Cell A
| |
| ! Cell B
| |
| | Cell C
| |
| |}</pre>
| |
| | | |
| {| class="wikitable" | |
| | Header 1
| |
| ! Header 2
| |
| | Header 3
| |
| |-
| |
| | Cell 1
| |
| | Cell 2
| |
| ! Cell 3
| |
| |-
| |
| ! Cell A
| |
| ! Cell B
| |
| | Cell C
| |
| |}
| |
| |}
| |
| | |
| == colspan and rowspan: Irregular-sized cells ==
| |
| | |
| One cell can be made to span several rows or columns, by using the <nowiki>colspan</nowiki> and <nowiki>rowspan</nowiki> attributes. This has various useful applications. However, the fact that these attributes eliminate certain cells from other parts of the table's coding can significantly increase the overall complexity of the table. Using the [[Wars Wiki:Sandbox|Sandbox]] and the "Show preview" button to learn how these attributes affect a table's appearance is extremely helpful. The attributes accept a numerical value representing the number of rows or columns a single cell should span. This value should be no less than two, and no greater than the total number of rows or columns in the table. The attributes are added to a cell before the cell's actual content, separated from it by a pipe symbol (|), as follows:
| |
| <pre>|colspan="2"|Cell content</pre>. | |
| | |
| An example of a table using <nowiki>colspan</nowiki>:
| |
| <pre>{| class="wikitable" | |
| ! Header 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |-
| |
| |colspan="2"|Cell 1+Cell 2
| |
| | Cell 3
| |
| |}</pre>
| |
| | |
| {| class="wikitable"
| |
| ! Header 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |-
| |
| |colspan="2"|Cell 1+Cell 2
| |
| | Cell 3
| |
| |}
| |
| | |
| <nowiki>rowspan</nowiki> is more difficult to code:
| |
| <pre>{| class="wikitable"
| |
| !rowspan="2"|Header 1+Cell 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |-
| |
| | Cell 2
| |
| | Cell 3
| |
| |}</pre>
| |
| | |
| {| class="wikitable"
| |
| !rowspan="2"|Header 1+Cell 1
| |
| ! Header 2
| |
| ! Header 3
| |
| |-
| |
| | Cell 2
| |
| | Cell 3
| |
| |}
| |
