Advanced HTML code

If you want to add more than basic HTML then read on. You would be advised to use the 'test' document to try things out first.

Tables

When you create a table you need to define the size and the number of rows and columns. You can also define background colour, the spacing between the cells and a border. Below each example is the HTML code (in black). You can copy this. Below that is the same code in red with an explanation of what the code means.

Example 1

This is a table with a plain border	the full width of the page
with 2 rows	and 2 columns.

This is the code to generate it. Below is the code in red with notes explaining what each bit means.

<table width="100%" border="1">
<tr>
<td>This is a table with a plain border</td>
<td>the full width of the page</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>

<table width="100%" border="1"> the <table defines the table itself. This is followed by a width tag of 100% which means the full width of the page. You can set this to any percentage or a number of pixels, e.g. width="200px". The border="1" is the width in pixels of the border around the table. If you set this to 0 the border is removed (you can also just remove the border tag). All values are entered between quotes, e.g. <border="2px"> or <table width="100%">
<tr> This defines the first row of the table and is closed with a </tr> tag further down. Another row is added later.
<td> This is a table with a plain border</td> This defines the cell and is closed with the </td> tag. Between the tags is the text that appears in the cell.
<td> the full width of the page</td> This defines the second cell in the first row (in effect the second column). Again the text is between the td tags.
</tr> This ends the first row of the table.
<tr> This defines the second row of the table.
<td>with 2 rows</td> This (and the line below) are the same as the td tag above and define the next two cells in the second row. The text is between the td tags.
<td>and 2 columns.</td>
</tr> This ends the second row.
</table> This ends the table

If you want the border a particular colour then the <table... tag would look like this:
<table width="100%" border="1" color="green">

Example 2

This is a table with no border	It is still a table
with 2 rows	and 2 columns.

<table width="100%">
<tr>
<td>This is a table with no border</td>
<td>It is still a table</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>

<table width="100%"> The border tag has been removed so the border is not there.
<tr>
<td>This is a table with no border</td>
<td>It is still a table</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>

Example 3

This table is only half the page width	This cell is shorter than the first one
There is no border	this cell is also shorter.

<table width="50%">
<tr>
<td width="75%">This table is only half the page width</td>
<td width="25%">This cell is shorter than the first one</td>
</tr>
<tr>
<td>There is no border</td>
<td> this cell is also shorter.</td>
</tr>
</table>

<table width="50%"> The width sets width of the page the table will cover.
<tr> define the first row
<td width="75%">This table is only half the page width</td> The <td width = "75%"> sets the width of this cell within the table. It is 75% of the table width.
<td width="25%">This cell is shorter than the first one</td> This width tag of 25% sets the width of the second cell in the row
</tr> End of the first row.
<tr> Define the next row
<td>There is no border</td> There is no width tag here (or on the next cell). It is not needed as the cell width was defined in the first row.
<td> this cell is also shorter.</td>
</tr>
</table>

Example 4

This table is only 50% of the page width with a light blue background.	This cell is shorter than the first one
There is no border	this cell is also shorter.

<table width="50%" bgcolor="#00CCFF"> The bgcolor tag sets the background for the whole table. Please see the note below about the code used for the colour.
<tr > If the bgcolor="#00CCFF is inserted here (like this, <tr bgcolor="#00CCFF>) the colour is applied to the row only.
<td width="75%" >This table is only 50% of the page width with a light blue background.</td> If the bgcolor="#00CCFF is inserted here (like this, <td width="75%" bgcolor="#00CCFF> the colour is applied to the cell only. You can do this for any cell in the table.
<td width="25%">This cell is shorter than the first one</td>
</tr>
<tr>
<td> There is no border</td>
<td> This cell is also shorter.</td>
</tr>
</table>

Be careful with widths. If you go over 100% it will push the table over the page border and people viewing it will have to scroll left and right.

Example 5

This is a header row in the first column	This is a header in the second column
This is a table with a plain border	the full width of the page
with 2 rows	and 2 columns.

<table width="100%" border="1">
<tr>
<th>This is a header row in the first column</th>
<th>This is a header in the second column</th>
</tr>
<tr>
<td>This is a table with a plain border</td>
<td>the full width of the page</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>

<table width="100%" border="1">
<tr> This is the first row - which will become a header row with the next tag
<th>This is a header row in the first column</th> th generates the first cell of a row (like the td tag) as a header, automatically in bold
<th>This is a header in the second column</th>
</tr> This ends the first row which was defined as a header row
<tr>
<td>This is a table with a plain border</td>
<td>the full width of the page</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>

You can align the header (or any cell) using the code <th align="center"> (for a header row) or <tr align="center"> for a normal row. You can use left, center or right.

Colour codes for HTML

If you use the colour names like "red" it will work as the main colours can be put in by name. If you want a 'pale shade of light blue' you have to use the code. The code starts with a #. If you Google 'HTML color codes' you'll easily find out what they are.

Adding text or pictures to the table

Once the table is created you simply type your text into the cells. You can use any other HTML code to format the text. You can also add pictures.

This example is a table of 3 cells wide and 2 rows which contains 3 pictures and text below them. The pictures and text are centered across the cells. The picture in the middle is a hyperlink to another web page (which opens in a new window).


This is the first picture	This is the second picture	This is the third picture

This is the code to produce this table

<table width="100%" border="0">
<tr>
<td align="center"><img src="./images/ban1.jpg" width="134" height="100" /></td>
<td align="center"><a href="http://followthearrow.gagb.co.uk" target="_blank"><img src="./images/ban2.jpg" width="134" height="100" /></a></td>
<td align="center"><img src="./images/ban3.jpg" width="134" height="100" /></td>
</tr>
<tr>
<td align="center">This is the first picture</td>
<td align="center">This is the second picture</td>
<td align="center">This is the third picture</td>
</tr>
</table>

The table is rather 'spread out' across the page so this example has reduced the size of the table and centered it.


This is the first picture	This is the second picture	This is the third picture

<center><table width="75%" border="0">
<tr>
<td align="center"><img src="./images/ban1.jpg" alt="" width="134" height="100" /></td>
<td align="center"><a href="http://followthearrow.gagb.co.uk" target="_blank"><img src="./images/ban2.jpg" alt="" width="134" height="100" /></a></td>
<td align="center"><img src="./images/ban3.jpg" alt="" width="134" height="100" /></td>
</tr>
<tr>
<td align="center">This is the first picture</td>
<td align="center">This is the second picture</td>
<td align="center">This is the third picture</td>
</tr>
</table></center>

Bullets and Lists

Each example has the code below in red with an explanation of what it means.

Bulleted Lists

First item
Second item
third item
fourth item

<ul>
<li>First item</li>
<li>Second item</li>
<li>third item</li>
<li>fourth item</li>
</ul>

<ul> This is the 'unordered list' tag starting the list.
<li>First item</li> This tag is 'line item' which produces the bullet point. It ends with a closed tag </li>
<li>Second item</li> Continuing the next bullet...
<li>third item</li>
<li>fourth item</li>
</ul> Finally the list is ended with the close unordered list tag.

Numbered List

First item
Second item
Third item
Fourth item

<ol>
<li class="style1">First item</li>
<li class="style1">Second item</li>
<li class="style1">Third item</li>
<li class="style1">Fourth item</li>
</ol>

<ol> This is the 'ordered list' tag to start the list with numbers instead of bullet points.
<li>First item</li> The same 'line item' tag is used.
<li>Second item</li> Continuing the list
<li>Third item</li>
<li>Fourth item</li>
</ol> End the list with the close tag </ol>

Definition List

This lets you have a 'normal line' or introduction with an indented line below it (or more than one indented line)

When you visit my cache you might want to do these caches too:: GC123456; GC123458; GC123458

<dt>When you visit my cache you might want to do these caches too:
</dt>
<dd>GC123456</dd>
<dd>GC123458</dd>
<dd>GC123458</dd>
<dt> </dt>

</dl>

<dl> This defines the list
<dt>When you visit my cache you might want to do these caches too: The <dt> tag is the definition term within the definition list.
</dt> This ends the definition term. What follows is the indented text.
<dd>GC123456</dd> The <dd> tag defines the indented text. Each line needs the end tag </dd>
<dd>GC123458</dd>
<dd>GC123458</dd>
</dl> Finally you end the defined list with the close tag.

Indenting text from the left

This text is lined up on the left

But this is indented

<blockquote>
But this is indented
</blockquote>