Classroom

4. Tables

Here you will learn how to use tables to improve the clearness and navigation of your website a lot.

It is easier to arrange text and pictures on your website with tables, because html doesn}t allows you to just throw them in side by side, but with tables it is possible.

Another use for tables is to create a menu bar like we did in this document at the top.

We do the tables in html. If you've read the 1. Basic HTML you are all set and know that the following tags have to go into the body of a html-document.

Please go ahead and open up your Editor by clicking on START/PROGRAMS/ACCESSORIES/EDITOR so you can type in try out the html sourcecode. First set up your html page with the head and body tags we learned about in Tutorial 1. Now let's look at making our table.

Here is the basic tag to create a table:

<table> </table>

In this table we want two rows and that looks like this:

<table> <tr> This is row one </tr> <tr> This is row two </tr> </table>

And in addition to that we want in each row to cells. We can do this with the “<td> </td>”-tag. See how it works:

<table> <tr> <td>Row 1 - Column 1 </td> <td> Row 1 - Column 2 </td> </tr> <tr> <td>Row 2 - Column 1 </td> <td> Row 1 - Column 2 </td> </tr> </table>

Save the document and see how it looks in the browser window. You can insert text or graphics. If you want to add a row just add under the closing tag of the last row “</tr>” another row with “<tr> </tr>”.

If you want to add a cell into a row just add “<td> </td>”

There are general setting for tables, like the size, background colour, border and so on. Let me just introduce some to these tags to you :(You will find a complete list of the html-tags in our Resources Library).

The tags are going within the opening table tag “<table>”. See how it works in the example.

<table width=”100%” bgcolor=”green” border=”1”> <tr> <td>Row 1 - Colum 1 </td> <td> Row 1 - Colum 2 </td> </tr> <tr> <td>Row 2 - Colum 1 </td> <td>Row 1 - Colum 2 </td> </tr> </table>

If you save this html-code and open it in the browser again you will see that our table has changed. Let}s see what tags are responsible for that. They are all in the opening table-tag:

<table width=”100%” bgcolor=”green” border=”1”>

The “<table width=”100%”” sets the width of the table to 100% of the screen. “bgcolor=”green” makes the background colour green and “border=”1” adds borders to the cells in the size of one pixel.

Here we go!

Have more fun with the introduction of >>frames<<.