Help:Table Tutorial

From Embryology

Introduction

Dr Mark Hill

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.

  1. Begin with the simplest table format possible (on your discussion page).
  2. Then without deleting your first table, copy and paste the entire code below the first table, now you have a version to play with.
  3. 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).
  4. Them play with colours, don't use colour and text combinations that are difficult to read.
  5. Try also to keep all tables on your page a similar structure/colour.
  6. Once you are an expert you can try sortable tables, only useful if you want the reader to reorganise the information within the table.
  7. Another very useful tool is the Collapsible Table sitting on you page with hidden jewels of additional information, but not disrupting the general flow of your existing content.

The last section on this page Typical Table Template shows the general basic table structure used on this website. Use these templates to get started on your own pages.

Some content on this current page is modified from AskDrWiki Help:Tables.


Editing Links: Editing Basics | Images | Tables | Referencing | Journal Searches | Copyright | Font Colours | Virtual Slide Permalink | My Preferences | One Page Wiki Card | Printing | Movies | Language Translation | Student Movies | Using OpenOffice | Mobile Access | Internet Browsers | Moodle | Navigation/Contribution | Short URLs

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.

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

Online tools: HTML to Wiki convertor | Wiki Editing tools

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

HTML TABLE WIKI TABLE
Step 1 - Starting the table
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> 
To begin our basic wiki table, we start with the opening characters, {|. Unless you are putting tags here, hitting enter is necessary.
{|
Step 2 - Starting a row
Next, we have to add our first row, by using the <tr> tag.
<table>
 <tr> 
Next, we have to add our first row, by using the characters |-. Again, unless you are putting tags here, hitting enter is necessary.
{|
|-
Step 3 - Adding a cell
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> 
Next, we have to add our first cell, by using the| character. Unless you are putting tags here, the content come immediately after. No closing "tag" is needed.
{|
|-
| This is content
Step 4 - Adding another cell.
Note: If you do not wish to add another cell, skip this step.
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> 
Next, we will add our second cell, by pressing enter, and using the | character again. We'll be putting some content here as well. Alternatively, instead of pressing enter and adding a new |, you can instead simply add || on the same line, and add the content there. The example to the right uses the former method.
{|
|-
| This is content
| This is more content
Step 5 - Finishing off the row.
To end the row, simply add the </tr> tag.
<table>
 <tr>
  <td>This is content</td>
  <td>This is more content</td>
 </tr> 
This step is not needed using wiki table code.
{|
|-
| This is content
| This is more content
 
Step 6 - Adding another row.
Note: If you do not wish to add another row, skip this step.
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>  
To add another row, repeat steps 2 Thru 5 .
{|
|-
| This is content
| This is more content
|-
| This is even more content
| This is EVEN MORE content

Step 7 - Finishing the table.
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>  
Put |} at the end and you're done! Hit preview to look at your work..
{|
|-
| This is content
| This is more content
|-
| This is even more content | This is EVEN MORE content |}
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.


This is contentThis is more content
This is even more contentThis is EVEN MORE content




This is content This is more content
This is even more content This is EVEN MORE content


Alternative Table Format

{| class="pretty table"

Table Title
row 1 column 2
row 1 column 2

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:

bgcolor="#00ff00"
-or-
bgcolor="green"

The following can also be used on HTML and Wiki tables, and uses "style" statements.:

style="background:#00ff00"
-or-
style="background:green"

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

HTML Code (top) and Wiki Code (Bottom) Result
<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>
The cells in this row are light grey
The cells in this row are simply grey
{| 
|-bgcolor="#bbbbbb" 
| The cells in this row
| are light grey
|-style="background:grey"
| The cells in this row
| are simply grey
|}
<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>
This table is yellow But this cell is green
This row is blue And this cell is red
{| 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
|}

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

width="80%" height="100px"
-or-
style="width:80%; height:100px"

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


Example using "style" syntax:

{| 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
|}
This table fills 80% of the space available to it, and is 100 pixels high
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.


Cellspacing Cellpadding
Normal Cellspacing of
10 pixels
Normal Cellpadding of
10 pixels
Cell X Cell Y
Cell Z Cell Q
Cell X Cell Y
Cell Z Cell Q
Cell X Cell Y
Cell Z Cell Q
Cell X Cell Y
Cell Z Cell Q
Wiki Code for the Above
{| border="1px" cellspacing="10"
|-
|Cell X
|Cell Y
|-
|Cell Z
|Cell Q
|}
{| border="1px" cellpadding="10"
|-
|Cell X
|Cell Y
|-
|Cell Z
|Cell Q
|}
HTML Code for the Above
<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>
<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

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


Result:

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

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


Result:

text text text
long text longer text even longer text
medium large extra large


Row, right:

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


Result:

text text text
long text longer text even longer text
medium large extra large

Row, center:

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


Result:

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:

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


Result:

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.

{| 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
|}
{| 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
|}
text text text
min max some
really
long
text
medium large
large
extra
large
extra
large
extra
large
text text text
min max some
really
long
text
medium large
large
extra
large
extra
large
extra
large

Row and Column Span

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

Example Syntax

rowspan="3"
-and-
colspan="5"

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

HTML Code (top) and Wiki Code (Bottom) Result
<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>
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1-3 Row 2, Col 4
{| 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
|}
<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>
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
{| 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
|
<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>
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2-3, Col 1-2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 3 Row 3, Col 4
{| 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
|
|}


Sortable Tables

  • There is the option to include a small about of code in the header that will allow sorting of the table contents.
  • This should only be used by those experienced in the results.
  • Numbers, letters and + to ++++ values can be used.
Sortable table
Region Intensity
A 3
B 1
C 4
D 2

Collapsible Tables

New code, you can tell if table has new code as it will open and has "EXPAND"

{| class="wikitable mw-collapsible mw-collapsed" 


Author Comments  
This is something more you want to say or show, but do not want to be visible immediately.


About these collapsible tables  
Mark Hill.jpg
Ever wanted additional information to be available to the reader, but want the the online material not to be cluttered with your useful (but long winded) explanation? Along comes collapsible tables. Yes all those important remarks, links, pictures, movies, or expanded explanations can be hidden and await the reader clicking "show". Just as quickly the information can be collapsed away again by clicking "hide". A very useful tool, don't forget to give the table a name that hints at its content.


About open collapsible tables  
Simply remove "mw-collapsed" from the first line and when the page is opened the table is also set to default be open as well. The information can still be collapsed away again by clicking "hide".


Typical Table Template

  • Shown below is a typical able format used on this website.
  • I have tried to use subtle background pastel shading (blues) to indicate headings (dark blue) and then alternate rows in a white and a light blue.
  • Finish the table last row displayed as light blue (add a blank row that colour if it is not in sequence).


To use this template:

  1. View this page section in edit mode.
  2. Copy the table below this text.
  3. Paste the template on your page.
  4. Set the table width (currently 600px) and column width (currently 300px) best for your data.
  5. Replace the text in the template, keeping the colour codes (not in brackets).

1 Column Template

Header section (using bgcolor="CEDFF2")
First Row (no colour specified)
Second Row (using bgcolor="F5FAFF")
Third Row (no colour specified)
Fourth Row (using bgcolor="F5FAFF")


2 Column Template

Header Column 1 (using bgcolor="CEDFF2") Header Column 2
First Row Column 1 (no colour specified) First Row Column 2
Second Row Column 1 (using bgcolor="F5FAFF") Second Row Column 2
Third Row Column 1 (no colour specified) Third Row Column 2
Fourth Row Column 1 (using bgcolor="F5FAFF") Fourth Row Column 2

3 Column Template

Header Column 1 (using bgcolor="CEDFF2") Header Column 2 Header Column 3
First Row Column 1 (no colour specified) First Row Column 2 First Row Column 3
Second Row Column 1 (using bgcolor="F5FAFF") Second Row Column 2 Second Row Column 3
Third Row Column 1 (no colour specified) Third Row Column 2 Third Row Column 3
Fourth Row Column 1 (using bgcolor="F5FAFF") Fourth Row Column 2 Fourth Row Column 3

Other Background Colours

text "FAF5FF"
dark green "A3BFB1"
light green "F5FFFA"
light grey "FCFCFC"
light grey "FCFCFC"
light blue "F5FAFF"
dark blue "CEDFF2"
dark purple "DDCEF2"
light purple "FAF5FF"


Glossary Links

A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | Numbers | Symbols



Cite this page: Hill, M.A. 2017 Embryology Table Tutorial. Retrieved November 17, 2017, from https://embryology.med.unsw.edu.au/embryology/index.php/Help:Table_Tutorial

What Links Here?
© Dr Mark Hill 2017, UNSW Embryology ISBN: 978 0 7334 2609 4 - UNSW CRICOS Provider Code No. 00098G