Tables within tables

[Otuatail]

I am tring to have to tables within a main table. The left table is a menu of
buttons, the right is the content. The problem i have is if the content on the
right is less than the menu table on the left, the content verticaly aligns its
self and I can't get the logo/Banner to align at the top of the page. The menu
was originaly on the right side but I could not fix it's position between 700
and 800 pixels on the page consistantly from page to page. Is there away around
this alignment.

I heard mention of absolute positioning. Can I have to seperate tables on a
page and absolute position them?

Desmond.

 

[David Dorward]

I am tring to have to tables within a main table.

Oh dear. That is almost always caused by abusing tables for layout.
http://www.allmyfaqs.com/faq.pl?Tableless_layouts

The left table is a menu of buttons,

A menu? That sounds more like a list then a table.
http://css.maxdesign.com.au/listamatic/

the right is the content.

That might be a table, or it might include tables, then again tables might
not come into it at all. Depends on the content.

The problem i have is if the content on the right is less than the menu
table on the left, the content verticaly aligns its self and I can't get
the logo/Banner to align at the top of the page.
http://www.w3.org/TR/CSS2/visudet.html#line-height

The menu was originaly on the right side but I could not fix it's position
between 700 and 800 pixels on the page consistantly from page to page.
http://www.allmyfaqs.com/faq.pl?AnySizeDesign

I heard mention of absolute positioning. Can I have to seperate tables on
a page and absolute position them?

Yes, but that probably isn't a good solution to the problem.

 

[Webcastmaker]

I am tring to have to tables within a main table. The left table is a menu of
buttons, the right is the content...

You need to do several things. First, always include a URL showing
the problem. Second, learn CSS layout. Both will help you solve the
problem.

 

[SpaceGirl]

You need to do several things. First, always include a URL showing
the problem. Second, learn CSS layout. Both will help you solve the
problem.

If he's struggling with tables, you think CSS is any easier!?

*shakes her head*

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Webcastmaker]

If he's struggling with tables, you think CSS is any easier!?

He is struggling with nested tables. CSS probably is easier.

 

[Otuatail]

Thanks for all the sugestions the CSS is working better but I have a gap
between 2 tables and I cant position them or close the gap. This is what I have
in CSS

..table1
{
float: left;
width: 160px;
left: 0;
top: 0;
}

..
..table2
float: left;
width: 160px;
left: 500;
top: 100;
}

and in html

<div class="table1">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
</div>


<div class="table2">
<table>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>

desmond.

 

[rf]

Thanks for all the sugestions the CSS is working better but I have a gap
between 2 tables and I cant position them or close the gap. This is what I have
in CSS

<snip code>

Don't supply code. Upload an example page to somewhere and provide a URL to
it. Makes it easier.

However, in this case, it is easy enough to see what is happening.

Your CSS rules select things like .table. However, the selected element is a
div, not a table. Confusing for you and me.

Use classes like "nav" and "content".

Turn on borders for everything in your CSS:
* {border: solid 1px green;}

You should see where the elements are going.

If you don't then for each of your .table[n] rules add a different border:
border: solid 1px red;
and
border: solid 1px blue;

You will see that the divs (which you are floating left) are right next to
each other.

The tables are not because they are not as wide as the divs. You can see
this now you have borders on.

<aside>
Worser yet, if you add some more content to those tables, by say putting
"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" in one of the cells you will see that
everything will expand to fit that content, as it should.

The width's you have specified are only suggestions
</aside>

You do seem to be getting the idea behind CSS. However, take it all the way.
Get rid of the tables entirely, they are only confusing the issue and you
are ending up with a sort of hybrid of the two different approaches to
layout. Tables | CSS, not tables & CSS (unless your table contains tabular
data of course).

Make your navigation into an <ul> and float that left. Each of the links
become a <li>. The content should be a div, not a table (or a table within a
div), and it should not be floated (in this case). Just give it a suitable
left margin (optional), so its content stays to the right of the navigation.

If you provide a URL to what you have at the moment then it will only take a
few minutes for one of us to convert that to a true CSS layout. You will
also see why it is better to use em's for those dimensions rather than
pixels, and a few other things to boot. (listening Jukka )

 

[DU]

If he's struggling with tables, you think CSS is any easier!?

*shakes her head*

Recently, a tableless design of the microsoft.com site proved a file
size reduction of 62% while improving several other aspects
(accessibility, nr of browsers supported, site maintainability, etc) of
the webpage.

Throwing Tables Out the Window
http://www.stopdesign.com/articles/throwing_tables/

There are other sites who have done a similar comparison and they all
reached basically the same results. The more a site relies on nested
tables, the more the page file size is bigger and the page download
time, rendering time is longer. Also, the page is more prone to crash on
modest user system when making commands (e.g.: printing a text selection
which involves nested tables content).

Relying on table design (in particular nested tables) for layout just
does not make any sense from many perspectives.

Why tables for layout is stupid:
problems defined, solutions offered
http://www.hotdesign.com/seybold/

Tables My Ass
http://www.htmldog.com/ptg/archives/000049.php

Tableless layout HOWTO
http://www.w3.org/2002/03/csslayout-howto

DU