Online Web Design Course » Creating Site Layout By Using Tables

CMS

Content

HTML

Images

Monetizing

Home » HTML

Creating Site Layout By Using Tables

Monday, 22 March 2010 ·

Print This Post No Comment

Your First Website Layout

We’re going to build a website that has a navigation menu along the left hand side. In order to do that, we need a “main” table that has two columns – one reserved for the navigation menu and the other for the content. Note that we’re going to add borders to our table to make it visible, but main tables generally do not have any borders. We’re then going to define the width of our table as “100%” to ensure it fits the screen in all screen resolutions and browser windows. We’re also going to define a width for our navigation menu – it can be both fixed or a percentage depending on your personal taste. We’ll set it to a fixed value of 120 pixels for this particular example.

Let’s write down the HTML code for our “main” table:

</head>
<body>

<table border=”1″ width=”100%”>
<tr>
<td width=”80″>
Navigation Menu Will Go Here
</td>
<td>
Site Content Will Go Here
</td>
</tr>
</table>

</body>
</html>

The above HTML code will generate the below output:

Navigation Menu Will Go Here

Site Content Will Go Here

Now, we can add an additional table to the left column to form a navigation menu. We’ll also set the “border” attribute of the “main” table to “0″ (zero) in order to make our site look nicer

Sidenote: Putting a table inside another table is called “nesting tables”. Nested tables are used heavily to create neatly designed websites.

Copy and paste the below HTML code into your notepad to form a simple website with a navigation menu on the left:

</head>
<body>

</td>
<td>
Site Content Will Go Here
</td>
</tr>
</table>

</body>
</html>

The above HTML code will create a navigation menu:

Home

Page1

Page2

Page3

etc…

Site Content Will Go Here

We can add a logo and some graphics or ads to the top part of our page. To do that we are going to add another row to the top part of our main table:

</head>
<body>

<table border=”0″ width=”100%”>
<tr>
<td height=”40″>YOUR LOGO</td>
<td>YOU CAN PLACE GRAPHICS OR ADS HERE</td>
</tr>
<tr>
<td width=”80″>

</td>
<td>
Site Content Will Go Here
</td>
</tr>
</table>

</body>
</html>

The above HTML code will produce a simple but complete website layout:

YOUR LOGO

YOU CAN PLACE GRAPHICS OR ADS HERE

Home

Page1

Page2

Page3

etc…

Site Content Will Go Here

If you enjoyed this lesson, please link to it

Yup, we’re done! Next lesson of your free online web design course will show you how to change background colors, how to add background images and how to avoid background & foreground color conflicts when designing your websites. Let’s go!

Series Navigation«Merging Table Cells