TECH Help with tables v.pics v.i'm the biggest noob ever

Falconer

Well-Known Member
Jun 23, 2006
65,534
Ok I'm pretty sure what I'm trying to do is simple, but I've been messing with it in Dreamweaver and notepad for the last day and can't get it right. I am seriously annoyed right now.

I have all my images and everything ready, but I can't get my site formatted the way I want.

Here's the layout I want:

template.gif


I want the entire site to be at a fixed width (say 900 for now)

I tried doing it all in one table, but I encountered two problems:

1. On the menu option images on the left side, there were spaces between them, and I don't want spaces. I have borders and everything set to 0. How do I get no space between images stacked vertically?

2. When I would try to add the data for the "info here based on whatever menu option you it would add another column to the right.
This confused the hell out of me because in the original table property I set the width to 900. So how is adding another data column extending the table past 900? Isn't the first table value you set absolute for the entire table? How do I force a table to be one width and not change no matter what I do to subsequent rows?


Now I'm very confused here because I tried it in w3school's html editor and got basically what I was looking for. But when I try the same thing in Macromedia, I get spaces between my menu buttons. What am I not seeing here?

Here's the code I used (for the images I just used an image that was on that site):

Code:
<table width="900" border="1">
   <tr>
      <td colspan=2> <center>Image.jpg goes here</td>
   </tr>
   <tr>
      <td width="234"><img src="http://www.w3schools.com/images/w3default80.jpg">

         <img src="http://www.w3schools.com/images/w3default80.jpg">
         <img src="http://www.w3schools.com/images/w3default80.jpg">
            <td valign="top">hi I should be on the right
            </td>
     </tr>
     </td>
   <tr>
      <td colspan="2">I should be at the bottom footer.jpg
      </td>
   </tr>
</table>
</body>
</html>
And here's the correct result that I got (notice how there's no spaces between the images):

correct.gif


But using that same exact format in my editor and browser puts spaces between the images. What am I doing wrong?

Also, how do I eliminate the space between the title image and the first image in my menu? This seems to happen "sometimes" with Macromedia (ie. I preview page in browser and it doesn't have a space, and then I preview it again and there IS a space).

Ok, is this possible to do with only one table or should I be adding more? I was thinking like the header gets its own row, then the menu items and info section are two rows, and then the footer is its own row. That's doable, right? I've seen other websites with roughly the same configuration but they have like 20 tables... is that necessary?

Thanks.
 

biawokauns

Active Member
Sep 18, 2001
19,873
Republic of Kalifornia
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>YUI Base Page</title>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc4" class="yui-t2">
   <div id="hd"><h1>Header</h1></div>
   <div id="bd">
	<div id="yui-main">
	<div class="yui-b"><div class="yui-g">
	<!-- YOUR DATA GOES HERE -->
	</div>
</div>
	</div>
	<div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
	
	</div>
   <div id="ft">Footer is here.</div>
</div>
</body>
</html>

you're welcome
 

hurleyint1386

Someone has sand in their vagina
Jan 6, 2005
3,646
Rochester, NY
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>YUI Base Page</title>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc4" class="yui-t2">
   <div id="hd"><h1>Header</h1></div>
   <div id="bd">
    <div id="yui-main">
    <div class="yui-b"><div class="yui-g">
    <!-- YOUR DATA GOES HERE -->
    </div>
</div>
    </div>
    <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
    
    </div>
   <div id="ft">Footer is here.</div>
</div>
</body>
</html>
you're welcome

:werd:

Table layout == :nono:
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,534
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>YUI Base Page</title>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc4" class="yui-t2">
   <div id="hd"><h1>Header</h1></div>
   <div id="bd">
    <div id="yui-main">
    <div class="yui-b"><div class="yui-g">
    <!-- YOUR DATA GOES HERE -->
    </div>
</div>
    </div>
    <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
    
    </div>
   <div id="ft">Footer is here.</div>
</div>
</body>
</html>
you're welcome

Thanks!

But I don't think I know what any of that stuff means.

Time to go do reasearch!

can I leave that css in there or do I have to make my own?
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,534
say in the meantime I want a basic version of my website running.

Is what i'm doing too complicated to do with tables, or is it possible? Also how do I prevent spaces between my images? How come it seems to be intermittent as to whether they appear or not?

Is w3schools a good place to learn this? That code you gave me might as well be written in Russian. I have no idea what any of it means. Is it css? I need to at least know where to start studying.

Thanks.
 

hurleyint1386

Someone has sand in their vagina
Jan 6, 2005
3,646
Rochester, NY
it's possible, but not fun. to switch from a table layout to CSS completely can be time consuming. Its better to do it at the beginning and not have to worry about it in the future
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,534
When you guys say "tableless CSS" what do you mean? Like no <table> tags at all?

I just did the CSS tutorial at w3schools and in their "CSS Table" lessons they use <table> tags.
 

hurleyint1386

Someone has sand in their vagina
Jan 6, 2005
3,646
Rochester, NY
When you guys say "tableless CSS" what do you mean? Like no <table> tags at all?

I just did the CSS tutorial at w3schools and in their "CSS Table" lessons they use <table> tags.

Correct. tables aren't a bad thing, they should only be used for certain things. You don't use a table to layout a website. If you've got any kind of data input (i.e. a form) then a table is perfect for something like that. You can use CSS to alter tables which is what you see.
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,534
Holy crap I'm (very slowly) starting to get this CSS stuff.

I understand it in concept, but it takes me a while to do certain things. But I think I'm slowly getting the type of layout I want using CSS and no tables at all!
 

hurleyint1386

Someone has sand in their vagina
Jan 6, 2005
3,646
Rochester, NY
Holy crap I'm (very slowly) starting to get this CSS stuff.

I understand it in concept, but it takes me a while to do certain things. But I think I'm slowly getting the type of layout I want using CSS and no tables at all!

Awesome. Congrats! If you need any help, just ask. We're always here to help. Especially if you are staying away from table layout and using CSS, we'll definitely help.
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
94
Guests online
39
Total visitors
133

Forum statistics

Threads
369,495
Messages
16,889,508
Members
86,873
Latest member
vitalesan