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

how to add HTML comments

Comments can be added by using the HTML . For example, you can add a comment to a table row like this:

| row1cell1 || row1cell2 ||row1cell3 

The comment doesn't do anything, but can be helpful to explain how tables work.

how to add HTML attributes to cell content

The following text:

{| class="wikitable"
|+ Caption title
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}

Would produce this table:

Caption title
header1	header2	header3
row1cell1	row1cell2	row1cell3
row2cell1	row2cell2	row2cell3

When constructing advanced tables, we may wish to add HTML attributes to cell contents and captions. This is actually very easy.

Cells hold content, e.g. row1cell1. The markup for cells and captions are: |, ||, !, !! and |+. HTML attributes need to be kept separate from cell content or captions with a single pipe (|). Cell content or captions may follow on the same line, or on a following line.

So HTML attributes can be inserted like this:

| HTML | row1cell1
| HTML | row1cell2
| HTML | row1cell3

Or like this: | HTML | row1cell1 || HTML | row1cell2 || HTML | row1cell3

Adding to the header can be done like this:

! HTML | header1
! HTML | header2
! HTML | header3

Or like this: ! HTML | header1 !! HTML | header2 !! HTML | header3

Adding to the caption is done like this: |+ HTML | Caption Title

For example, lets say we wanted to make some cell backgrounds yellow colored. The HTML attribute to do so is style="background: yellow". It could be added to some cells in a table like this:

{| class="wikitable"
|+ Caption: some cells yellow.
|-
! header1
! header2
! header3
|-
| style="background: yellow" | row1cell1
| row1cell2
| style="background: yellow" | row1cell3
|-
| row2cell1
| style="background: yellow" | row2cell2
| row2cell3
|}

Then it would produce this:

Caption: some cells yellow.
header1	header2	header3
row1cell1	row1cell2	row1cell3
row2cell1	row2cell2	row2cell3

As you can see, a yellow background color has been added to some of the cells. Note that, optionally, cell contents could be added to new lines if desired.

how to add HTML attributes to tables and rows

Tables and rows use the following markup: {|, |- and |}. HTML attributes can be added to {| and |-. They do not directly hold content. Because of this, they should not have an added pipe (|) after any HTML attributes.

HTML attributes can be added to the table markup like this: {| HTML.

HTML attributes can be added to the row markup like this: |- HTML

For example, to turn a table's content yellow, the following text could be used:

{| class="wikitable" style="background: yellow"
|+ Caption: yellow contents.
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}

In this example, two HTML attributes (class and style) are applied to the table. The result would be:

Caption: yellow contents.
header1	header2	header3
row1cell1	row1cell2	row1cell3
row2cell1	row2cell2	row2cell3

For more details, see: Help:Table; Editing Wikitext/Tables at Wikibooks; and Wikipedia:Advanced table formatting

Back to Getting started >>