Help:Introduction to tables with Wiki Markup/5


Markup-logo.svg

Editing tables
The basics

Sortable tables
Giving readers some options

Positioning and layout
Keeping placement tidy

Advanced formatting
Using HTML



In general, it is recommended that tables simply use Wikipedia's default formatting. In some circumstances, however, you may need to apply some more complicated formatting using HTML. The appearance of each cell can be controlled by adding style=" " | before the cell's contents. HTML formatting is added to headings and captions in the same way.


Any HTML attributes can be added in the style=" " |. The most commonly used attributes are:

background back ground fill (e.g "background:yellow")
color text colour (e.g "color:blue")
width cell width (e.g. "width:100px")
border-width border width (e.g. "border-width:3px")
text-align Text alignment within cell (e.g. "text-align:center")


As an example, here's an example with some varied formatting added to specific cells

{| class="wikitable"
|+ Caption: some cells yellow.
|-
! Header1
! Header2
! Header3
|-
| style="background: yellow" | R1C1
| R1C2
| style="background: yellow" | R1C3
|-
| R2C1
| style="background: yellow" | R2C2
| R2C3
|}

Then it would produce this:

Caption: some cells yellow.
Header1 Header2 Header3
R1C1 R1C2 R1C3
R2C1 R2C2 R2C3


HTML attributes can be added to the whole table by editing the first line of the table using {| style=" " in the first line. Similarly, attributes can be added to a row using |- style=" " The example below would fill the whole table yellow.

{| class="wikitable" style="background: yellow"


All of these formatting options should be used sparingly. Tables in crazy colours are hard to read.


Hidden comments

In complicated tables, sometimes hidden comments can be useful to explain formatting. These hidden comments are only visible when editing the page, not when reading it normally. Comments can be added by placing them between <!-- and -->.

| R1C1 || R1C2 ||R1C3 <!-- Hidden comment to explain this row -->