Creating Tables

Adding Colour & Images  

Tables allow you the freedom to position your text and Images where you want on your page
Here's how to create a table.

You cannot see the table because I have not given it a border.

Your text and/or images go between the opening <td> and closing </td> tags

To add a second cell, place another pair of <td> and </td> tags after the first <td> </td> tags

<table border=1> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> </table>

Row 1 Cell 1 Row 1 Cell 2

For a second row add a second pair of <tr> </tr> tags after the first <tr> </tr> tags remembering that you still have to include the <td>....</td> tags to contain your data for those cells

<table border=1> <tr> ..... Start of row 1 <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> ..... End of row 1 <tr> ..... Start of row 2 <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> ..... End of row 2 </table>

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3

Always state rows first.

Once you get to the stage where you have multiple rows and cells it would be easier to refer to them as Rows and Columns

<table>

Column 1

Column 2

Column 3

Row 1 <tr> Row 2 <tr>

<td> Row 1 Cell 1 </td> <td> Row 1 Cell 2 </td> <td> Row 1 Cell 3 </td> <td> Row 2 Cell 1 </td> <td> Row 2 Cell 2 </td> <td> Row 2 Cell 3 </td >

</tr> </tr>

</table>

You can make the table and/or column a specific size or as a percentage of the window size.

<table border=1 width=200 height=200> <tr> <td>This table is 200 pixels wide and 200 pixels high <p>This column is 150 pixels wide</td> <td width=50> This column is 50 pixels wide</td> </tr> </table:>

This table is 200 pixels wide and 200 pixels high This column is 150 pixels wide This column is 50 pixels wide

The following table is sized using a percentage of your browser window size.

<table border=1 width=100% height=25%>
<tr>
<td>This table is 100% wide and 25% high
<P>This column is 70% wide</td>
<td width=30%>This column is 30% wide </td>
</tr>
</table:>

This table is 100% wide and 25% high This column is 70% wide

This column is 30% wide

Now we have the basics for sizing the table and its cells there are two more attributes we can use.
These are COLSPAN and ROWSPAN. See also advanced tables.

When using a table that consists of more than one row it is possible to span a single cell over a number of columns.

COLSPAN (column span) will span a column over the number of columns you choose.

In the example above the cell, Row 1 Column 1, spans Column 1 and 2 in Row 1 using the table code below

<table Border=2 bordercolor="#500000" cellspacing="0">
<tr>
<td COLSPAN=2 >Row 1 Column 1 (& 2)</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>

NOTE:-
Because we have spanned 2 columns in row 1 there are only two <td></td> tags in the first <tr></tr> tags, this is because there are only two cells in that row.

ROWSPAN (row span) will span a row over the number of rows you choose.

In the example above the cell, Row 1 Column 1 spans Row 1 and 2 in Column 1 using the table code below

<table Border=2 bordercolor="#500000" cellspacing="0">
<tr>
<td rowspan=2>Row 1 and 2 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>

NOTE:-
Because we have spanned 2 rows in column 1 there are only two <td></td> tags in the second <tr></tr> tags, because no data is needed for the 2nd row column 1, (this data is contained in Row 1 Column 1).

When using COLSPAN and ROWSPAN the most confusing thing to remember is when not to put in the <td></td> tags.
You have to remember that you are spanning rows and/or columns with a single cell already containing data.

You can now have the table, and its rows and columns, the size that you want.

You can create a table with multiple rows and columns and have just the rows or columns showing.
This is done by adding the RULES=ROWS or RULES=COLS attribute to the opening table tag.

The following table shown as standard.

The table showing only the rows.....add rules=rows to the opening table tag.

The table showing only the columns.....add rules=cols to the opening table tag

Further effects can be achieved with the frame= attribute
This is used with the rules=none attribute.

To show only the top of the table border.

To show only the right side of the table border.

To show only the bottom of the table border.

To shows only the left side of the table border.

To shows all the sides of the table.

Other examples:

rules=rows frame=RHS Each word is in a separate table data cell

rules=cols frame=RHS Each word is in a separate table data cell

This text is aligned to the center using <td align="center">

This text is aligned to the right using <td align=right>

<td valign=top>

<td> valign=center

<td valign=bottom>

You can also use a combination of the two.

<td valign=top align=right>

<td valign=bottom align=right>

Adding Colour & Images