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:
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. Other unwanted deprecated HTML, see www.codehelp.co.uk