Help:Editing Tables

Tables

The "code"

{|
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}

produces

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

. Open the same table code with

{|class="wikitable"
|+caption
! Header 1
! Header 2
|-

instead with "{|", and You will receive a nicely designed table with borders, headers and caption:

caption

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

refined table design

Is more control needed? Then let’s replace the initial “|” of the table fields with "||". Between the two upright lines normal HTML attributes can be applied for alignment, background color and more. The general attributes for the whole table are just added after the table's initial "{|". The general attributes for just one line must be added after the roe's initial "|-".

{|class="toccolours" border="1" style="clear:both; background-color:#e0e0e0; margin:2em auto; text-align:center; border-collapse:collapse;"
! longer Header 1
! longer Header 2
! longer Header 3
|-
| style="background-color:yellow; " | row 1<br />cell 1
| valign=bottom style="background-color:lightpink; " | row 1 cell 2
| valign=middle rowspan=2 | high cell
|-
| align=left style="background-color:lightgreen; " | row 2 cell 1
| align=right style="background-color:cyan; " | row 2 cell 2
|-style="background-color:#d0d0d0; "
| colspan=2 | wide cell
|| row 3 cell 2

|}

The result is now:

longer Header 1	longer Header 2	longer Header 3
row 1 cell 1	row 1 cell 2	high cell
row 2 cell 1	row 2 cell 2
wide cell		row 3 cell 2

Hint: XHTML attributes like style="background-color:..." should be prefered in favour of deprecated attributes like bgcolor.