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>. (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 |
I could have saved a lot of debugging time if I had validated this page.
The warnings would have told be about the extra cell.
Two validators for HTML5, both experimental, are:
Both sites provide errors and warnings;
it is a matter of personal preference at to which you messages you find clearer.
Both sites allow you to enter a URL or paste in your code.
At the validator.nu site, when you click on the underlined error message
you get taken to the relevant point in the code.
Finally I remind you that Evrsoft First Page and most good editors allow you to go to a
particular line number. (Ctl-G in most)