2. Designing your site continued. Click here for the previous lesson.

Tables have rows. Rows have data. Three tags will be needed, (each a pair of tags actually,) and each nested within the other. Like all content, this should be in the body of your page, not the head. There is quite a bit we can do with tables but let us start with the simplest table of all, a table with only one item of data and then we will expand to more advanced stuff.

<table>
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
</tr>
</table>

This parsed output is very simple:

This text is in the data element within a row element of the table.

Let's make sure the border isvisible by adding the attribute for it in the opening table tag, so our code becomes:

<table border="1">
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
</tr>
</table>

Now we can see the border:

This text is in the data element within a row element of the table.

Now we add second and third data elements to our row:

<table border="1">
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td>
This text is in the next data element within a row element of the table.
</td>
<td>
This text is in the third data element within a row element of the table.
</td>
</tr>
</table>

The table features begin to become clear now:

This text is in the data element within a row element of the table. This text is in the next data element within a row element of the table. This text is in the third data element within a row element of the table.

We can add another row, but must watch to be sure we have the same number of data elements in each row. Here we add only two of the three data elements needed so that you will recognize the look of a row, short of the number of data elements needed.

<table border="1">
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td>
This text is in the next data element within a row element of the table.
</td>
<td>
This text is in the third data element within a row element of the table.
</td>
</tr>
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td>
This text is in the third data element within a row element of the table.
</td>
</tr>
</table>

You can see how the last part of the table is set off visually, and this should tell you that a data element is missing. Note the last cell as it parses below:

This text is in the data element within a row element of the table. This text is in the next data element within a row element of the table. This text is in the third data element within a row element of the table. This text is in the data element within a row element of the table. This text is in the third data element within a row element of the table.

We can address this problem several ways. First, let us add an empty (actually it has a non-breaking space in it) data element as a means of fixing this.

<table border="1">
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td>
This text is in the next data element within a row element of the table.
</td>
<td>
This text is in the third data element within a row element of the table.
</td>
</tr>
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td>
This text is in the next data element within a row element of the table.
</td>
<td>&nbsp;</td>
</tr>
</table>

Now this is better:

This text is in the data element within a row element of the table. This text is in the next data element within a row element of the table. This text is in the third data element within a row element of the table. This text is in the data element within a row element of the table. This text is in the next data element within a row element of the table.

Sometimes you want a data element to span across two columns as the attribute to do so is the span attribute which needs to be inside the data element's tag. Here we will remove the last data element (the one we just added) and instead add the new attribute to the data element before it:

<table border="1">
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td>
This text is in the next data element within a row element of the table.
</td>
<td>
This text is in the third data element within a row element of the table.
</td>
</tr>
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td colspan="2">
This text is in the last data element within a row element of the table.
</td>
</tr>
</table>

Now this is better:

This text is in the data element within a row element of the table. This text is in the next data element within a row element of the table. This text is in the third data element within a row element of the table. This text is in the data element within a row element of the table. This text is in the last data element within a row element of the table.

Well, that is tricky and for the record (try it yourself) there is also an attribute for rowspan which works the same way except it will span rows instead of columns. This can quickly get confusing, sot try to keep you table simple. Remember that your content will be enclosed within the data elements and that rows and columns will line up to make a rectangular grid. Now let us add some color and images to our table. Let us make the table yellow and add an image (same image as before will work fine, or use a new one in your images folder). We will put the image in the first data element of the second row:

<table bgcolor="yellow" border="1">
<tr>
<td>
This text is in the data element within a row element of the table.
</td>
<td>
This text is in the next data element within a row element of the table.
</td>
<td>
This text is in the third data element within a row element of the table.
</td>
</tr>
<tr>
<td background="images/myphoto.jpg">
This text is in the data element within a row element of the table.
</td>
<td colspan="2">
This text is in the last data element within a row element of the table.
</td>
</tr>
</table>

Now, this is parsing with a bit of pizzaz:

This text is in the data element within a row element of the table. This text is in the next data element within a row element of the table. This text is in the third data element within a row element of the table. This text is in the data element within a row element of the table. This text is in the last data element within a row element of the table.

Our attributes should also include a summary attribute in the table element tag. So our first tag should really look like this:

<table bgcolor="yellow" border="1"  summary="our example table">

Our background color attribute and our background image attribute can be in a data element or the table element itself. You can include most any content in the table's data elements including more tables and images. As the language is so forgiving, you can try something to see if it works and it most likely will have no negative effect if it does not.

Now let us return to our main body tag. As you are getting used to the idea of attributes being able to modify our elements (such as the body tag) it is time to add in the ones controling the look of our links in the next lesson.

1. Preliminary
2. Design your site
3. Uploading files.
4. Testing your site.
5. More...

Click here for Neoworx products include route tracing (to see the internet route used to another online computer.)