Table Tutor - Lesson 9
Let me take a minute to esplain something. A
browser has to interpret the instructions you give it the best way it can. If
something has not been specified one way or another, most browsers will try to
come up with an attractive solution. The best thing you can do as an author is
to specify as much as you can, especially those things that are important for
your page to look right. It is also important to view your work through those
browsers that people actually use. Since most people use Internet Explorer,
that is a good start. You may also want to have a copy of a couple other less
popular browsers (Firefox, Opera) to be sure that you
look presentable to them too.
Another
consideration is screen resolution. Most people use 800x600, a few still use 640x480 and many have theirs set to 1024x768 or higher.
Using a bit of javascript
in this page I can detect YOUR current screen resolution...
|
|
Your current screen
resolution: |
It is a very good idea to check your
page at other resolutions. Your carefully crafted table might fall apart at
other resolutions. View your creation at a different resolution and you might
be surprised.
If you're not sure how to change
your screen resolution I've written a few instructions here.
Ok, back to tables... now we will
play with colspan (Column Span) and rowspan (Row Span maybe??). Let's suppose Ed beats
the crap out of Tom and throws him out of the table. Just doing that, this is
what we have.
<table border="3"> <tr><td>Ed</td><td>Rick</td></tr> <tr><td>Larry</td><td>Curly</td><td>Moe</td></tr> </table>
|
Ed |
Rick |
|
|
Larry |
Curly |
Moe |
It just left an empty spot and Rick
slid over to fill the void.
If we want Ed to actually take possession of Tom's cell and
make the area part of his own, we have to use the colspan
attribute like so...
<table border="3"> <tr><td colspan="2">Ed</td>
<td>Rick</td></tr> <tr><td>Larry</td><td>Curly</td><td>Moe</td></tr> </table>
|
Ed |
Rick |
|
|
Larry |
Curly |
Moe |
Ed's cell spans 2 columns.
To emphasize the point I made
earlier, about the browser trying to find an attractive solution, let's make Ed
span two columns but we'll put Tom back in. We will deliberately
introduce a discrepancy just to see how the browser handles it.
<table border="3"> <tr><td colspan="2">Ed</td><td>Tom</td>
<td>Rick</td></tr> <tr><td>Larry</td><td>Curly</td><td>Moe</td></tr> </table>
|
Ed |
Tom |
Rick |
|
|
Larry |
Curly |
Moe |
|
The point is 1) The
browser is very forgiving in that it does the best it can with what you give
it. 2) It is very important to specify what is important and make sure there
are no discrepancies or you may end up with a surprise.