using tables in a css document

Good day,

I`ve got two pages on my site (Questions Answered, and the french translation Questions, Réponses- same prob) that don`t validate because I`m not using proper coding for tables. I`m using h4 to keep them inline, but I know that`s not right. Can someone explain the correct way to code the tables so they`ll stay inline, and validate?

http://pyxnet.ath.cx/robin

I don't understand what you mean by "keeping them inline". A heading tag (your h4) is a block level element that, by default, does nothing different than the table element, except for some padding/margins. So, without the <h4></h4>, what is wrong with the layout?

Ok, before I added the <h4></h4>, the tables would appear completely out of place, on the right above the sidebar. When I added the h tags, the tables appeared where they were supposed to be- in the main content. I`m sure this is not the way this is supposed to be done.

Also, the pages don`t validate because of something wrong with the tables` coding- I assumed it to be the h tags being used incorrectly. I`ll go try removing the h tags again, just to check...

Thanks herkalees

Ok, same result- the tables go completely haywire.

Btw, what is wrong with this? <h4><table width="60%" border="0">

Apparently what does not validate is in that line.(xhtml)

A table in a heading probably gives the "block element in inline element" error I'd imagine, can you post what the validator says?

Could try something like :

table { float: left }

in your CSS. I'd have to try it to make sure it works.

That will take it out of the document flow, becareful, your results might be even more whacky.

Thanks herkalees and drd,

Here are the validator`s results:

1. Error Line 41 column 48: document type does not allow element "table" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. <h4><table width="60%" border="0"> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
   One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
   
   ✉
2. Error Line 89 column 49: document type does not allow element "table" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. <h4><table width="61%" border="0">

I don`t think I forgot to close an element, so does that mean I should put each table (there are two) in a container of sorts, like what is mentioned? Or could I be missing something in my css?

Has nothing to do with missing closing tags, it is saying that a table element cannot be within a header. It may work, but it's against the W3C rules.

yeah its bad practice. You need to find another way of positioning your table. Its hard to say from here, but if you set the margins and width in the css the table should reside within your content div without problems.
If you still have trouble then can you show us what happens?

The float left suggestion worked- my pages all validate now, in fact my whole site now validates. Woohoo!

Thanks drd and herkalees

Now I just need to make a decent banner. And then take a looksee at it in ie- I`m frightened!

glad to hear it worked, and good luck with IE!

Thanks drd

I`ll be making a new post shortly- I`ll need help with the IE issues. Argh...