Jump to content

User:Mrjulesd/sandbox/3: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
added details
←Replaced content with '{{user sandbox}}'
Tag: Replaced
 
(38 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{user sandbox}}


==Introduction==
The markup for a basic table is:

<pre style="width:50%">
{| class="wikitable"
|+ Caption: example table
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}
</pre>

This would produce:

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

As you can see, columns headers are created by <code>!&nbsp;column&nbsp;name</code>. Cells are created by <code>|&nbsp;cell&nbsp;text</code>. The divider between rows is <code>|-</code>. You can add an extra column by just sticking <code>!&nbsp;new&nbsp;column&nbsp;name</code> 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 <code>|&nbsp;cell&nbsp;text</code>. If you want to add an extra row, just add <code>|-</code> to the table, and fill it with however many cells are appropriate.

* Blank spaces at the beginning of a line are ignored.
* Escaping to insert a pipe (<code>|</code>) character into a table can be done using the {{xtag|nowiki}} markup.
* <code>class="wikitable"</code> is used with a lot of tables on Wikipedia, and adds some standard formatting.

To recap, the markup is:

{| class="wikitable"
|
<nowiki />{|
| '''table start:''' ''required!''
|-
|
<nowiki />|+
| '''table caption:''' ''optional.'' Only between '''table start''' and '''first table row'''
|-
|
<nowiki />!
| '''table header cell:''' ''optional.'' Consecutive cells may be added on same lines separated by double marks (<code>!!</code>); or start on new lines, each beginning with its own single mark (<code>!</code>).
|-
|
<nowiki />|-
| '''table row''': ''optional on first row, otherwise required''. The wiki engine assumes the first row.
|-
|
<nowiki />|
| '''table data cell''': ''required!'' Consecutive cells may be added on same lines separated by double marks (<code><nowiki>||</nowiki></code>); or start on new lines, each beginning with its own single mark (<code><nowiki>|</nowiki></code>). Single marks are also used to separate HTML attributes from cell contents (both data or header), or caption contents.
|-
|
<nowiki />|}
| '''table end:''' ''required!''
|}

==Using double marks with tables==

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

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

<pre style="width:60%">
{| class="wikitable"
|+ Caption: example table
|-
! header1 !! header2 !! header3
|-
| row1cell1 || row1cell2 || row1cell3
|-
| row2cell1 || row2cell2 || row2cell3
|}
</pre>

==HTML attributes==

[[HTML attributes]] are often needed to be added to tables for various reasons. An example is the <code>class="wikitable"</code> above. Other attributes that might be used is the <code>style</code> attribute for [[CSS]] styling, but also <code>rowspan</code> and <code>colspan</code>. For examples of attributes that can be used in tables see: [[Help:Table]]; {{Wikibooks-inline|Editing Wikitext/Tables}}; 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. <code>row1cell1</code>. The markup for cells and captions are: <code>|</code>, <code>||</code>, <code>!</code>, <code>!!</code> and <code>|+</code>. HTML attributes need to be kept separate from cell content or captions with a single pipe (<code>|</code>). Cell content or captions may follow on the same line, or on a following line.

So HTML attributes can be inserted like this:

<pre style="width:30%">
| HTML | row1cell1
| HTML | row1cell2
| HTML | row1cell3
</pre>

Where <code>HTML</code> indicates a HTML attribute, for example <code>style="background: yellow"</code>

If the cells are onthe same line, HTML attributes can be added like this: <code>| HTML | row1cell1 || HTML | row1cell2 || HTML | row1cell3 </code>

Adding to the ''header'' can be done like this:

<pre style="width:30%">
! HTML | header1
! HTML | header2
! HTML | header3
</pre>

Or like this: <code>! HTML | header1 !! HTML | header2 !! HTML | header3 </code>

Adding to the ''caption'' is done like this: <code> |+ HTML | Caption Title </code>

For example, lets say we wanted to make some cell backgrounds yellow colored. The HTML attribute to do so is <code>style="background: yellow"</code>. It could be added to some cells in a table like this:
<pre style="width:70%">
{| class="wikitable"
|+ Caption: some cells yellow.
|-
! header1
! header2
! header3
|-
| style="background: yellow" | row1cell1
| row1cell2
| style="background: yellow" | row1cell3
|-
| row2cell1
| style="background: yellow" | row2cell2
| row2cell3
|}
</pre>

Then it would produce 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
|}

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:

<pre style="width:70%">
| style="background: yellow" | row1cell1
| style="background: yellow" | row1cell2
| style="background: yellow" | row1cell3
</pre>

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

<pre style="width:70%">
| style="background: yellow" |
row1cell1
| style="background: yellow" |
row1cell2
| style="background: yellow" |
row1cell3
</pre>

===Adding HTML attributes to tables and rows===

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

HTML attributes can be added to the table markup like this: <code>{| HTML</code>.

HTML attributes can be added to the row markup like this: <code>|- HTML</code>

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

<pre style="width:90%">
{| class="wikitable" style="background: yellow"
|+ Caption: yellow contents.
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}
</pre>

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

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

===HTML attribute summary===

* All table markup, except table end (<code>|}</code>), optionally accepts one or more HTML attributes on the same line.
* Cell markup (<code>|</code>, <code>||</code>, <code>!</code>, <code>!!</code>) and caption markup (<code>|+</code>) hold content. So separate any attributes from content with a single pipe (<code>|</code>), 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 (<code>{|</code> and <code>|-</code>) do not directly hold content. Therefore, do ''not'' add a pipe (<code>|</code>) after any HTML attributes.

Latest revision as of 00:43, 7 February 2023

Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=User:Mrjulesd/sandbox/3&oldid=1137902963"