Lesson 23

Using SSI to simplify complex tables

We've talked about using SSI in the group a little bit. Now we'll learn how to use SSI to replace a section of table code with a text file.

SSI stands for "server side include".

It means that we include something that takes place on the server side (ie, your web page) instead of the client side (your visitor's pc or webbie).

An example of a client side event would be background music. You add the code to your page, but the music is played by your visitor's pc or webbie.

Here's what an SSi looks like:
<!--#include file="?.txt"--> or
<!--#include file="?.html"-->
where the question mark is the name of the file. The file must be in the same directory. Also, the extension of the webpage that has the SSI must be .shtm or .shtml instead of .htm or.html in most cases, depending on your webhost.

Caution: not all hosts allow the use of SSI.

"What are some examples of where I would use SSI?"

1) I have some links for the table course at bottom of every page for the table course.

Instead of copying this code to every page:
<!-- links -->
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
blah blah blah
<!-- end links -->

I can use:
<!--#include file="links.txt"-->.

2) On my personal pages, I usually include my email address and a link to my guestbook. Instead of entering those codes on every page, I just use a "contact.txt" SSI:
<!--#include file="contact.txt"-->

3) Large pages can be difficult to edit just because of their size. You can break them down in sections and just include each section. Then you just edit each section as needed.

4) In tables, we often copy and paste a lot of code. Instead, we can just make text files and include them.

But enough talk. Let's build a table quickly and easily with SSI.

Project:
I want to make a patriotic design. It will have 5 gradtable bars, each a nested table. They will be red, white, blue, white, red. The white bars will be the shorter than the red and blue bars. The middle blue bar will be the longest.

Here is my table plan:
<table align="center">
<tr><td align="center">
nested table for red bar goes here
</td></tr>
<tr><td align="center">
nested table for white bar goes here
</td></tr>
<tr><td align="center">
nested table for blue bar goes here
</td></tr>
<tr><td align="center">
nested table for white bar goes here
</td></tr>
<tr><td align="center">
nested table for red bar goes here
</td></tr></table>

The nested tables will be the same except for the color and the length, so I really have minor variations of one nested table for each bar:
<table> <tr>
<td height="6" width="?"
bgcolor="#000000" gradcolor="?">
</td></tr><tr>
<td width="?" bgcolor="#000000"
gradcolor="?" gradangle="180">
</td></tr></table>

Here is my design:

Here is the code for my table:

Homework Assignment

• Copy any table you have already made
• Copy part of its code and paste it to a txt file
• Replace that section of code with SSI
• Post your table