A simple table
Dogs Cats
canine feline
Rover Fluffy


A slightly more complex table
Dogs Cats
Scientific canine feline
Typical Name Rover Fluffy


Adventures in Debugging



1. A slightly more complex table- improved by WIDTH attributes
Notice that I'm also using better indentation, to make it easier
to find missing closing tags, make sure all rows have 3 cells, etc.
Dogs Cats
Scientific canine feline
Typical Name Rover Fluffy


2. A slightly more complex table- improved by % WIDTH attributes
Well, after step 1. didn't work, I tried to use % widths.
Notice the use of quote marks around the percents! It matters.
Dogs Cats
Scientific canine feline
Typical Name Rover Fluffy


3. Stare at it a bit
I tried varying the widths and %'s and nothing seemed to work.
After putting it away and coming back an hour later, it looked to me
as though I had somehow gotten an extra column in there.

Aha! Then I remembered that when that happens adding borders to the
table will make it easier to debug!
This is a great trick/method!
So I tried it.
Dogs Cats
Scientific canine feline
Typical Name Rover Fluffy


4. Systematic Omission - Last row
Well, my intuition on the extra column was right.
So I tried commenting out my rows one at a time
to see if I could locate the row causing the problem.

Commenting out code which may be casuing a problem is a
standard trick/method in debugging.

Dogs Cats
Scientific canine feline


5. Commenting out the Middle Row
Dogs Cats
Typical Name Rover Fluffy


6. Comment out the First Row
Scientific canine feline
Typical
Name
Rover Fluffy


7. Try to find the First Row Problem
See if the problem is in the empty cell - put an entry there.

Animal Dogs Cats
Scientific canine feline
Typical
Name
Rover Fluffy


8. Try to find the First Row Problem- cont'd.
By now I began to suspect some kind of control character.
Sometimes a non-printing character sneaks into your file and
is almost impossible to find. Since I had done everything by
copy and paste I decided to delete and re-type the first row.

Notice that I also got rid of the width, but left the word
in the first cell.

Animals Dogs Cats
Scientific canine feline
Typical
Name
Rover Fluffy


9. Victory
At this point I was ready to cry. I actually retyped the entire thing
from scratch and got it to work.
But since I'm stubborn, I stare at this code some more and saw that
in both rows 2 and 3 the first cell ended with the tag < td>
instead of the tag </td&gt.
(Note how this is typed.)

So, I fixed that error and...

Animals Dogs Cats
Scientific canine feline
Typical
Name
Rover Fluffy


10. Clean up
Now it's time to get rid of the borders, and make the columns wide
enough - either by specifying width or by cell padding.
It may take some experimentation to get the widths right.
And I also got rid of the word Animals.

Dogs Cats
Scientific canine feline
Typical
Name
Rover Fluffy


11. The Finishing Touches - we hope
Align the second and third column in the center,
and make the first column into headings (bold).

Dogs Cats
Scientific canine feline
Typical Name Rover Fluffy


12. The Finishing Touches - at last
Align the first column at the left.

Dogs Cats
Scientific canine feline
Typical Name Rover Fluffy