Here's the HTML code that I used to achieve that
4-cell screen map:
<table border=0 width=100% height=100%>
<tr>
<td bgcolor=ff6600 valign=top width=50%> & nbsp ;
<td bgcolor=00ff00 valign=top width=50%>Top Right
<tr>
<td bgcolor=cc99ff valign=bottom width=50%>Bottom Left
<td bgcolor=ffff33 valign=bottom width=50%>Bottom Right
</table>
Notice the new vertical align switch valign which makes sure that all text in a table detail starts from the top of the table detail cell you place it in.
Note, too, that strange piece of code & nbsp ; which is called a non-breaking space. You use it when cells are empty of detail information but you still want them to fill out to their full width and height. When you use the code remove any spaces so that the ampersand, the letters nbsp and the semi-colon are all one string together.
Activity: With a 4-cell screen map table it's difficult to place text and images in the dead centre of the screen. The centre of the screen is probably the most important zone for your users. Use a table to make a 9-cell division of the screen. Make each table detail cell have a different background colour. Finally, make the word centre appear in the centre of the central table detail cell! Beware of the US spelling of center (sic) in the hypertext markup language.
Suggested Response:
9-cell screen map First, I changed the width setings
from 50% to 33% to create a screen of 3 x 3 table detail cells. I had a little
difficulty in making text appear in the centre of the central table detail cell
but in the end succeeded with this code:
<td bgcolor=ffcc33 valign=center width=33%><center>centre