NOTICE: Citizendium is still being set up on its newer server, treat as a beta for now; please see here for more.
Citizendium - a community developing a quality comprehensive compendium of knowledge, online and free. Click here to join and contribute—free
CZ thanks our previous donors. Donate here. Treasurer's Financial Report -- Thanks to our content contributors. --

CZ:How to make tables

From Citizendium, the Citizens' Compendium
Jump to: navigation, search

There are two ways to build tables:

  • In special Wiki-markup
  • With HTML elements: <table>, <tr>, <td> or <th>.

Markup description

Wikicode

A table is started with the code {|, and ended with the code |}.

At the point at which the table is started, you can specificy specific style elements about your table, such as

  • having a border (by adding border="1")
  • setting border colors
  • setting table width
  • other CSS elements


The start of a new row (including the header row) is marked by |-.

The table header cells in the header row are denoted (and delineated) by an exclamation mark: !

The start of the first cell in a normal row is marked by |. Cells within a row are separated by a line break and a | (or a double |, if on the same line).

At this point, you can also

  • specify the alignment of the cell
  • specify how many columns it will cover
  • apply other CSS style elements


Additional spaces and line breaks within the table code are ignored. So both of the following code fragments produce the same result:

 |-
 | Female
 | 1.6
 | 75

and:

 |-
 | Female || 1.6 || 75 

HTML

An HTML table is started with the code <table> and ended with the code </table> A new row is started by <tr> and ended by </tr> (end tags may be optional.) Cells within rows that are headers for the table are started <th> and ended by </th> (end tags may be optional.) Cells within rows contain the table data are started <td> and ended by </td> (end tags may be optional.) Additional spaces and line breaks within the table code are ignored. So both of the following code fragments produce the same result:

 <tr>
    <td>Females</td>
    <td>1.6</td>
    <td>75</td>
 </tr>
 
and
<tr><td>Females</td><td>1.6</td><td>75</td></tr>

Advanced editing

There are many additional things that can be done with tables. Full explanations of every feature of the HTML table markup can be found at the w3.org specifications and at w3schools.com.

Simple examples

The following two examples produce the same table (given at the bottom):

Wiki-markup

 {| class="wikitable"
 |-
 ! Sex
 ! Height
 ! Weight
 |-
 | Male
 | 1.85
 | 100
 |-
 | Female
 | 1.6
 | 75
 |}

HTML

<table border="1px">
<tr><th>Sex</th><th>height</th><th>weight</ht></tr>
<tr><td>Males</td><td>1.85</td><td>100</td></tr>
<tr><td>Females</td><td>1.6</td><td>75</td></tr>
</table>

Product

SexHeightWeight
Males1.85100
Females1.675


Citizendium Technical Help
How to edit an article | Searching | Start article with subpages
The Article Checklist | Subpage template | Other
See also: Getting Started
Home
Getting Started Organization Communication Technical Help Initiatives
Policies Editor Guidance Content Guidance Article Lists Governance
Welcome Page