Tables in HTML

# Overview
Writing tables in wiki code is difficult from the get-go, but it is significantly easier if you have experience with creating tables using HTML.  On that note, HTML can also be used to create tables within the wiki.  In this tutorial, we will be using HTML along side the wiki code to provide a better understanding of both.

# Note on HTML
Throughout this article, HTML and Wiki Code are shown side by side.  The reason for this is twofold:  So those experienced with HTML can look at the HTML code and have a better idea of what is going on, and so those who don't know HTML table code can learn both.

# The Basic Structure

## Building Blocks
In HTML, table tags are used to begin and end a table.  A similar idea is present in wiki code, using the curled bracket and pipe to begin and end a table. Note that these have to be the first characters on a line, or they will be ignored by the wiki.  Examples:
- HTML
Open table: 
Close table: 
- Open table: 
- Close table: 
- WIKI
Open table: {|
Close table: |}
- Open table: {|
- Close table: |}
This forms the containing body of the table.
Next is the rows.  In HTML, a opening and closing tag is required to begin and end a row.  This is different in Wiki code, as a single set of a pipe and dash (followed by hitting enter once) and  is needed only at the start of a new row.  Examples:
- HTML
Begin row: 
End row: 
- Begin row: 
- End row: 
- WIKI
Begin row: |-
- Begin row: |-
Rows contain the cells.
Finnally, of the basic structure, there are cells.  In HTML, a cell is defined by it's opening and closing tags.  As with rows, the  wiki equivalent is also fairly different using a simple pipe to begin a cell, and a double pipe to separate cells on the same line. Example:
- HTML
Begin cell: 
End cell: 
- Begin cell: 
- End cell: 
- WIKI
Begin cell: |
Separate cells: || (or press enter)
- Begin cell: |
- Separate cells: || (or press enter)
Cells contain the table's actual content.

## Putting Them Together

# Advanced Formatting
Generally, the exact same attributes can be added to both HTML Table Tags and Wiki Tables to produce the same, or similiar results.

## Background Color
The following works with both HTML and Wiki syntax:
The following can also be used on HTML and Wiki tables, and uses "style" statements.:
The above will change the background color of an entire table, row or a single cell, depending on where it is put.  Note that either Hexadecimal Color Codes or  Color Names can be used. Using names is highly encouraged. Row's color overrides table's color, and cell's overrides row's color. To color a column, you have to set every cells's color invidually.
Example:

## Width and height
You can set the width and height of the whole table, and width of a column and heigh of a row. To set the width of a column, you must specify width of a single cell on that column.
The syntax is
Either of these would create a table that fills 80% of the screen horizontally, and is exacly 100 pixels high.
Example using "style" syntax:

## Cell Spacing and Padding
Cell padding and spacing are two mostly overlooked features of tables.  Cellpadding is the margins of a cell, and cellspacing is the distance between them.  Observe the following.

## Positioning
You can position the whole table, content of a single row or content of a single cell. You can define positioning in either horizontal or vertical direction.

### align
align keyword controls the horizontal positioning. Normally everything is positioned to the left. align has two possible values: right and center.
The location of align word controls the word's scope. See following examples for clarification.
Whole table, right
Result:
Note that aligning tables to right might cause unexpected results with some browsers. In some cases the table will overlap other elements on the page.
Whole table, center
Result:
Row, right:
Result:
Row, center:
Result:
Notice that in both examples only the first row was affected. To align also the other rows to the right you would need to put align to every row, or alternatively use text-align with style:
Text-align:
Result:
Cells follow the same principle, align will only affect one cell. They will otherwise work as rows.

### valign
valign, or vertical align, controls the vertical position of the text. valign can have to values, top or bottom.
Compare these two examples. On the left, no valign tags are used. On the right, both top and bottom tags are used, top for the middle row and bottom for the bottom row. As you can see on the left size, the default for vertical alignment is middle.

## Row and Column Span
There are two attributes, rowspan and colspan, that can expland cells accross rows and columns, respectively.
Example Syntax
These are placed where the cell's attributes would go, as show in the examples below.