CZ:How to make tables: Difference between revisions

From Citizendium
Jump to navigation Jump to search
imported>Chris Day
imported>Chris Day
Line 41: Line 41:
The division of rows is marked by <b><nowiki>|-</nowiki></b>
The division of rows is marked by <b><nowiki>|-</nowiki></b>
The table header cells are denoted by an exclamation mark: <b><nowiki>!</nowiki></b>
The table header cells are denoted by an exclamation mark: <b><nowiki>!</nowiki></b>
Cells within rows are separated by a line break and a pipe <b><nowiki>^p|</nowiki></b> on its own (or a double pipe if on the same line).
Cells within rows are separated by a line break and a pipe (or a double pipe if on the same line).
Additional spaces and line breaks within the table code are ignored. So both of the following code fragments produce the same result:
Additional spaces and line breaks within the table code are ignored. So both of the following code fragments produce the same result:



Revision as of 12:43, 25 April 2008

There are two ways to build tables:

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

Simple example

SexHeightWeight
Males1.85100
Females1.675

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>

Markup description

Wikicode

Table is started with the code {| and ended with the code |} The division of rows is marked by |- The table header cells are denoted by an exclamation mark: ! Cells within rows are separated by a line break and a pipe (or a double pipe if on the same line). 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

 
 |-
 | 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 don with tables. Full explanations of every feature of the HTML table markup can be found at the w3.org specifications and at w3schools.com.


Citizendium Technical Help
How to edit an article | Searching | Start article with subpages
The Article Checklist | Subpage template

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