Designing an entire homepage using tables


In this article I will guide you through the designing and writing of a home page I designed with tables. The page focuses on the TV-Sitcom "Friends". The real life site makes use of a bit of JavaScript but I have removed them for this demonstration.

The first thing to do is to take a look at what the finished product looks like and you can see that at http://www.usheen.com/s101feg/fin_prod.h...

Next you should take a look at the blank table I used to create the page and you can see that at http://www.usheen.com/s101feg/blank.htm

The code for this blank page is as follows:
<html>
<head>
<title>Friends - The Apartment : HOME</title>
</head>
<body background="blue_str.gif" bgcolor=#B7C4DD>
<center>

<table width=585 height=400 cellspacing=0 cellpadding=0 bgcolor=#ffffff border=1>
<tr>
<td colspan=2 height=75>
<br>
</td>
</tr>

<tr>
<td width=200 height=75><br></td>
<td width=385 height=75 valign=top><br></td>
</tr>

<tr>
<td colspan=2 width=585 height=250>

<!--this table is embedded in this cell-->
<table cellpadding=0 cellspacing=0 border=1>
<tr>
<td width=113 height=250><br></td>
<td width=90 height=250><br></td>
<td width=102 height=250><br></td>
<td width=137 height=250><br></td>
<td width=143 height=250><br></td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

The tables are set with cellpadding=0 and cellspacing=0 so as images placed in neighboring cells will have no space between them and if they line up correctly they will have the appearance of being just one image. Although I have border set to '1' above, this must be changed to '0' in the finished product.

The full size of the table is 585 pixels wide and 400 pixels high. The original image I created for the homepage was exactly those dimensions. I then used my image editor (Paint Shop Pro) to cut it up into smaller pieces so as to fit each into the separate cells of the table.

The first two rows contain three cells between them. To place the images in these cells I will use the background attributes of the <td> tags. It is also possible to just place an <img> tag in the cells but I want to add some writing in two of the cells so I will do it this way. The code for the three new cells is as follows:
...
<tr>
<td colspan=2 height=75 background="home1.jpg">
<font face=arial size=1 color=#333333>This site is fairly graphically <br>orientated and is best viewed <br>in 16 bit color or more.</font>
</td>
</tr>

<tr>
<td width=200 height=75 background="home2_1.jpg"><br></td>
<td width=385 height=75 valign=top background="home2_2.jpg">
<font face=arial size=2 color=#333333>Welcome..........section.</font>
</td>
</tr>

And you can see what the page looks like after this step at http://www.usheen.com/s101feg/step1.htm, but remember that the border attribute is still set to '1' so the page will still not look great.

The copyright of the article Designing an entire homepage using tables in HTML Lessons is owned by Oisin Prendiville. Permission to republish Designing an entire homepage using tables in print or online must be granted by the author in writing.

Go To Page: 1 2

Articles in this Topic    Discussions in this Topic