Why don't the tables to what I want them to do!

Everytime I try to code my design I am having problems with the tables... I can get the top to work, no problem, but when I move onto the content part...

If I got 2 tables, one left, one right. And in the left table I got 6 rows in them, I can't have 2 rows in the table on the right, and put the line where I want it to be...

Does anyone understand me here ? And does anyone know how I can fix this?

And is it hard to start using div's?

I think I understand what you mean, but i'll just try to clarify...

Do you mean you are unable to put a different number of rows in each column, and assign a different height to each of those rows, presumably because each row 'snaps' into place, and then any adjustments made to one row affects the row in the other column?

I know for sure I had run into problems like that when I used to use tables more often (now I tend to only use them as per the W3C specifications).

As for your question relating to the difficulty of using CSS for layout - the answer is no. Sorry if that sounded rude, but I just wanted to clear up any uncertainty. Designing sites with tables is much harder, in my honest opinion. When I use to create complex table layouts, it used to do my head in so much that I found it hard to create the layout in notepad - I had to use some kind of WYSIWYG editor, even if I was using the code view. Designs/layouts become much more complicated than they need to be when tables are used. CSS might look less straight forward to someone who has only ever used tables, but believe me, if you just spend a coulple of hours tinkering with things, you'll get the hang of it in no time.

The hardest part of designig with CSS is not understanding how it's done, but understanding the bugs/problems each browser (usally the likes of Internet Explorer) has in it's interpretation of things. It's easy to create a site that conforms to W3C standards, but a bit harder to make it look/function consistant across all the different browsers (or the most popular ones, at least), even though your site conforms to standards.

However, don't let that put you off. The most important thing to do is get your site built using XHTML/CSS (and test it in a decent standards compliant browser - FireFox, Opera, whatever), and once your happy with it, only then begin to tweak things to get it to look right in Internet Explorer. Never ever design a CSS layout to look right in explorer, and then tweak it to work in other browsers. That is totally the wrong way, as it's generally Internet Explorer which is at fault,and not the other browsers.

Originally Posted by mderbyshire I think I understand what you mean, but i'll just try to clarify... Do you mean you are unable to put a different number of rows in each column, and assign a different height to each of those rows, presumably because each row 'snaps' into place, and then any adjustments made to one row affects the row in the other column? I know for sure I had run into problems like that when I used to use tables more often (now I tend to only use them as per the W3C specifications). As for your question relating to the difficulty of using CSS for layout - the answer is no. Sorry if that sounded rude, but I just wanted to clear up any uncertainty. Designing sites with tables is much harder, in my honest opinion. When I use to create complex table layouts, it used to do my head in so much that I found it hard to create the layout in notepad - I had to use some kind of WYSIWYG editor, even if I was using the code view. Designs/layouts become much more complicated than they need to be when tables are used. CSS might look less straight forward to someone who has only ever used tables, but believe me, if you just spend a coulple of hours tinkering with things, you'll get the hang of it in no time. The hardest part of designig with CSS is not understanding how it's done, but understanding the bugs/problems each browser (usally the likes of Internet Explorer) has in it's interpretation of things. It's easy to create a site that conforms to W3C standards, but a bit harder to make it look/function consistant across all the different browsers (or the most popular ones, at least), even though your site conforms to standards. However, don't let that put you off. The most important thing to do is get your site built using XHTML/CSS (and test it in a decent standards compliant browser - FireFox, Opera, whatever), and once your happy with it, only then begin to tweak things to get it to look right in Internet Explorer. Never ever design a CSS layout to look right in explorer, and then tweak it to work in other browsers. That is totally the wrong way, as it's generally Internet Explorer which is at fault,and not the other browsers.

Now that's the kind of information I wanted to know! I managed to find someone who is capable of coding with div's and he is going to help me get on my way! Thanks alot!

Bye bye tables,
Hello divs!

"Hello divs!"

I hope that he won't code it all with divs, as that usually is totally un semantic, and is just too bad as coding layouts using tables.

"Too many divs! Define local tag attributes

Div Soup it’s called, and it can be avoided. CSS younglings need to make use of loads of divs as they move away from tabular layouts, and that is a great step up from bloated code. But think: is your CSS lean and mean yet? If this was Donkey Kong you’d only be on level 3 or something (bad analogy). Look at some of the other tags you are using in your markup. I’m talking paragraphs, lists, images and other common tags, and using these as hooks for styles depending on where they appear in your layout.

For example, you want to float a thumbnail image to the right of some text. You have decided to wrap it with a div called “image-float”, which makes it float to the right, and keeps it a few pixels away from the text whilst also giving it a nice 1px border. That’s fine, but instead of wrapping your image with that div, just make the actual img tag work a bit harder.

If your thumbnail images appear in your “news” column (div id="news"), this gives you the opportunity to style those images in the CSS itself - no divs required. Instead of creating a class called “image_float”, define the img tag in your CSS like so:

#news img {
float: right;
margin: 5px 0 5px 5px;
border: 1px solid #CCC;
}

If you are repeating that thumbnail for five, six or ten news blurbs on that page, you’ll be saving yourself five, six or ten opening div statements, and an equal number of div closures. This is good, and I like it.
Spare more divs! Use combinations

Don’t forget that CSS lets you combine classes in one div statement. This is massively under-used, and is a brilliant way to shrink code, whilst also allowing huge amounts of flexibility when it comes to further pages:

<div class="header home">My header stuff</div>

See the two styles separated by a space? Nice that, isn’t it. You could have all the margin, padding and width properties for your header in “header”, and append the relevant background image using “home” for the home page, “news” for your news page” or “cheese” for your cheese page (Mr. Hicks - he-he!). Another div spared.

Always think, can you shrink that markup a bit more? Read Web Standard Solutions and digest what Cederholm has to say about inheritance. You’ll wipe out half your divs after just a few chapters. "

from: http://www.collylogic.com/?/comments...s_be_selected/

wow great! thanks alot! If I could add reputation points here, you'd have most of em Im learning it now from this guy and as soon as I get to know the basics I will check out some of the Web Standard Solutions and Cederholm, thanks alot!

Don’t forget that CSS lets you combine classes in one div statement. This is massively under-used, and is a brilliant way to shrink code, whilst also allowing huge amounts of flexibility when it comes to further pages: <div class="header home">My header stuff</div> See the two styles separated by a space? Nice that, isn’t it. You could have all the margin, padding and width properties for your header in “header”, and append the relevant background image using “home” for the home page, “news” for your news page” or “cheese” for your cheese page (Mr. Hicks - he-he!). Another div spared.

Thanks for that tip Alex, I never knew that

all table rows have to be the same height as their column counterparts. IE left row is 200x hight, right has to be 200px in height.

Originally Posted by dereklapp all table rows have to be the same height as their column counterparts. IE left row is 200x hight, right has to be 200px in height.

yeah that was what the problem was, and wasn't to fix, only if I nested another table inside a table...