Jump to content

User:Mrjulesd/sandbox/3

From Wikipedia, the free encyclopedia
< User:Mrjulesd | sandbox

This is an old revision of this page, as edited by Mrjulesd (talk | contribs) at 17:02, 9 December 2015 (→HTML attributes: added detail). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.


Introduction

The markup for a basic table is: 

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

This would produce:

Caption: example table
header1 header2 header3
row1cell1 row1cell2 row1cell3
row2cell1 row2cell2 row2cell3

{| opens a table, and |} closes it. class="wikitable" is used with a lot of tables on Wikipedia, and adds some standard formatting, and follows on the same line as {|.

|+ Caption: example table adds the caption "Caption: example table" to the top of the table. The caption is optional.

Columns headers are created by ! column name. Cells are created by | cell text. The divider between rows is |-. You can add an extra column by just sticking ! new column name at the end of the last column name. To fill the cells in that column, you need to add another cell to each row: fill it by typing | cell text. If you want to add an extra row, just add |- to the table, and fill it with however many cells are appropriate.

Blank spaces at the beginning of a line are ignored. Thus |row1cell1 and | row1cell1 are identical.

To add a pipe (|) character into cell contents, you need to use the <nowiki> markup.

To recap, the markup is as follow. All this markup must start on a new line, except for double marks.

{|

Table start: it is required.

|+

Table caption: it is optional. Only between table start and first table row

!

Table header cell: it is optional. Cells may start on new lines, each beginning with its own single mark. Cell contents may also be put on the next line.

!!

Consecutive table header cell: it is optional. Cells may be added on same lines separated by double marks.

|-

Table row: it is optional on the first row, but otherwise required. The wiki engine assumes the first row.

|

Table data cell: it is required for data cells on new lines. Cells may start on new lines, each beginning with its own single mark. Cell contents may also be put on the next line. It is also used to separate HTML attributes from cell contents (both data or header), or caption contents.

||

Consecutive table data cell: it is required for data cells on the same line. Cells may be added on same lines separated by double marks.

|}

Table end: it is required.

Using double marks with tables

The above markup must start on a new line. This includes the cell markup (| and !). But the double cell markup (|| and !!) can optionally be used for adding consecutive cells to a single line.

For example, this would produce the same table as above: 

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

HTML attributes

HTML attributes are often needed to be added to tables for various reasons. HTML attributes take the basic form:

Attribute="value"

Multiple attributes can be applied by repeating this:

Attribute1="value1" Attribute2="value2"

An example is the class attribute above. Other attributes that might be used is the style attribute for CSS styling, but also rowspan and colspan. For examples of attributes that can be used in tables see: Help:Table; Editing Wikitext/Tables at Wikibooks; and Wikipedia:Advanced table formatting.

Adding HTML attributes to cell content

This is how to cell contents, including header cell contents, and also captions.

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

Where HTML indicates a HTML attribute, for example style="background: yellow"

If the cells are onthe same line, HTML attributes can be added 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.

Cell contents on new lines

The following markup applies a yellow background to three cells: 

| style="background: yellow" | row1cell1
| style="background: yellow" | row1cell2
| style="background: yellow" | row1cell3

Cell contents can be added to new lines if so desired. So therefore the following markup would have a similar effect to the above: 

| style="background: yellow" | 
row1cell1
| style="background: yellow" | 
row1cell2
| style="background: yellow" | 
row1cell3

Adding 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, where HTML indicates single attributes (e.g. class="wikitable") or multiple attributes (e.g. class="wikitable" style="background: yellow")

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

HTML attribute summary

  • All table markup, except table end (|}), optionally accepts one or more HTML attributes on the same line.
  • Cell markup (|, ||, !, !!) and caption markup (|+) hold content. So separate any attributes from content with a single pipe (|), even when cell content is on a new line, which is permissible.
  • Cell content may follow on the same line after its cell markup (which may include HTML attributes); or on lines below the cell markup. Cell content that uses its own markup may need to start on a new line; this can happen with things like lists, headings, or nested tables.
  • Table and row markup ({| and |-) do not directly hold content. Therefore, do not add a pipe (|) after any HTML attributes.
Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=User:Mrjulesd/sandbox/3&oldid=694495793"