Help:Introduction to tables with Wiki Markup/Old advanced formatting page

Introduction to tables
How and why

Editing tables
The basics

Expanding tables
Adding rows and columns

Summary
Review of what you've learned

View all as single page

<< Back to tutorials menu

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 CSS. The appearance of each cell can be controlled by adding style=" " | before the cell's contents. CSS formatting is added to headings and captions in the same way.

For cell contents

| style="" | R1C1
| style="" | R1C2
| style="" | R1C3

For headings

! style="" | Header C1
! style="" | Header C2
! style="" | Header C3

Any CSS attributes can be added in the style=" " |.

Most commonly used attributes

Property	Meaning	Example
background	back ground fill	background: yellow;
color	text colour	color: blue;
width	cell width	width: 100px;
border-width	border width	border-width: 3px;
text-align	Text alignment within cell	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

CSS 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 -->

Test what you've learned in the sandbox

Back to the tutorials menu >>

Full manual

VisualEditor tables