Tables

From Nitradopedia EN
Jump to: navigation, search

Tables can either be written directly to HTML table elements or the Wikicode in this wiki. HTML table elements and their use are well described on various websites and is therefore not discussed here. The Wikicode uses letter symbols to the table structure in the article to form, which are in the view replaced by HTML table elements.

Generally you should avoid the use of tables, unless there really is no other way. The table structure usually complicates the editing pages.

Summary tables Code

Wiki Code vgl. HTML Code description
{| <table> Table top
|+   Table Header, optional; only once per table between table start and first row definable
|- <tr> New Table Row
! <th> Table header cell, optional. Consecutive head cells may, by double exclamation points (!!) separately, followed on the same line or with simple exclamation mark (!) Start on a new line.
| <td> Table Cell, Duty! Successive cells separated by double underscores ( || ), follow in the same line or with simple stroke ( | ) begin on a new line.
|} </table> Table End
  • The above marks must at line start standing, except the double || and !! for optional successive cells in a row.
  • XHTML - properties. ach mark, except table end, optionally have one or more XHTML attributes. The properties must be entered on the same line, for which they are valid. Multiple entries must be entered separated by a space.
    • The contents of cells and headers ( | or ||, or !!, and |! + ) needs of content with a single pipe (|) be separated and can be used in the same and subsequent lines to stand.
    • Tables, columns and rows ( {| and | - ) that can not directly have a content may also no character (|) after their optional attributes. If but one is set away the parser this and the last attribute, if there is no space between it and the bottom line.
  • Content may (a) are or (b) of the cells mark after its cell mark after any optional XHTML properties in the same row. Content which Wiki formatting (such as headings, bulleted lists, etc.) use, should be only the beginning of a new line.

Simple Table

Simple Form

The following table has no borders or good voids . but shows the simple Wiki Code for a table structure

Display in Wiki Wiki Code
Orange Apple
Bread Cake
Butter ice cream
{|
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream  
|}

Alternative

For a more tabular appearance, the cells can be listed on one line in the wiki markup. The individual columns have to || be separated. However clarity decreases with sidewalk text content.

Spaces can help to align the text visually easier here. These have later will not affect the pages created.

HTML information may be added in this type as well as in other tables.

Orange Apple more
Bread Cake more
Butter Ice Cream and more
{|
|  Orange    ||   Apple   ||   more
|-
|   Bread    ||   Cake     ||   more
|-
|   Butter   || Ice Cream ||  and more
|}

HTML attributes

By adding HTML attributes, the look of the table can be changed.

border="1"

Orange Apple
Bread Cake
Butter Ice Cream
{| border="1"
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

align="center" border="1"

Orange Apple
Bread Cake
Butter Ice Cream
{| align="center" border="1"
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

align="right" border="1"

Properties can also be applied to individual cells. Numbers, for example, look better if they are right-justified.

Orange Apple 12,333.00
Bread Cake 500.00
Butter Ice Cream 1.00
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Cake
|align="right"|500.00
|-
|Butter
|Ice Cream
|align="right"|1.00
|}


properties only on certain rows apply .

Orange Apple 12,333.00
Bread Cake 500.00
Butter Ice Cream 1.00
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Cake
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice Cream
|align="right"|1.00
|}

cellspacing="0" border="1"

Orange Apple
Bread Cake
Butter Ice Cream
{| cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

cellpadding="20" cellspacing="0" border="1"

Orange Apple
Bread Cake
Butter ICe Cream
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

HTML attributes and CSS definitions

CSS information can be used in combination with or without HTML properties .

style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"

Orange Apple
Bread Cake
Butter Ice Cream
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

Table with TH header

TH (HTML table header) with a ! before | to be created. This header will usually appear in bold and centered.

Table head

Per column

Delicious Delicious
Orange Apple
Bread Cake
Butter Ice Cream
{| border="1" cellpadding="20" cellspacing="0"
!Delicious
!Delicious
|-
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

Colspan="2"

leckerer
Orange Apple
Bread Cake
Butter Ice Cream
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|leckerer
|-
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

Side Header

Default

Fruit Orange Apple
Main Course Bread Cake
ingredients Butter Ice Cream
{| border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Main Course
|Bread
|Cake
|-
!ingredients
|Butter
|Ice Cream 
|}

Flush Right

Side headings are justified as follows:

Fruit Orange Apple
Main Course Bread Cake
Ingrediants Butter Ice Cream
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apfel
|-
!align="right" |Main Course
|Bread
|Cake
|-
!align="right" |Ingrediants
|Butter
|Ice Cream 
|}

Lettering

A Table caption can be added on each table as follows:

Food Stuff
Orange Apple
Bread Cake
Butter Ice Cream
{| border="1" cellpadding="20" cellspacing="0"
|+Food Stuff
|-
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream
|}

Properties the label as follows are assigned accordingly:

Essenssachen
Orange Apple
Bread Cake
Butter Ice Cream
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food Stuff''
|-
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}

Tables with H1, H2, H3, etc. headings

Tables with H1, HHTML, H1, H2, H3, H4 etc. headings can be created in tables with the usual == wiki markup ==. These must then stand in a line with the text.

Here is the preview very beneficial! As with any header begins a new chapter, which will be later edited. However, then parts are the table when editing is missing, since they are in a different section .

The structure must be respected, since the headers as well as other headings in the table of contents, H3 etc. headings.

Yummiest

Orange Apple
Bread Cake
Butter Ice Cream
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apple
|-
|Bread
|Cake
|-
|Butter
|Ice Cream 
|}