How do I place my table? [Archive]

Click to See Complete Forum and Search --> : How do I place my table?

darthraid

01-10-2003, 02:55 AM

Very easy question, but as I am new to HTML, I'm having some trouble. I'll post what I have so far, and maybe you can see what the problem is. I want the last table, to go at the top, middle of the page, directly to the right of the top left table.

Code:

<head>
<title>Brandon is a nub at webpages</title>
</head>
<body bgcolor="#3366FF" marginwidth="0" marginheight="0" leftmargin="5" rightmargin="5" topmargin="5">

<table border="0" bordercolorlight="#FFFFFF" width="780" cellpadding="0" cellspacing="0">
<tr>
<td>

<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr>
<td height="128" background="suxpageweb.jpg"> </td>
</tr>
</table>

<table border="1" width="20%" cellspacing="0" cellpadding="2" bordercolor="#808080" bordercolorlight="#000000"><tr><td width="100%" bgcolor="#3333FF">:: Your page rules ::..</td></tr></tr><tr><td width="100%" align="right" bgcolor="#656565">Mine Sux</td></tr><tr><td width="100%">Next Battle 

Jan 12 2003 [Sat]

 Time [est.] 

7:00pm

 Versus 

Strike Force / Death Knights

 Practice Time 

1 hour before match

</td></tr></table>

<table border="1" width="20%" cellspacing="0" cellpadding="2" bordercolor="#808080" bordercolorlight="#000000"><tr><td width="100%" bgcolor="#3333FF">:: It will take ::..</td></tr></tr><tr><td width="100%" align="right" bgcolor="#656565">A while to learn this</td></tr><tr><td width="100%">Next Battle 

Roman I suck at this

 Time [est.] 

How do I space the tables out?

 Versus 

So they don't touch each other?

 Practice Time 

1 hour before match

</td></tr></table>

<center><valign="top"><table border="1" valign="top" valign="top" width="50%" cellspacing="0" cellpadding="2" bordercolor="#808080" bordercolorlight="#000000"><tr><td width="100%" bgcolor="#3333FF">:: News ::..</td></tr></tr><tr><td width="100%" align="right" bgcolor="#656565">AP|Events|</td></tr><tr><td width="100%">Next Battle 

Jan 12 2003 [Sat]

 Time [est.] 

7:00pm

 Versus 

Strike Force / Death Knights

 Practice Time 

1 hour before match

</center></valign>

</td></tr></table>
</body>

jpmoriarty

01-10-2003, 04:06 AM

firstly i would suggest (being the convert that i now am) you try this in CSS - have a look at the CSS board, and search the lot for postings by me, cos there was one i started where stefan et. al. showed me how to do a thing similar to what you're trying to do - look at www.j-moriarty.co.uk for example.

However, if you really want to stay with tables, then from having a quick look at your code (and you probably should have included a simplar example cos all those blooming table codes get hard to understand (hence why CSS is so great)) i would think what you need to do is put in.... another table.

What you're after effectively is two columns, and we all know that can be done using tables simply:

<table width="100%">
<tr>
<td width="50%">
Some data
</td>
<td width="50%">
Some more data
</td>
</tr>
</table>

That's pretty simple obviously, and you already know how to do it. Then what you'd do is put your tables that you want in colums into the cell's that you've already defined above (with contents "some data" and "some more data") - ie you would replace "some data" with all your table commands for that left column "Your page rules etc", and then replace "some more data" with your news bits. That way, they can both be aligned at the top.

Having said all that (the process is called "nesting tables"), I will quote stefan (paraphrase i should say) and point out that it's extremely bad practice since it limits your audience (people with text readers etc suffer hugely). Not only that however, but it makes the coding EXTREMELY difficult to understand, and hence makes your job harder as a coder. Moving to css is a little odd at first, but once you've done a few style sheets it really is a godsend, makes your pages much easier to code, and makes them accessible to a lot more people.

Good luck in any case!

Nicodemas

01-10-2003, 04:12 AM

Try this, guy. I sincerely hope you start using CSS to get the font/color/size definitions done, rather than all that HTML over and over and over.

I put some CSS in your code, and you can use it if you want too, just be sure to uncomment it and remove your font definitions. For each part that you want a certain color, just copy and past the correct color in front of the text...sGrey for grey and sWhite for white, then delete all the HTML encoding you have for the font, size, etc....

<html>
<head>
<title>Brandon is a nub at webpages</title>
<STYLE>
#sGrey{color:B7B7B7; font-family:verdana; font-size:11px}
#sWhite{font-size:11px; font-family:verdana; color:FFFFFF; text-decoration:underline; font-weight:heavy}
</STYLE>
</head>
<body bgcolor="#3366FF" marginwidth="0" marginheight="0" leftmargin="5" rightmargin="5" topmargin="5">

<TABLE CELLPADDING="3" BORDER="0">
<TR>
<TD VALIGN=top>
<table border="1" cellspacing="0" cellpadding="2" bordercolor="#808080" bordercolorlight="#000000">
<tr>
<td width="100%" bgcolor="#3333FF">
:: Your page rules ::..
</td>
</tr>
<tr>
<td width="100%" align="right" bgcolor="#656565">
Mine Sux
</td>
</tr>
<tr>
<td width="100%">
Next Battle 
Jan 12 2003 [Sat] 
Time [est.] 
7:00pm 
 
Versus 
Strike Force / Death Knights 
Practice Time 
1 hour before match
</td>
</tr>
</table>

<table border="1" width="88%" cellspacing="0" cellpadding="2" bordercolor="#808080" bordercolorlight="#000000">
<tr>
<td width="100%" bgcolor="#3333FF">

:: It will take ::..
</td>
</tr>
<tr>
<td width="100%" align="right" bgcolor="#656565">

A while to learn this
</td>
</tr>
<tr>
<td width="100%">
 Next Battle
 
 Roman I suck at this
 
Time [est.]
 
How do I space the tables out? 
 
Versus 
So they don't touch each other? 
 
Practice Time 
1 hour before match 
</td>
</tr>
</table>
<TD VALIGN=top>
<table border="1" valign="top" valign="top" width="400" cellspacing="0" cellpadding="2" bordercolor="#808080" bordercolorlight="#000000">
<tr>
<td width="100%" bgcolor="#3333FF">
:: News ::..
</td>
</tr>
<tr>
<td width="100%" align="right" bgcolor="#656565">
AP|Events|
</td>
</tr>
<tr>
<td width="100%">
Next Battle 
 Jan 12 2003 [Sat] 
Time [est.] 
 7:00pm 
Versus 
 Strike Force / Death Knights 
Practice Time 
 1 hour before match
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>

</body>
</HTML>

jpmoriarty

01-10-2003, 05:03 AM

well, ideally you should use the CSS for a lot more than that...

take a look at this thread which i refered to earlier but didnt have the details for...

CSS to replace tables for layout (http://forums.webdeveloper.com/showthread.php?s=&threadid=278)

it'll change the way you work forever!

darthraid

01-10-2003, 11:38 AM

Wow guys, excellent help. I'm really pretty new at webpage design, so I'm open to anything. I'll deffinetly try to incorporate the CSS, I agree, doing the tables the way I have is very confusing and time consuming. Let me see what I can do.

Thanks,
Brandon

darthraid

01-10-2003, 12:31 PM

One thing I noticed about your code Nico, is that it makes the tables slightly wider, and the table heading spaces are larger. ie. the words don't fit in as closely as they did. I tired fiddling w/ cell padding and I still couldn't get it right. Also, "Next Battle" and "Jan 12" in the first table aren't affected by the CSS code. They are in plain black text. Tihs is pretty confusing to me right now, I'm having a little trouble seeing how it's done, but in time. http://www.geocities.com/darthraid//index.htm is the link to my page, is it possible to make it look like that w/ CSS? I know tables are inefficient, but if I can't get that accuracy w/ CSS it's either not right for me, or I have very little knowledge of how to do it...I'm guessing the latter. ;)

Brandon

jpmoriarty

01-11-2003, 04:41 AM

like th elook man - and there's no reason why you cant do it with css. In fact you'd be better off too, cos it will save you a lot of headaches.

One of the other things about css's is reaised by your point "I can't get that accuracy w/ CSS ". CSS's are powerful (this is completely unofficial now, i may be wrong but it's just what i've noticed) because they work well whatever the resolution you're browsing at. Yes this means that things might not look quite right, or not quite perfect, but if you look at them on any resolution then they'll be pretty close. However with tables, if you shoot up to a really high resolution (1600x1200 or something) then if you've designed the site for 800x600, then it's going to look silly - you'll have a few really small tables and acres upon acres of white space.

That said, i've noticed that the code on your site is now infinetely easier to read, and probably a hell of a lot quicker to program too. Plus it looks good and displays quick. A couple of points - as opposedto having quite so many div's, think you'd be better off defining other styles - eg, define <h1> (first level header) as you've defined <div class="header">, and define so that you can put that in instead of <div class="info">. you do that just as you have for body, so just put p { and then the definition } etc (check the W3C guidelines though - or just play like I do!)

Would love to help more, but my CSS's really arent that great. Here's a tip though - your second news box isnto working out too well because of all those <div>'s - you need to add another </div> just before the start of the second news bit (there's why you need to start using and <h1>!).

Secondly, it might look worse then becuase you're telling your news bit to be positioned absolutely, so it will just put the second one on top of the other one. YOu need to use the floats (i think) like I did on my site, but i'm not sure how you canuse that and then add more than one section to each side - sorry. I'm sure some guru will be along in a moment!

spufi

01-13-2003, 11:58 AM

Hey now, that's my code you're talking about. :p At least it's his variation on my code I gave him to use instead of what he was using. I just went and did a quickie recode, so I understand that it could have been done a little better. Thanks for the comments though. I'll play around with it some more.