Web Design & Development

Tables include more html tags than any element we have used thus far. It is very easy to have your table not work just because you have left out one tag, or even just a piece of a tag. There are 2 things that I do to help me avoid this problem.

First, every time I put a tag in a atable, I leave an empty line and put in the closing tag immediately. This helps prevent my forgetting the tag. I can then put my data, or additional tags in the space between the tags.

Along with this, I often set up a blank table row, with all of the tags I need for all of my columns. Then I can copy and paste that template for each row in the table. Now, all I have to do is fill in the data and I haven't forgotten a tag.

Another hint, that didn't mean much to me when I started working with tables but really helps as tables get more complicated, is to indent a couple of spaces for each section of the table. Keep the closing tag at the same indent as the opening tag to help "see" the information when you look over your code. Since I have left a blank line between the table data tags, I place the data (test, list, image, button, etc) at the left margin. Imbedded tables would be indented within their table data line in the same way.

eg:

  <table width="90%" align="center" border="3" bgcolor="#5F9EA0">

     <tr>

        <td>



        </td>

        <td>



        </td>

        <td>



        </td>

     </tr>

  </table>

It may seem to be a lot of work to indent all these lines, but creating 1 row of tags and then copy and paste makes it very easy. In the example above, I could copy from <tr> to </tr> and paste it as many times as I needed for as many rows as I had. This does mean that you need to "plan ahead". Another example is a staff list I have worked on for a church site (This is a first draft for the site with some examples of images)
This will open a new page for you. View the source, and when you're ready to return here, simply close the new window.
Example of table code

The secretary of the church will need to update the data, and I hope that by putting the data on the left margin she can easily see that data.

If you go back to the home page from the above example, you will find a table for navigation on the left. Again, this will show the indentation if you view the source. (These are merely examples if you want to see them)

Hints on sizing:

• If you use a % in the width attribute, it will adjust to the monitor size. 100% will fill the screen from left to right. This works fine as long as your data is small enough, such as a narrow clip art, and flexible like text.
• If you use pixel size, you may be creating a left-right scroll for users with low-res monitors. But, if you're using images in a table that require a certain width, this may be your best choice.
• If you size the columns (p315), you only need to put these sizes in the first row (in the <th> or <td> tags). The other rows will follow along. In fact, if you put different sizes in another row, you'll create conflicts as the browser tries to read the code.

For Lesson 8, you merely need to create a basic table with some data. If you want to try including color (p319), alignment (p322-326), or other-than-text-data ----- TRY! There are innumerable ways to deal with tables. These, and much more (such as colspan, rowspan, grouping, rules, etc will be used in the Advanced class).

I have an example of 2 tables for you on my pages.

When you are visiting other sites on the web, look for the uses of tables -- good and bad. It's a great way to get ideas.

I have also prepared a quick set of instructions for you to use in creating your Storyboard graphic in your Design Document. It's for those who are using Microsoft Word.