How do you make a table? Dreamweaver

Phate

Phate

Phate

Caporegime
Joined
1 Nov 2003
Posts
35,691
Location
Lisbon, Portugal
Hey people, writing my first PROPER website, as i'm doing it for myself.

Right and how do you make tables?

what i'm looking to do is

boxgj6.jpg


now i've got the logo in fine, cos thats the easy part :p

but what i'm looking to do is to make a table like above to have links to different sections of the website on the side,

and the text block i'm going to be having pictures there with captions, and the pictures will be changing occasionally

I've got the code/design split screen going on to try and teach myself code but anywho here is the code i've got so far

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to JEP Productions</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>

<body>
<div align="center"><img src="../../My Pictures/Photoshop/jepproductionsbanner.jpg" width="800" height="200" alt="Banner"/></div>
<td bordercolor="#FFFFFF" bgcolor="#000000">


</body>

</html>
Click to expand...

Thanks for all your help guys :)
 
Alright mate :)
Probably best not to use tables and get your head into CSS. Have a look at this tutorial, seems like it might be what you're after:
Linky
The only thing you'd need to change is the float on the side bar and the contents to match your design. Hope this helps mate!
 
Just had a go at tweaking the (x)html from the tutorial to get to your design (waaaaay to much time on my hands, lol):

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<title>Your site title</title>
	<style type="text/css">
	body,
	html {
		margin:0;
		padding:0;
		background:#a7a09a;
		color:#000;
	}
	body {
		min-width:750px;
	}
	#wrap {
		background:#99c;
		margin:0 auto;
		width:750px;
	}
	#header {
		background-image:url();/*Header image goes here*/
		height:200px;
	}
	#header span {
    	display:none;
    }
	#main {
		background:#9c9;
		float:right;
		width:600px;
	}
	#main h2, #main h3, #main p {
		padding:0 10px;
    }
	#sidebar {
		background:#99c;
		float:left;
		width:140px;
	}
	#sidebar ul {
		margin-bottom:0;
    }
    #sidebar h3, #sidebar p {
		padding:0 0 0 10px;
    }
	#footer {
		background:#cc9;
		clear:both;
	}
	#footer p {
		padding:5px;
		margin:0;
    }
	</style>
</head>
<body>

<div id="wrap">
	<div id="header"><span>Your site title here<span></div>
	<div id="main">
		<h2>Column 1</h2>
		<p><a href="/">456 Berea Street Home</a> | <a href="/lab/developing_with_web_standards/csslayout/2-col/">Simple 2 column CSS layout</a> | <a href="http://www.456bereastreet.com/lab/developing_with_web_standards/">Developing with web standards index</a></p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
		<h3>Consectetuer adipiscing elit</h3>
		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>

	</div>
	<div id="sidebar">
		<h3>Column 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
			<li><a href="#">Link 6</a></li>
			<li><a href="#">Link 7</a></li>
			<li><a href="#">Link 8</a></li>
			<li><a href="#">Link 9</a></li>
			<li><a href="#">Link 10</a></li>
			<li><a href="#">Link 11</a></li>
			<li><a href="#">Link 12</a></li>
			<li><a href="#">Link 13</a></li>
			<li><a href="#">Link 14</a></li>
			<li><a href="#">Link 15</a></li>
		</ul>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>
</body>
</html>
 
I agree, but you'll still need to learn tables. Just not for layouts.

They are used to display tabular content, hence their name, for things like football leagues, recipes etc
 
You must log in or register to reply here.
Back
Top Bottom