User:Buster7/tutorial

Hopefully this will be an understandable introduction to the image and table functions.

Images
To add an image put in the code:
 *  [[Image:]] 

Now add the link to the image you want:
 * [[Image: Hapalochlaena lunulata.JPG ]]

Tell wikipedia what width the image should be:
 * [[Image:Hapalochlaena lunulata.JPG |100px| ]]

you can choose any width
 * [[Image:Hapalochlaena lunulata.JPG |230px| ]]

The height will automatically resize when you change the width.

Result-

100px:



Result-

230px:



Tables
To create a table put in the code:
 *  {| class="wikitable"
 * } 
 * } 

Tell wikipedia what width and height the table should be:
 * {| class="wikitable" style="width:60%; height:150px"
 * }
 * }

For the width you can choose any percentage, for the height you can choose any size.

Result-

width:60%; height:150px

Now put something in the table:
 * {| class="wikitable" style="width:60%; height:150px"
 * Hello Buster!
 * }

Result-

You can break the table in two if you want another message: | My name is Kevin
 * {| class="wikitable" style="width:60%; height:150px"
 * Hello Buster!
 * }

Result-

You can break it up as many times as you wish: | My name is Kevin | Where are you from?
 * {| class="wikitable" style="width:60%; height:150px"
 * Hello Buster!
 * }

Result-

Each time you break it up the new half is called a cell. We can change the width of each individual cell: |width="50%"| Hello Buster! |width="20%"| My name is Kevin |width="30%"| Where are you from?
 * {| class="wikitable" style="width:60%; height:150px"
 * }

Result-

note that the 3 cells add up to 100% of the table (50% + 20% + 30%)

We can add extra properties to the cell such as making the text in the center of the cell: |width="50%" align="center"| Hello Buster! |width="20%"| My name is Kevin |width="30%"| Where are you from?
 * {| class="wikitable" style="width:60%; height:150px"
 * }

Result-

The width of the table does not have to be a percentage it can be in px |width="200px" align="center"| Hello Buster! |width="50px"| My name is Kevin |width="150px"| Where are you from?
 * {| class="wikitable" style="width:400px; height:150px"
 * }

Result-

ONE STEP FURTHER

we can break the table horizontally, This is called a row: |width="200px" align="center"| Hello Buster! |width="50px"| My name is Kevin |width="150px"| Where are you from? 
 * {| class="wikitable" style="width:400px; height:150px"
 * width="200px" align="center"| Hello Buster!
 * width="50px"| My name is Kevin
 * width="150px"| Where are you from? 
 * }
 * }

Result-

Now take control of the height: |width="200px" align="center" height="250px"| Hello Buster! |width="50px"| My name is Kevin |width="150px"| Where are you from?
 * {| class="wikitable" style="width:400px; height:"320px"
 * width="200px" align="center" height="70px" | Hello Buster!
 * width="50px"| My name is Kevin
 * width="150px"| Where are you from?
 * }
 * }

Result-

note that you only have to say the height once for each row

FINALLY

You can replace the text with an image: |width="200px" align="center" height="250px"|   |width="50px"| My name is Kevin |width="150px"| Where are you from?
 * {| class="wikitable" style="width:400px; height:"320px"
 * width="200px" align="center" height="70px" | Hello Buster!
 * width="50px"| My name is Kevin
 * width="150px"| Where are you from?
 * }
 * }

Result-

note- do not make the image bigger than the size of the cell it is in.