CZ:How to make tables

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

Sex	Height	Weight
Males	1.85	100
Females	1.6	75

|width=10% align=center style="background:#F5F5F5"|  |}