I think what Rantz is saying is that if you use this website as a cornerstone for your web-development knowledge, you're going to have a very poor set of skills. And he's right; you should be investigating table-less layouts, which often use <div> elements instead of <table> ones. If you can't be bothered reading why, then click <a href="#lol">here</a> to skip to the answer to your question. 
This is one of the the most basic of table-less layouts, which can be expanded upon pretty easily:
PHP Code:
<html>
<head>
<title>Page</title>
<style type="text/css">
body {
font: 10px Verdana;
}
#container {
margin: 0 auto;
width: 608px;
border: 1px solid yellow;
}
#header {
height: 40px;
border: 2px solid blue;
background: #AAAADD;
}
#menu {
height: 200px;
width: 150px;
border: 2px solid red;
background: #DDAAAA;
float: left;
}
#body {
height: 200px;
width: 450px;
border: 2px solid green;
background: #AADDAA;
float: right;
}
#footer {
height: 40px;
border: 2px solid aqua;
background: #AADDDD;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="menu">Menu/navigation</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Which produces something very similar to this:
<table cellpadding="0" cellspacing="0" style="margin: 0 auto; border: 1px solid yellow; width: 600px; font: 10px Verdana;"><tr><td colspan="100%" valign="top" style="border: 2px solid blue; background: #aaaadd; width: 100%; height: 40px;">Header</td></tr><tr><td valign="top" style="border: 2px solid red; background: #ddaaaa; width: 150px; height: 200px;">Menu/navigation</td><td valign="top" style="border: 2px solid green; background: #aaddaa; width: 450px;">Body</td></tr><tr><td colspan="100%" valign="top" style="border: 2px solid aqua; background: #aadddd; width: 100%; height: 40px;">Footer</td></tr></table>
Using a table-less layout takes much of the structural information in tables and puts it in the CSS. As a result, here's the difference in the structural code for the actual HTML of your page. As you can see, the divs are a lot neater and easier to understand and code:
PHP Code:
<!-- note that these two bits of code accomplish exactly the same thing in this context -->
<!-- table-less layout -->
<div id="container">
<div id="header">Header</div>
<div id="menu">Menu/navigation</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<!-- using tables -->
<table cellpadding="0" cellspacing="0" id="container">
<tr>
<td colspan="100%" valign="top" id="header">Header</td>
</tr>
<tr>
<td valign="top" id="menu">Menu/navigation</td>
<td valign="top" id="body">Body</td>
</tr>
<tr>
<td colspan="100%" valign="top" id="footer">Footer</td>
</tr>
</table>
<a name="lol">If</a> you still absolutely must keep playing with this layout and still want to centre it, there are two things you need to do in the first <table> tag:
1. Change the width attribute to something less than 100%. Whichever width looks the nicest to you.
2. Insert a style attribute defining the margin. The tag should wind up similar to this:
PHP Code:
<table height="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" width="70%" style="margin: 0pt auto;">
html help please
Posting Permissions
Reply With Quote
