CZ:How to make tables: Difference between revisions

From Citizendium
Jump to navigation Jump to search
imported>Derek Harkness
(Very very rough first draft)
 
imported>Derek Harkness
(A little more info, still rather basic.)
Line 12: Line 12:


===Wiki-markup===
===Wiki-markup===
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>{| class="wikitable"</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>! Sex</nowiki><br />
<nowiki>! Sex</nowiki><br />
<nowiki>! Height</nowiki><br />
<nowiki>! Height</nowiki><br />
<nowiki>! Weight</nowiki><br />
<nowiki>! Weight</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Male</nowiki><br />
<nowiki>| Male</nowiki><br />
<nowiki>| 1.85</nowiki><br />
<nowiki>| 1.85</nowiki><br />
<nowiki>| 100</nowiki><br />
<nowiki>| 100</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>|-</nowiki><br />
<nowiki>| Female</nowiki><br />
<nowiki>| Female</nowiki><br />
<nowiki>| 1.6</nowiki><br />
<nowiki>| 1.6</nowiki><br />
<nowiki>| 75</nowiki><br />
<nowiki>| 75</nowiki><br />
<nowiki>|}</nowiki><br />
<nowiki>|}</nowiki><br />


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


==Markup description==
==Markup description==
===Wikicode===
===Wikicode===
Table is starte with the code <nowiki>{|</nowiki> and ended witht the code <nowiki>{|</nowiki>
The divition of rows is marked by <nowiki>|-</nowiki>
The talbe header cells are denoted by an exclamation mark <nowiki>!</nowiki>
Cells within rows are separated by a pipe <nowiki>|</nowiki> on it's own.
Additional spaces and line breaks within the table code are ignored. So both of the following code fragments produce the same result
<nowiki>|-</nowiki><br />
<nowiki>| Female</nowiki><br />
<nowiki>| 1.6</nowiki><br />
<nowiki>| 75</nowiki><br />
is the same as
<nowiki>|-</nowiki><br />
<nowiki>| Female | 1.6 | 75 </nowiki><br />


===HTML===
===HTML===
Table is starte with the code <nowiki><table></nowiki> and ended witht the code <nowiki></table</nowiki>
A new row is started by <nowiki><tr></nowiki> and ended by <nowiki></tr></nowiki> (end tags may be optional.)
Cells within rows that are headers for the table are started <nowiki><th></nowiki> and ended by <nowiki></th></nowiki> (end tags may be optional.)
Cells within rows contain the table data are started <nowiki><td></nowiki> and ended by <nowiki></td></nowiki> (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:
<nowiki><tr></nowiki><br />
<nowiki>  <td>Females</td></nowiki><br />
<nowiki>  <td>1.6</td></nowiki><br />
<nowiki>  <td>75</td></nowiki><br />
<nowiki></tr></nowiki><br />
is the same as
<nowiki><tr><td>Females</td><td>1.6</td><td>75</td></tr></nowiki><br />


==Advanced editing==
====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 [http://www.w3.org/TR/html401/struct/tables.html| w3.org specificats] and at [http://www.w3schools.com/html/html_tables.asp| w3schools.com].
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 [http://www.w3.org/TR/html401/struct/tables.html| w3.org specificats] and at [http://www.w3schools.com/html/html_tables.asp| w3schools.com].

Revision as of 03:36, 2 May 2007

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 starte with the code {| and ended witht the code {| The divition of rows is marked by |- The talbe header cells are denoted by an exclamation mark ! Cells within rows are separated by a pipe | on it's own. 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

is the same as 

|-

| Female | 1.6 | 75

HTML

Table is starte with the code <table> and ended witht 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>

is the same as 

<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 specificats and at w3schools.com.

Retrieved from "https://citizendium.org/wiki/index.php?title=CZ:How_to_make_tables&oldid=214957"