Table Tutorial of Homepage of HF OADA

Table Tutorial

Note: The examples that are used in this tutorial will be opened in a new window!

Here is a little tutorial about tables.

Short introduction to tables:
Tables can be used for arranging contents on a website. It's a handy toy to arrange on an easy way the contents on a website.

Creating a simple table:
You always start a table with the <table> tag and you always end a table with the </table> tag.
The next thing you need to do is to create a table row. This do you do to start a table row with the <tr> tag and to end with the </tr> tag. This row contains one or more cells of information.
The next thing you need to do is to create the cells in the table row. This do you do to start with the <td> tag and to end with the </td> tag. You place the contents of the cell between the <td> tag and the </td> tag.
You can create as many cells you want, but each row in a table should have the same number of columns as the other rows. So if you put 3 cells in a table row you should also have 3 cells in the following table rows.

Example of a simple table:
<table>
<tr>
<td>Contents of cell 1 of row 1</td>
<td>Contents of cell 2 of row 1</td>
<td>Contents of cell 3 of row 1</td>
</tr>
<tr>
<td>Contents of cell 1 of row 2</td>
<td>Contents of cell 2 of row 2</td>
<td>Contents of cell 3 of row 2</td>
</tr>
</table>

See here an example of the table as described above.

You can place virtually any other HTML element into a table cell. However, tags used in one cell don't carry over to other cells, and tags from outside the table don't apply within the table.

Another example of a simple table :
<font size="5">Just some content
<table>
<tr>
<td><font size="4">Contents of cell 1 of row 1</font></td>
<td>Contents of cell 2 of row 1</td>
<td>Contents of cell 3 of row 1</td>
</tr>
<tr>
<td>Contents of cell 1 of row 2</td>
<td>Contents of cell 2 of row 2</td>
<td>Contents of cell 3 of row 2</td>
</tr>
</table>
</font>
Explanation of the code:
The font size that is set to 5 before the table isn't used in the table. There you only see that the first cell of row 1 has a font set to 4. The font size of 5 is only set for outside the table, not for inside the table. To set the font inside the table you need to put the font size in every cell you use in the table.

See here an example of the table as described above.

How to size a table:
You can size a table by height and by width. The size can be set by pixels or by percentage.

Example of a table set by pixels/percentage:
<table height="300" width="100%">
Explanation of the code:
The table height is set to 300 pixels and the table width depends on the screen size. It's always set to 100% of the screen size. So if the screen has a width of 480 pixels, the table has a width of 480 pixels. If the screen has a width of 600 pixels, the table has a width of 600 pixels.

You can also set the size of a cell. This can also be set by pixels or by percentage.

Example of a table cell set by percentage:
<table>
<tr>
<td width="30%">Contents of cell 1 of row 1</td>
<td width="70%">Contents of cell 2 of row 1</td>
</tr>
<td>Contents of cell 1 of row 2</td>
<td>Contents of cell 2 of row 2</td>
</table>
Explanation of the code:
The width of cell 1 of row 1 is set to 25%. The width of cell 2 of row 1 is set to 75%. The width of cell 1 of row 2 is set automatically to 25% and of cell 2 of row 2 to 75%.

See here an example of the table as described above.

If you size the cells of a table and you have also set the size of the table, make sure that the sizes are equal to each other. So if you have set the table width to 100%, make sure that the total of the cell widths is also 100%.

Aligning and spanning a table:
By default, anything you place inside a table cell is aligned to the left and vertically centered. You can align the contents of table cells both horizontally and vertically with the ALIGN (horizontally) and VALIGN (vertically) attributes.
You can apply these attributes to either the <tr> or <td> tags. Alignment attributes assigned to <tr> tags apply to all cells in that row. Alignment attributes assigned to <td> tags apply only to that cell. So if you want all the cells in a row to have a vertical alignment at the top you can save yourself some coding to set the vertical alignment in the <tr> tag instead of the <td> tags of every individual cell.
You can align a cell vertically to the top, middle or bottom of a cell. You can align a cell horizontally to the left, center or right of a cell.

Example of a table with VALIGN and ALIGN:
<table>
<tr valign="top">
<td align="center"><br>Contents of cell 1 of row 1</td>
<td align="right">Contents of cell 2 of row 1</td>
</tr>
<tr align="center">
<td valign="bottom">Contents of cell 1 of row 2</td>
<td><br>Contents of cell 2 of row 2</td>
</tr>
</table>
Explanation of the code:
The vertically alignment of all the cells in row 1 is set to the top of the cells. The vertically alignment of cell 1 of row 2 is set to the bottom of the cell. The horizontally alignment of cell 1 of row 1 is set to the center of the cell. The horizontally alignment of cell 2 of row 1 is set to the right of the cell. The horizontally alignment of the cells in row 2 are set to the center of the cells.

See here an example of the table as described above.

Using backgrounds and spacing in a table:
You can give an entire table or each individual row or cell in a table its own background, distinct from any background you might use on the web page itself. You do this by placing a BGCOLOR or BACKGROUND attribute in the <table> or <tr> or <td> tags.

Example of how to give an entire table a background colour:
<table bgcolor="blue">

Example of how to give an entire table a background image:
<table background="image.jpg">

Example of how to give a row of a table and a cell of a table a background colour:
<table>
<tr bgcolor="green">
<td>Contents of cell 1 of row 1</td>
<td>Contents of cell 2 of row 1</td>
</tr>
<tr>
<td bgcolor="red">Contents of cell 1 of row 2</td>
<td>Contents of cell 2 of row 2</td>
</tr>
</table>
Explanation of the code:
The background colour of the first row is set to green. The background colour of the first cell of the second row is set to red.

See here an example of the table as described above.

Example of how to give a row of a table and a cell of a table a background image:
<table>
<tr background="image1.jpg">
<td>Contents of cell 1 of row 1</td>
<td>Contents of cell 2 of row 1</td>
</tr>
<tr>
<td background="image2.jpg">Contents of cell 1 of row 2</td>
<td>Contents of cell 2 of row 2</td>
</tr>
</table>
Explanation of the code:
The background image of the first row is set to image1.jpg. The background image of the first cell of the second row is set to image2.jpg. It's possible that you don't see the image of row 1, because not every browser does support that use of the background tag.

See here an example of the table as described above.

Using cellpadding and cellspacing:
You can control the space around the borders of a table with the CELLPADDING and CELLSPACING attributes. The CELLSPACING attribute sets the amount of space (in pixels) between table borders and between table cells themselves. The CELLPADDING attribute sets the amount of space (in pixels) around the edges of information in the cells. Setting the CELLPADDING value to zero causes all the information in the table to align as closely as possible to the table borders, possibly even touching the borders. CELLPADDING and CELLSPACING give you a good overall control of the table's appearance.

Example of the use of cellpadding and cellspacing:
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<td>Contents of cell 1 of row 1</td>
<td>Contents of cell 2 of row 1</td>
</tr>
<tr>
<td>Contents of cell 1 of row 2</td>
<td>Contents of cell 2 of row 2</td>
</tr>
</table>
Explanation of the code:
The amount of space between the table border and the table cells is set to 5 pixels. The amount of space between the contents in the cells and the borders of the cells is set to 10 pixels.

See here an example of the table as described above.

Using nested tables:
You can place an entire table inside a table cell, and that separate table can possess any and all the qualities of any table you might want to create.

Example of a nested table:
<table>
<tr>
<td>Contents of cell 1 of row 1</td>
<td>Contents of cell 2 of row 1</td>
</tr>
<tr>
<td>Contents of cell 1 of row 2</td>
<td><table>
<tr>
<td>Contents of cell 1 of row 1 of the nested table</td>
<td>Contents of cell 2 of row 1 of the nested table</td>
</tr>
</table></td>
</tr>
</table>
Explanation of the code:
If you look at cell 2 of row 2 you see that there is a nested table in that cell. That nested table exists of 1 row with 2 cells.

See here an example of the table as described above.

Using rowspan and colspan:
If you want a table with in 1 row just one cell and in the next row 2 cells then you need to use the colspan attribute to make the table act naturally.

Example of a table with colspan:
<table>
<tr>
<td colspan="2">Contents of the only cell at row 1</td>
</tr>
<tr>
<td>Contents of cell 1 of row 2</td>
<td>Contents of cell 2 of row 2</td>
</tr>
</table>
Explanation of the code:
If you look at the table then you see that there is just one cell in the first row and 2 cells in the second row.

See here an example of the table as described above.

If you want a table with 2 columns and in the first columns just one cell and in the next column 2 cells then you need to use the rowspan attribute to make the table act naturally.

Example of a table with rowspan:
<table>
<tr>
<td rowspan="2">Contents of the only cell in this column</td>
<td>Contents of cell 2 of row 1</td>
</tr>
<tr>
<td>Contents of cell 2 of row 2</td>
</tr>
</table>
Explanation of the code:
If you look at the table you see that there is just 1 cell in the first column and 2 cells in the second column.

See here an example of the table as described above.

Adding some CSS styling to the table:
If you want to add some CSS styling to a table cell, then there are three ways of doing that. It can be done locally for every cell independently, locally for every cell together or externally for every cell together.

Adding some CSS styling locally:

If you want to add some CSS styling locally to the independent cell you could use the following code:
<td style="border-top:1px #000000 dashed;border-bottom:1px #000000 dashed;border-right:1px #000000 dashed;border-left:1px #000000 dashed;">
Explanation of the code:
When you put this code in the <td>-tag you get a table cell with a dashed border of 1px and in the black color.

See here an example of the table as described above.

If you want to add some CSS styling locally to all the cells together you could use the following code between the <head>-tag and the </head>-tag:
<STYLE TYPE="text/css">

</STYLE>
Explanation of the code:
When you put this code between the <head>-tag and the </head>-tag you get for every table cell a dashed border of 1px and in the black color.

See here an example of the table as described above.

Adding some CSS styling externally:

If you want to add some CSS styling externally to all the cells together, then you need two things to do.

First:
You create an external file, eg. TDStyling.css
In the external file you put the following code:
td {border-top:1px #000000 dashed;border-bottom:1px #000000 dashed;border-right:1px #000000 dashed;border-left:1px #000000 dashed;}

Second:
You put the following code between the <head>-tag and the </head>-tag of the webpage where you want to use the TDStyling.css:
<link rel="stylesheet" href="TDStyling.css">

See here an example of the table as described above.

I hope that you enjoyed reading this tutorial about tables.