2 Column Web Page - 2
This is the same basic 2 column web page with the addition of a 3 line embedded style sheet added to the head section.
I also changed the width of the left column to 200 pixels. Many web designers would use the narrow column structure for their navigational links.
Because the overall width of the table is set to 100% in the table tag, the browser uses the remaining space of the window for the right column.
In the next lesson I'll show you how to vary the borders with inline style sheets.
Now I provide a link to go back to the first page and a second link to go forward in the lesson.
Basic 2 Columns
Inline Border Settings
|
The code
<!doctype html public "-//w3c//dtd HTML 4.0 Transitional//EN">
<html>
<head>
<title>2 Column Web Page</title>
<style type="text/css">
h1 {font-family:arial,serif;font-size:16pt;font-weight-bold; font-style:normal; text-align:center}
p {font-family:arial,serif; font-size: 10pt; font-style:normal; font-weight:normal; text-align:left; text-indent: 1em }
a {font-family:arial; font-size:10pt; font-style:normal; font-weight:normal }
</style>
</head>
<body>
<table width="100%" cellpadding="5" cellspacing="0" border="1">
<tr valign="top">
<td width="200px" bgcolor= "#99ccff" align="center">
<h1>2 Column Web Page - 2</h1>
<p>This is the same basic 2 column web page with the addition of a 3 line embedded style sheet added to the head section.</p>
<p>I also changed the width of the left column to 200 pixels. Many web designers would use the narrow column structure for their navigational links.</p>
<p>Because the overall width of the table is set to 100% in the table tag, the browser uses the remaining space of the window for the right column.</p>
<p>In the next lesson I'll show you how to vary the borders with inline style sheets.</p>
<p>Now I provide a link to go back to the first page and a second link to go forward in the lesson.</p>
<p><a href="2-column-tables.html">Basic 2 Columns</a></p>
<p><a href="2-column-tables-3.html">Inline Border Settings</a></p>
</td>
<td align="center">
<h1>The code</h1>
<code></code>
</td></tr></table>
</body>
</html>
Note: Code omitted in code for clarity. Changes in red.
|