<table border = 1> <tr> <td> one </td> <td> two </td> </tr> <tr> <td> three </td> <td> four </td> </tr> </table>Gives this result:
one | two |
three | four |
<table border = 1 cellpadding = 10> <tr> <td align = right colspan = 2> <b><i>one</i></b> </td> </tr> <tr> <td> <img src = "../pics/icons/smiley.gif" width = 40 height = 40 alt = ""> </td> <td bgcolor = red valign = bottom> <font color = white> four </font> </td> </tr> </table>Gives this result:
one | |
![]() |
four |
Try to imagine the different parts of the table as being "inside" each other. The simple example above could be seen like this:
<table border = 1>
|
This way it may be easier to understand that each <table> must be matched by a </table>, each <tr> must me matched by a </tr> and each <td> must have its matching </td>. You also see that one or more <td></td> pairs must be found inside a <tr></tr> pair and that one or more <tr></tr> pairs must be found inside a <table></table> pair.
The whole thing is a bit like Russian dolls
Where the smallest doll fits into the second smallest which fits into the third smallest etc...
if you want something to motivate the use of indentation (i.e. when you "go into a new box" in the illustration above you also write the source code a little bit further in on the line and when you "go out from a box" you write the code a little bit more to the left again) take a look at the source code of the example above (where I have used tables inside tables...)
<table> <tr> <td bgcolor = black><tt> <font color = red><table border = 1></font> <table border = 0> <tr> <td><tt> </td> <td bgcolor = 550000><tt> <font color = ff5500> <tr></font> <table border = 0> <tr> <td><tt> </td> <td bgcolor = 990000><tt> <font color = ff8800> <td> </font> <table border = 0> <tr> <td><tt> </td> <td bgcolor = red width = 100><tt> <font color = blue> one</font> </td> <td><tt> </td> </tr> </table> <font color = ff8800> </td></font> </td> <td><tt> </td> </tr> </table> <table border = 0> <tr> <td><tt> </td> <td bgcolor = 990000><tt> <font color = ff8800> <td> </font> <table border = 0> <tr> <td><tt> </td> <td bgcolor = red width = 100><tt> <font color = blue> two</font> </td> <td><tt> </td> </tr> </table> <font color = ff8800> </td></font> </td> <td><tt> </td> </tr> </table> <font color = ff5500> </tr></font> </td> <td><tt> </td> </tr> </table> <table border = 0> <tr> <td><tt> </td> <td bgcolor = 550000><tt> <font color = ff5500> <tr></font> <table border = 0> <tr> <td><tt> </td> <td bgcolor = 990000><tt> <font color = ff8800> <td> </font> <table border = 0> <tr> <td><tt> </td> <td bgcolor = red width = 100><tt> <font color = blue> three</font> </td> <td><tt> </td> </tr> </table> <font color = ff8800> </td></font> </td> <td><tt> </td> </tr> </table> <table border = 0> <tr> <td><tt> </td> <td bgcolor = 990000><tt> <font color = ff8800> <td> </font> <table border = 0> <tr> <td><tt> </td> <td bgcolor = red width = 100><tt> <font color = blue> four</font> </td> <td><tt> </td> </tr> </table> <font color = ff8800> </td></font> </td> <td><tt> </td> </tr> </table> <font color = ff5500> </tr></font> </td> <td><tt> </td> </tr> </table> <font color = red></table></font> </td> <td><tt> </td> </tr> </table> |
This would (almost) not have been possible to write without using a very strict indentation...
You can set border = 1 while you are developing a table, even if you are not going to have a border on it later. In that case it is also a good idea to set border = 0 when you are finished instead of removing that tag altogether (it's a good help the day you want to change your page). The extreme code above will become this table when you set border = 1 in its source code:
<table border = 1>
|
Tables don't work at all on some browsers! (for example lynx and some older browsers). Because of this it might be a good idea to check your pages in one such browser and see where such problems may occur. You can often change the code so that it turns into simple lists in such browsers and still look good in your ordinairy browser by adding a few simple <br> in "strategic places". (I haven't done that on this page because I didn't want to confuse you by having <br> all over the place, seemingly for no reason).