Tables - Revision history

Z8600021 at 06:03, 15 February 2018

2018-02-15T06:03:33Z

← Older revision		Revision as of 17:03, 15 February 2018
Line 12:		Line 12:


	:{{~~Template:~~Editing Links}}		{{Editing Links}}

	==Note on HTML==		==Note on HTML==
Line 754:		Line 754:
	\|}		\|}

	{{~~Template:~~Glossary}}		{{Glossary}}

	{{~~Template:~~Footer}}		{{Footer}}

	[[Category:Help]]		[[Category:Help]][[Category:Table]]

S8600021: /* Note on HTML */

2011-04-05T21:03:43Z

Note on HTML

← Older revision		Revision as of 08:03, 6 April 2011
Line 17:		Line 17:
	Throughout this article, HTML and Wiki Code are shown side by side. The reason for this is twofold: So those experienced with HTML can look at the HTML code and have a better idea of what is going on, and so those who don't know HTML table code can learn both.		Throughout this article, HTML and Wiki Code are shown side by side. The reason for this is twofold: So those experienced with HTML can look at the HTML code and have a better idea of what is going on, and so those who don't know HTML table code can learn both.

			There are also online tools where HTML code can be pasted and converted to Wiki code.

			Online tools: [http://www.ebruni.it/en/software/os/i_love_wiki/index.mpl HTML to Wiki convertor] \| [http://en.wikipedia.org/wiki/Wikipedia:Tools/Editing_tools Wiki Editing tools]

	==The Basic Structure==		==The Basic Structure==

S8600021 at 01:39, 10 November 2010

2010-11-10T01:39:33Z

← Older revision		Revision as of 12:39, 10 November 2010
Line 1:		Line 1:
	==Introduction==		==Introduction==
	~~{\| border=1~~		[[File:Mark Hill.jpg\|thumb\|Dr Mark Hill]]
	\| 1		A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wiki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.
	\| 2
	\|-
	~~\| 3~~
	~~\| 4~~
	\|} A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in ~~Wki~~ code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.

	# Begin with the simplest table format possible (on your discussion page).		# Begin with the simplest table format possible (on your discussion page).
Line 15:		Line 10:

	The content on this current page is modified from [http://askdrwiki.com/mediawiki/index.php?title=Help:Tables AskDrWiki Help:Tables].		The content on this current page is modified from [http://askdrwiki.com/mediawiki/index.php?title=Help:Tables AskDrWiki Help:Tables].


			:{{Template:Editing Links}}

	==Note on HTML==		==Note on HTML==

S8600021: /* Introduction */

2010-06-14T22:27:40Z

Introduction

← Older revision		Revision as of 09:27, 15 Haziran 2010
Line 6:		Line 6:
	\| 3		\| 3
	\| 4		\| 4
	\|}		\|} A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.
	A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.

	# Begin with the simplest table format possible (on your discussion page).		# Begin with the simplest table format possible (on your discussion page).

S8600021 at 22:27, 14 Haziran 2010

2010-06-14T22:27:25Z

← Older revision		Revision as of 09:27, 15 Haziran 2010
Line 1:		Line 1:
			==Introduction==
	{\| border=1		{\| border=1
	\| 1		\| 1
Line 6:		Line 6:
	\| 3		\| 3
	\| 4		\| 4
	\|}		\|}

	~~==Introduction==~~
	A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.		A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.

S8600021 at 22:27, 14 Haziran 2010

2010-06-14T22:27:05Z

← Older revision		Revision as of 09:27, 15 Haziran 2010
Line 1:		Line 1:
	~~<right>~~
	{\|		{\| border=1
	\| 1		\| 1
	\| 2		\| 2
Line 7:		Line 7:
	\| 4		\| 4
	\|}		\|}
	~~</right>~~
	==Introduction==		==Introduction==
	A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.		A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.

S8600021 at 22:26, 14 Haziran 2010

2010-06-14T22:26:40Z

← Older revision		Revision as of 09:26, 15 Haziran 2010
Line 1:		Line 1:
			<right>
	{\|		{\|
	\| 1		\| 1
Line 6:		Line 7:
	\| 4		\| 4
	\|}		\|}
			</right>
	==Introduction==		==Introduction==
	A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.		A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.

S8600021 at 22:26, 14 Haziran 2010

2010-06-14T22:26:06Z

← Older revision		Revision as of 09:26, 15 Haziran 2010
Line 1:		Line 1:
			{\|
			\| 1
			\| 2
			\|-
			\| 3
			\| 4
			\|}
	==Introduction==		==Introduction==
	A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.		A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.

S8600021: Created page with '==Introduction== A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and forma…'

2010-06-09T02:18:18Z

Created page with '==Introduction== A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and forma…'

New page

==Introduction==
A good table will allow the reader to summarise and compare information in different categories that would otherwise be lost in your page text. Writing and formatting table in Wki code can sometimes be a little difficult for new, and even experienced, users. Note that if you have previously used HTML code this can also be used on your page if you find that format easier to use. Both versions are shown below. In many cases you will need to play around with the appearance and layout to get it right.

# Begin with the simplest table format possible (on your discussion page).
# Then without deleting your first table, copy and paste the entire code below the first table, now you have a version to play with.
# Then play with the column width and heights (not so much heights), so that it appears correctly on your page (this will vary for other users depending on their screen size and browser window).
# Them play with colours, don't use colour and text combinations that are difficult to read.
# Once you are an expert you can try sorted tables, but I have not had much use for them here to date.

The content on this current page is modified from [http://askdrwiki.com/mediawiki/index.php?title=Help:Tables AskDrWiki Help:Tables].

==Note on HTML==
Throughout this article, HTML and Wiki Code are shown side by side. The reason for this is twofold: So those experienced with HTML can look at the HTML code and have a better idea of what is going on, and so those who don't know HTML table code can learn both.

==The Basic Structure==
===Building Blocks===
In HTML, table tags are used to begin and end a table. A similar idea is present in wiki code, using the '''curled bracket''' and '''pipe''' to begin and end a table. Note that these have to be the first characters on a line, or they will be ignored by the wiki. Examples:
*HTML
**Open table: <table>
**Close table: </table>
*WIKI
**Open table: {|
**Close table: |}
This forms the containing body of the table.

Next is the rows. In HTML, a opening and closing tag is required to begin and end a row. This is different in Wiki code, as a single set of a '''pipe''' and '''dash''' (followed by hitting enter once) and is needed only at the start of a new row. Examples:
*HTML
**Begin row: <tr>
**End row: </tr>
*WIKI
**Begin row: |-
Rows contain the cells.

Finnally, of the basic structure, there are cells. In HTML, a cell is defined by it's opening and closing tags. As with rows, the wiki equivalent is also fairly different using a simple '''pipe''' to begin a cell, and a '''double pipe''' to separate cells on the same line. Example:
*HTML
**Begin cell: <td>
**End cell: </td>
*WIKI
**Begin cell: |
**Separate cells: || (or press enter)
Cells contain the table's actual content.

===Putting Them Together===
{| width="75%" style="border: solid 1px #aaaaff" cellpadding="4" cellspacing="1"
|-
| bgcolor="#eeeeff" | '''HTML TABLE'''
| bgcolor="#ddddff" | '''WIKI TABLE'''
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 1 - Starting the table'''
|- valign="bottom"
| bgcolor="#eeeeff" width="50%" align="left" | To begin our basic HTML table, we start with the opening tag, '''<table>'''. I perfer to hit enter immediately after this tag so it's easier to find the beginning of the table.

<table>
| bgcolor="#ddddff" width="50%" align="left" | To begin our basic wiki table, we start with the opening characters, '''<nowiki>{|</nowiki>'''. Unless you are putting tags here, hitting enter is necessary.

<nowiki>{|</nowiki>
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 2 - Starting a row'''
|- valign="bottom"
| align="left" bgcolor="#eeeeff" | Next, we have to add our first row, by using the '''<tr>''' tag.

<table>
<tr>
| bgcolor="#ddddff" align="left" | Next, we have to add our first row, by using the characters '''<nowiki>|-</nowiki>'''. Again, unless you are putting tags here, hitting enter is necessary.

<nowiki>{|</nowiki>
<nowiki>|-</nowiki>
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 3 - Adding a cell'''
|- valign="bottom"
| align="left" bgcolor="#eeeeff" | Next, we have to add our first cell, by using the '''<td>''' and '''</td>''' tags. We'll also be putting some content between them.

<table>
<tr>
<td>This is content</td>
| bgcolor="#ddddff" align="left" | Next, we have to add our first cell, by using the'''<nowiki>|</nowiki>''' character. Unless you are putting tags here, the content come immediately after. No closing "tag" is needed.

<nowiki>{|</nowiki>
<nowiki>|-</nowiki>
<nowiki>| This is content</nowiki>
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 4 - Adding another cell. <br/> Note: If you do not wish to add another cell, skip this step.'''
|- valign="bottom"
| align="left" bgcolor="#eeeeff" | Next, we will add our second cell, by using the '''<td>''' and '''</td>''' tags again. We'll be putting some content between them as well.

<table>
<tr>
<td>This is content</td>
<td>This is more content</td>
| bgcolor="#ddddff" align="left" | Next, we will add our second cell, by pressing enter, and using the '''<nowiki>|</nowiki>''' character again. We'll be putting some content here as well. Alternatively, instead of pressing enter and adding a new '''<nowiki>|</nowiki>''', you can instead simply add '''<nowiki>||</nowiki>''' on the same line, and add the content there. The example to the right uses the former method.

<nowiki>{|</nowiki>
<nowiki>|-</nowiki>
<nowiki>| This is content</nowiki>
<nowiki>| This is more content</nowiki>
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 5 - Finishing off the row.'''
|- valign="bottom"
| align="left" bgcolor="#eeeeff" | To end the row, simply add the '''</tr>''' tag.

<table>
<tr>
<td>This is content</td>
<td>This is more content</td>
</tr>
| bgcolor="#ddddff" align="left" | This step is not needed using wiki table code.

<nowiki>{|</nowiki>
<nowiki>|-</nowiki>
<nowiki>| This is content</nowiki>
<nowiki>| This is more content</nowiki>
 
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 6 - Adding another row. <br/> Note: If you do not wish to add another row, skip this step.'''
|- valign="bottom"
| align="left" bgcolor="#eeeeff" | To add another row, repeat steps 2 Thru 5.

<table>
<tr>
<td>This is content</td>
<td>This is more content</td>
</tr>
<tr>
<td>This is even more content</td>
<td>This is EVEN MORE content</td>
</tr>
| bgcolor="#ddddff" align="left" | To add another row, repeat steps 2 Thru 5 .

<nowiki>{|</nowiki>
<nowiki>|-</nowiki>
<nowiki>| This is content</nowiki>
<nowiki>| This is more content</nowiki>
<nowiki>|-</nowiki>
<nowiki>| This is even more content</nowiki>
<nowiki>| This is EVEN MORE content</nowiki>
<br/>
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 7 - Finishing the table.'''
|- valign="bottom"
| align="left" bgcolor="#eeeeff" | Put '''</table>''' at the end and you're done! Hit preview to look at your work.

<table>
<tr>
<td>This is content</td>
<td>This is more content</td>
</tr>
<tr>
<td>This is even more content</td>
<td>This is EVEN MORE content</td>
</tr>
</table>
| bgcolor="#ddddff" align="left" | Put '''<nowiki>|}</nowiki>''' at the end and you're done! Hit preview to look at your work..

<nowiki>{|</nowiki>
<nowiki>|-</nowiki>
<nowiki>| This is content</nowiki>
<nowiki>| This is more content</nowiki>
<nowiki>|-</nowiki><br/><nowiki>| This is even more content</nowiki>
<nowiki>| This is EVEN MORE content</nowiki>
<nowiki>|}</nowiki>
<br/>
|-
| bgcolor="#ddddff" style="border: solid 1px #aaaaff" colspan="2" align="left" | '''Step 8 - The finished product. Following the steps above, the table should look similar to these. It may be wider, filling the entire page, and it might different from browser to browser.'''
|- valign="center"
| align="center" bgcolor="#eeeeff" |<br/><br/><table><tr><td>This is content</td><td>This is more content</td></tr><tr><td>This is even more content</td><td>This is EVEN MORE content</td></tr></table><br/><br/>
| align="center" bgcolor="#ddddff" |<br/><br/>
{|
|-
| This is content
| This is more content
|-
| This is even more content
| This is EVEN MORE content
|}<br/><br/>
|}

==Advanced Formatting==
Generally, the exact same attributes can be added to both HTML Table Tags and Wiki Tables to produce the same, or similiar results.

===Background Color===

The following works with both HTML and Wiki syntax:
{|
|-
|<pre>bgcolor="#00ff00"</pre>|| -or- ||<pre>bgcolor="green"</pre>
|}

The following can also be used on HTML and Wiki tables, and uses "style" statements.:
{|
|<pre>style="background:#00ff00"</pre>|| -or- ||<pre>style="background:green"</pre>
|}

The above will change the background color of an entire table, row or a single cell, depending on where it is put. Note that either '''Hexadecimal Color Codes''' or [[web colors | '''Color Names''']] can be used. Using names is highly encouraged. Row's color overrides table's color, and cell's overrides row's color. To color a column, you have to set every cells's color invidually.

Example:

{| style="border: solid 1px #a0a0ff" cellpadding="10"
|- bgcolor="#eeeeff"
| HTML Code (top) and Wiki Code (Bottom)
| Result
|- bgcolor="#eeeeff"
|
<table>
<tr '''''bgcolor="#bbbbbb"'''''>
<td>The cells in this row</td>
<td>are light grey</td>
</tr>
<tr '''''style="background:grey"'''''>
<td>The cells in this row</td>
<td>are simply grey</td>
</tr>
</table>
| rowspan="2" |
{|
|- bgcolor="#bbbbbb"
| The cells in this row
| are light grey
|- style="background:grey"
| The cells in this row
| are simply grey
|}
|- bgcolor="#eeeeff"
|
<nowiki>{</nowiki>|
<nowiki>|</nowiki>-'''''bgcolor="#bbbbbb"'''''
<nowiki>|</nowiki> The cells in this row
<nowiki>|</nowiki> are light grey
<nowiki>|</nowiki>-'''''style="background:grey"'''''
<nowiki>|</nowiki> The cells in this row
<nowiki>|</nowiki> are simply grey
<nowiki>|</nowiki>}
|- bgcolor="#eeeeff"
|
<table '''''style="background:yellow"'''''>
<tr>
<td>This table is yellow</td>
<td '''''bgcolor="green"''''' >But this cell is green</td>
</tr>
<tr '''''bgcolor="blue"'''''>
<td>This row is blue</td>
<td '''''style="background:red"'''''>And this cell is red</td>
</tr>
</table>
| rowspan="2" |
{| style="background:yellow"
|-
| This table is yellow
| bgcolor="green" | But this cell is green
|- bgcolor="blue"
| This row is blue
| style="background:red" | And this cell is red
|}
|- bgcolor="#eeeeff"
|
<nowiki>{</nowiki>| '''''style="background:yellow"'''''
<nowiki>|</nowiki>-
<nowiki>|</nowiki> This table is yellow
<nowiki>|</nowiki> '''''bgcolor="green"''''' | But this cell is green
<nowiki>|</nowiki>- '''''bgcolor="blue"'''''
<nowiki>|</nowiki> This row is blue
<nowiki>|</nowiki> '''''style="background:red"''''' | And this cell is red
<nowiki>|</nowiki>}
|}

===Width and height===

You can set the width and height of the whole table, and width of a column and heigh of a row. To set the width of a column, you must specify width of a single cell on that column.

The syntax is

{|
|-
|<pre>width="80%" height="100px"</pre>
| -or-
|<pre>style="width:80%; height:100px"</pre>
|}

Either of these would create a table that fills 80% of the screen horizontally, and is exacly 100 pixels high.

'''Example using "style" syntax:'''

<pre>
{| style="width:80%; height:100px" border="1"
|-
| This table fills 80% of the space available to it,
| and is 100 pixels high
|- style="height:50px"
| style="width:75%" |This column takes 75% of the table
| and this row is 50 pixels high
|-
| I'm really running out of
| things to say
|}
</pre>

{| style="width:80%; height:100px" border="1"
|-
| This table fills 80% of the space available to it,
| and is 100 pixels high
|- style="height:50px"
| style="width:75%" |This column takes 75% of the table
| and this row is 50 pixels high
|-
| I'm really running out of
| things to say
|}

===Cell Spacing and Padding===
Cell padding and spacing are two mostly overlooked features of tables. Cellpadding is the margins of a cell, and cellspacing is the distance between them. Observe the following.

{| style="border: solid 1px #a0a0ff" cellpadding="10"
|- bgcolor="#eeeeff"
| align="center" colspan="2" | Cellspacing
| align="center" colspan="2" | Cellpadding
|- bgcolor="#eeeeff"
| align="center" | Normal
| align="center" | Cellspacing of<br/>10 pixels
| align="center" | Normal
| align="center" | Cellpadding of<br/>10 pixels
|- bgcolor="#eeeeff"
| align="center" valign="center" |
{| border="1px"
|-
|Cell X
|Cell Y
|-
|Cell Z
|Cell Q
|}
| align="center" valign="center" |
{| border="1px" cellspacing="10"
|-
|Cell X
|Cell Y
|-
|Cell Z
|Cell Q
|}
| align="center" valign="center" |
{| border="1px"
|-
|Cell X
|Cell Y
|-
|Cell Z
|Cell Q
|}
| align="center" valign="center" |
{| border="1px" cellpadding="10"
|-
|Cell X
|Cell Y
|-
|Cell Z
|Cell Q
|}
|- bgcolor="#eeeeff"
| align="center" colspan="4" | Wiki Code for the Above
|- bgcolor="#eeeeff"
| align="left" colspan="2" |
<nowiki>{</nowiki>| border="1px" cellspacing="10"
<nowiki>|</nowiki>-
<nowiki>|</nowiki>Cell X
<nowiki>|</nowiki>Cell Y
<nowiki>|</nowiki>-
<nowiki>|</nowiki>Cell Z
<nowiki>|</nowiki>Cell Q
<nowiki>|</nowiki>}
| align="left" colspan="2" |
<nowiki>{</nowiki>| border="1px" cellpadding="10"
<nowiki>|</nowiki>-
<nowiki>|</nowiki>Cell X
<nowiki>|</nowiki>Cell Y
<nowiki>|</nowiki>-
<nowiki>|</nowiki>Cell Z
<nowiki>|</nowiki>Cell Q
<nowiki>|</nowiki>}
|- bgcolor="#eeeeff"
| align="center" colspan="4" | HTML Code for the Above
|- bgcolor="#eeeeff"
| align="left" colspan="2" |
<table border="1px" cellspacing="10">
<tr>
<td>Cell X</td>
<td>Cell Y</td>
</tr>
<tr>
<td>Cell Z</td>
<td>Cell Q</td>
</tr>
</table>
| align="left" colspan="2" |
<table border="1px" cellpadding="10">
<tr>
<td>Cell X</td>
<td>Cell Y</td>
</tr>
<tr>
<td>Cell Z</td>
<td>Cell Q</td>
</tr>
</table>
|}

===Positioning===
You can position the whole table, content of a single row or content of a single cell. You can define positioning in either horizontal or vertical direction.

====align====
'''align''' keyword controls the horizontal positioning. Normally everything is positioned to the left. '''align''' has two possible values: ''right'' and ''center''.

The location of '''align''' word controls the word's scope. See following examples for clarification.

'''Whole table, right'''

<pre>
{| border="1" align="right"
|-
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}
</pre>

'''Result:'''

{| border="1" align="right"
|-
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}

Note that aligning tables to right might cause unexpected results with some browsers. In some cases the table will overlap other elements on the page.

'''Whole table, center'''

<pre>
{| border="1" align="center"
|-
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}
</pre>

'''Result:'''

{| border="1" align="center"
|-
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}

'''Row, right:'''

<pre>
{| border="1"
|- align="right"
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}
</pre>

'''Result:'''

{| border="1"
|- align="right"
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}

'''Row, center:'''

<pre>
{| border="1"
|- align="center"
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}
</pre>

'''Result:'''

{| border="1"
|- align="center"
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}

Notice that in both examples only the first row was affected. To align also the other rows to the right you would need to put '''align''' to every row, or alternatively use '''text-align''' with '''style''':

'''Text-align:'''

<pre>
{| border="1" style="text-align:center"
|-
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}
</pre>

'''Result:'''

{| border="1" style="text-align:center"
|-
|text||text||text
|-
|long text||longer text||even longer text
|-
|medium||large||extra large
|}

Cells follow the same principle, '''align''' will only affect one cell. They will otherwise work as rows.

====valign====
'''valign''', or ''vertical align'', controls the vertical position of the text. '''valign''' can have to values, ''top'' or ''bottom''.

Compare these two examples. On the left, no '''valign''' tags are used. On the right, both ''top'' and ''bottom'' tags are used, ''top'' for the middle row and ''bottom'' for the bottom row. As you can see on the left size, the default for vertical alignment is middle.

{|
|-
|
<pre>
{| border="1"
|-
|text||text||text
|-
|min||max||some<br>really<br>long<br>text
|-
|medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large
|}
</pre>
|
<pre>
{| border="1"
|-
|text||text||text
|- valign="top"
|min||max||some<br>really<br>long<br>text
|- valign="bottom"
|medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large
|}
</pre>
|-
|align="center"|
{| border="1"
|-
|text||text||text
|-
|min||max||some<br>really<br>long<br>text
|-
|medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large
|}
|align="center"|
{| border="1"
|-
|text||text||text
|- valign="top"
|min||max||some<br>really<br>long<br>text
|- valign="bottom"
|medium||large<br>large||extra<br>large<br>extra<br>large<br>extra<br>large
|}
|}

===Row and Column Span===

There are two attributes, '''rowspan and colspan''', that can expland cells accross rows and columns, respectively.

Example Syntax
{|
|<pre>rowspan="3"</pre>|| -and- ||<pre>colspan="5"</pre>
|}

These are placed where the cell's attributes would go, as show in the examples below.

{| style="border: solid 1px #a0a0ff" cellpadding="10"
|- bgcolor="#eeeeff"
| HTML Code (top) and Wiki Code (Bottom)
| Result
|- bgcolor="#eeeeff"
|
<table border="1">
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td '''''colspan="3"'''''>Row 2, Col 1-3</td>
<td>Row 2, Col 4</td>
</tr>
</table>
| rowspan="2" |
{| border="1"
|-
| Row 1, Col 1
| Row 1, Col 2
| Row 1, Col 3
| Row 1, Col 4
|-
| colspan="3" |Row 2, Col 1-3
| Row 2, Col 4
|}
|- bgcolor="#eeeeff"
|
<nowiki>{</nowiki>| border="1"
<nowiki>|</nowiki>-
<nowiki>|</nowiki> Row 1, Col 1
<nowiki>|</nowiki> Row 1, Col 2
<nowiki>|</nowiki> Row 1, Col 3
<nowiki>|</nowiki> Row 1, Col 4
<nowiki>|</nowiki>-
<nowiki>|</nowiki> '''''colspan="3"''''' |Row 2, Col 1-3
<nowiki>|</nowiki> Row 2, Col 4
<nowiki>|</nowiki>}
|- bgcolor="#eeeeff"
|
<table border="1">
<tr>
<td '''''rowspan="2"'''''>Row 1-2, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
<td>Row 2, Col 3</td>
</tr>
</table>
| rowspan="2" |
{| border="1"
|-
| rowspan="2" |Row 1-2, Col 1
| Row 1, Col 2
| Row 1, Col 3
| Row 1, Col 4
|-
| Row 2, Col 2
| Row 2, Col 3
| Row 2, Col 4
|}
|- bgcolor="#eeeeff"
|
<nowiki>{</nowiki>| border="1"
<nowiki>|</nowiki>-
<nowiki>|</nowiki> '''''rowspan="2"''''' |Row 1-2, Col 1
<nowiki>|</nowiki> Row 1, Col 2
<nowiki>|</nowiki> Row 1, Col 3
<nowiki>|</nowiki> Row 1, Col 4
<nowiki>|</nowiki>-
<nowiki>|</nowiki> Row 2, Col 2
<nowiki>|</nowiki> Row 2, Col 3
<nowiki>|</nowiki> Row 2, Col 4
<nowiki>|</nowiki>
|- bgcolor="#eeeeff"
|
<table border="1">
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td>Row 1, Col 4</td>
</tr>
<tr>
<td '''''rowspan="2" colspan="2"'''''>Row 2-3, Col 1-2</td>
<td>Row 2, Col 3</td>
<td>Row 2, Col 3</td>
</tr>
<tr>
<td>Row 3, Col 3</td>
<td>Row 3, Col 3</td>
</tr>
</table>
| rowspan="2" |
{| border="1"
|-
| Row 1, Col 1
| Row 1, Col 2
| Row 1, Col 3
| Row 1, Col 4
|-
| rowspan="2" colspan="2"|Row 2-3, Col 1-2
| Row 2, Col 3
| Row 2, Col 4
|-
| Row 3, Col 3
| Row 3, Col 4
|}
|- bgcolor="#eeeeff"
|
<nowiki>{</nowiki>| border="1"
<nowiki>|</nowiki>-
<nowiki>|</nowiki> Row 1, Col 1
<nowiki>|</nowiki> Row 1, Col 2
<nowiki>|</nowiki> Row 1, Col 3
<nowiki>|</nowiki> Row 1, Col 4
<nowiki>|</nowiki>-
<nowiki>|</nowiki> '''''rowspan="2" colspan="2"''''' |Row 2-3, Col 1-2
<nowiki>|</nowiki> Row 2, Col 3
<nowiki>|</nowiki> Row 2, Col 4
<nowiki>|</nowiki>-
<nowiki>|</nowiki> Row 3, Col 3
<nowiki>|</nowiki> Row 3, Col 4
<nowiki>|</nowiki>
<nowiki>|</nowiki>}
|}

{{Template:Glossary}}

{{Template:Footer}}

[[Category:Help]]