Support NeoGAF

[Particle Physicist]

im working on a site and i basically have it set up as so::

+-+----+-+
|   1    |
+-+----+-+
| | 4  | |
|2|    | |
| |    |3|
+-+----+-+

1, 2, and 3 are images.. the content is in 4 ..

basically, i want the content to be surrounded by these images.. im not sure if tables is the best way to do it.. any other suggestions?

anyway, as for the tables, i have the border, cellspacing, and cellpadding set to zero yet there is a slight space between the first row and the second one (i.e. between 1 and 2+3+4)

is there a way to get rid of that space?

 

[Phoenix]

Have you done valign=top yet for the stuff in the bottom cells? There may be space there because the cells are still big enough to take the image yet have some space left over.

 

[Particle Physicist]

ah yes, that works.

anyway. is this method alright? is there a more efficient way of making this work ?

 

[cloudwalking]

Technically, if you did it using CSS it would load faster, but since it looks like it's not an overly complex table, you should be fine.

 

[Deleted member 4784]

I dunno if I can use HTML here or not, so replace < with [ and > with ] and also be sure to update/replace the sizes and file names I have given.

[/td][/tr][tr][td width="100"][img src="left.png" width="100" height="100"][/td][td width="500"]Content Goes Here[/td][td width="100"][img src="right.png" width="100" height="100"][/td][/tr][/table] I think this is what you are looking for.

 

[Phoenix]

ah yes, that works.

anyway. is this method alright? is there a more efficient way of making this work ?

Not without doing pretty much the exact same thing in CSS styles

 

[xsarien]

ah yes, that works.

anyway. is this method alright? is there a more efficient way of making this work ?

I'm going to suggest you use CSS mostly because it's the "real" way to do it.

(All kidding aside, now that CSS exists, using tables to establish a layout just makes things more complicated, and with CSS you can change the design on a whim if you so choose without having to recode everything.)

 

[SantaC]

This is the exact code you are looking for:

<table border="1" cellpadding="0" cellspacing="0" width="150" height="250">
<tr><td colspan="3" align="center">1</td></tr>
<tr><td align="center">2</td>
<td valign="top" align="center">4</td>
<td valign="bottom" align="center">3</td></tr></table>

replace numbers with img

 

[maharg]

Technically, if you did it using CSS it would load faster, but since it looks like it's not an overly complex table, you should be fine.

Have any of you people suggesting he use CSS ever actually *done* a three column layout in CSS? It's not simple.

[edit] Oh they're just images. That's not that difficult, but it's still pretty wacky.

 

[xsarien]

Have any of you people suggesting he use CSS ever actually *done* a three column layout in CSS? It's not simple.

[edit] Oh they're just images. That's not that difficult, but it's still pretty wacky.

If the browsers would adopt the CSS column attributes (standards be damned, they're that cool!) it wouldn't be an issue.

 

[Particle Physicist]

This is the exact code you are looking for:

<table border="1" cellpadding="0" cellspacing="0" width="150" height="250">
<tr><td colspan="3" align="center">1</td></tr>
<tr><td align="center">2</td>
<td valign="top" align="center">4</td>
<td valign="bottom" align="center">3</td></tr></table>

replace numbers with img

yeah.. this is basically how i have it set up.. except the border.. im trying to get a border around the whole table, but not around the individual cells.. is that possible? when i try adding border="1" the damn thing puts a border around evry cell.

 

[Cherubae]

You just need to add a style to your table and remove the "border=" tag.

<table [i]style="border:2px solid blue;"[/i] cellpadding="0" cellspacing="0" width="150" height="250">
<tr><td colspan="3" align="center">1</td></tr>
<tr><td align="center">2</td>
<td valign="top" align="center">4</td>
<td valign="bottom" align="center">3</td></tr></table>

example -> www.fogu.com/temp/test.htm