PDA

View Full Version : Advance Html Table - Or Something That Will Do The Trick


websitebuilder101
06-11-2009, 07:26 PM
So I'm working on a layout for one of the pages and would like to have have one section appear as the attached drawing. If there is an easier way to code this out besides using a table let me know. The tricky part I am having is having the images overlap in the same row. I was guessing that the Text would be rowspan=1 and images rowspan=2, but the layout doesn't come out as expected.

Thanks for the help!
ByteRot
06-11-2009, 08:29 PM
Putting two tables into one table should get you what you want.


<table>
<tr><td>
<table>
<tr><td>....
<tr><td>....
</table>
<table>
<tr><td>....
<tr><td>....
</table>
</td></tr>
</table>
pghcollectibles
06-11-2009, 08:59 PM
i might even have the two tables each in their own datacell to make sure they dont get<br> broke from a narrow browser window

otherwise the row span would work too (you do not have to define rowspan=1 that is default) essentially you have a table with three rows two columns. code it both ways, see which one you like better. tables within tables are more common than rowspan or colspan it seems. heres a link (http://www.w3schools.com/html/html_tables.asp) for more info on tables

this can also be done with <div> and/or CSS
websitebuilder101
06-11-2009, 09:14 PM
I might be missing something real obvious . . . but when I do table in table it is isn't allowing the images to overlap . . . so row one has the text and image and row two has image and text but the images are not overlapping . . .

the images also have the rowspan=2 within the <td> tags . . .

Thanks for the help . . .


Here is what I have . . .

<table>
<tr><td>
<table>
<tr>
<td width="50%" align="center">Text Part 1 . . .</td>
<td rowspan="2" width="50%" align="center"><img src="image1.jpg"></td>
</tr>
</table>
<table>
<tr>
<td rowspan="2" width="50%" align="center"><img src="image2.jpg"></td>
<td width="50%" align="center">Text Part 2 . . . .</td>
</tr>
</table>
</td></tr>
</table>
pghcollectibles
06-11-2009, 09:37 PM
you want the images to overlap? thats not what your picture showed.

you can use css to overlap images. the attribute you want is called z-index

here (http://www.w3schools.com/css/pr_pos_z-index.asp) is a tutorial on that. also position (http://www.w3schools.com/css/pr_class_position.asp) is going to determine how they get layed out

you would lay them out something like this:

<div id='wrapper'>
<div id='img1_container'><img id='img1' src='somewhere' border='0' /></div>
<div id='img2_container'><img id='img2' src='somewhere' border='0' /></div>
<div id='img3_container'><img id='img3' src='somewhere' border='0' /></div>
<div id='img4_container'><img id='img4' src='somewhere' border='0' /></div>
</div>when you make your css it is easier to edit in the head or in a separate stylesheet that you could integrate with other pages if you wanted to later:

<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px:
}

h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>or separate, here's that (http://www.w3schools.com/css/css_howto.asp) link
websitebuilder101
06-11-2009, 10:03 PM
Apologize for the confusion. But the code I have is only putting up what appears to be a 2 x 2 box . . . see attachment . . .
pghcollectibles
06-12-2009, 12:24 AM
the code you just posted is creating 2 td (datacells) within 1 tr (tablerow) per table(a row with 2 cells). the example ByteRot gave you has 1 td per tr and 2 tr per table (basically a column with 2 cells, but technically 2 rows with one cell each stacked on top of each other)


<table>
<tr>
<td>
<table>
<tr>
<td align="center">Text Part 1 . . .</td>
</tr>
<tr>
<td align="center"><img src="image2.jpg"></td>
</tr>
</table>
<table>
<tr>
<td align="center"><img src="image1.jpg"></td>
</tr>
<tr>
<td align="center">Text Part 2 . . . .</td>
</tr>
</table>
</td>
</tr>
</table>note the picture names as far as placement goes. Although i would put the text for each picture above and below, not skewed. More like a news paper would.

Also there is another cool way of "inserting" your picture into the text here (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_float). after the page opens, erase the code in the box on the left and put this in its place:

<html>
<body>

<p>
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x <img src ="hackanm.gif" align ="right" width="48" height="48">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x <img src ="hackanm.gif" align ="left" width="48" height="48">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </p>

</body>
</html>
websitebuilder101
06-12-2009, 01:15 AM
Thank you both ByteRot and Pghcollectibles for your help. Still having issues . . . although I think we can get on the same page with the link that you sent pgh . . .

Using the tryit html editor you provided I inserted this code:

<--------start code--------->



<table>
<tr>
<td>
<table>
<tr>
<td align="center">Text Part 1 . . .</td>
</tr>
<tr>
<td align="center"><img src="http://www.w3schools.com/html/hackanm.gif"></td>
</tr>
</table>
<table>
<tr>
<td align="center"><img src="http://www.w3schools.com/html/hackanm.gif"></td>
</tr>
<tr>
<td align="center">Text Part 2 . . . .</td>
</tr>
</table>
</td>
</tr>
</table>



<--------end code--------->

I also used the images that they have in the example. In doing so it places everything stacked on top of each other like a totem pole, and not like in my original drawing . . . please let me know if you are seeing the same thing . . . see my attached screencap . . . thanks again for your help
stamat
06-12-2009, 04:15 AM
If image I attached is what you want, then this is the code:


<table border=1>
<tr>
<td>

<table border=1>
<tr>
<td align="center">Text Part 1 . . .</td>
</tr>
<tr>
<td align="center"><img src="http://www.w3schools.com/html/hackanm.gif"></td>
</tr>
</table>

</td>
<td>

<table border=1>
<tr>
<td align="center"><img src="http://www.w3schools.com/html/hackanm.gif"></td>
</tr>
<tr>
<td align="center">Text Part 2 . . . .</td>
</tr>
</table>

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

I have added borders to tables just to make structure more visible.

Regards
dallas
06-12-2009, 07:48 AM
You'll never get any overlap with each image and text block in a cell. Why not make a div container, float an image block and a text block right, the other image and other text block left then use negative margins to get the overlap you want? You didn't say how much overlap you want and wether or not the overlap would be on a vertical or horizontal axis. Even without overlap four blocks floated in a container would give you better control over height and width of your four elements without dealing with rowspans and colspans.
pghcollectibles
06-12-2009, 09:23 AM
the code stamat posted is what i should have put in my last post. remember me saying about how the narrow browser window will break the inside tables apart and put them over each other if each table didnt get put in their own datacell within the outer table. (its probably possible to use style='white-space:nowrap;' but its less typing to just make it 2 different cells. that might be only for text anyway i cant remember.)

sorry about that and thanks for catching it stamat
websitebuilder101
06-12-2009, 03:35 PM
Thanks for the help everyone . . . An yes StaMat that was the look I was aiming for . . . I will mess around with it though . . . Thanks again for the help . . . I'll let you know if anything else stumps me . . .