Inserting tables in KompoZer is as simple as clicking the table icon in the toolbar. However, getting a symmetrical table proved to be a little more complicated. I promised in class that there must be a way to do it and that I would find out; mission accomplished!
The trick is to create your table first, then click inside the top left cell. Right-click and choose Table Cells Properties.
If you want a symmetrical table, click the box next to Width, type the desired width (50 if you have 2 columns, 33 for 3, 25 for 4, etc.) and click the drop-down to choose "%of table." Click Apply. Then click the "Next" button under Cell at the top and do the same thing for the next cell until everything in the top row has been covered. That's it!
For a fixed-width table, do the same thing but type in the pixel width for each top cell and leave the default at "pixels".
Monday, November 2, 2009
Second project file (last class)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Sample Website</title>
<meta name="description" content="Demonstration website">
<meta name="keywords" content="sample,HTML,CSS,">
<meta name="author" content="MAS HTML class">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h2{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#container{width:700px;margin:0 auto}
div#navigation{float:left;width:350px;height:100px;}
div#extra{float:right;width:350px;height:100px;}
div#footer{clear:both;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Welcome to our sample website</h2>
</div>
<div id="content">
<p class="border">We will demonstrate a number of HTML
coding techniques,
including images, links, and styled layout.</p>
<p>Thanks for visiting!</p>
</div>
<div id="navigation">Navigation links go here</div>
<div id="extra"><a href="mailto:hce@epix.net">Email us.</a>
<a href="mailto:hce@epix.net"><img alt="" src="mail.png" height="48" width="48"></a></div>
<div id="footer">Copyright 2009</div>
</div>
<!-- close div wrapper -->
</body></html>
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Sample Website</title>
<meta name="description" content="Demonstration website">
<meta name="keywords" content="sample,HTML,CSS,">
<meta name="author" content="MAS HTML class">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h2{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#container{width:700px;margin:0 auto}
div#navigation{float:left;width:350px;height:100px;}
div#extra{float:right;width:350px;height:100px;}
div#footer{clear:both;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Welcome to our sample website</h2>
</div>
<div id="content">
<p class="border">We will demonstrate a number of HTML
coding techniques,
including images, links, and styled layout.</p>
<p>Thanks for visiting!</p>
</div>
<div id="navigation">Navigation links go here</div>
<div id="extra"><a href="mailto:hce@epix.net">Email us.</a>
<a href="mailto:hce@epix.net"><img alt="" src="mail.png" height="48" width="48"></a></div>
<div id="footer">Copyright 2009</div>
</div>
<!-- close div wrapper -->
</body></html>
Subscribe to:
Posts (Atom)