P's In Or Around Tables

He has: 173 posts

Joined: Nov 2002

Hello. Just needing a little help with putting the paragraph () tag in or around tables (due to using p {blah blah;} up in the CSS).

I'm thinking that one of the examples below is the right way to do it, but I'm not 100% sure (which is what I want to be) which one it is.

Here's the 2 possible examples (assume there's a p{color: #000033;} up in the CSS):

Example 1:

(text goes here)

Example 2:

(text goes here)

This may be a rather silly question, but I just want to
confirm which is the RIGHT way (assuming one of the above examples is right) to use and . . . I don't want to end up making a lot of pages (while attempting to keep up with XHTML standards of course Smiling), then end up with all the 's and 's in the wrong place and have to redo them all, if you know what I mean.
Thanks. Smiling

nicora's picture

He has: 267 posts

Joined: Nov 2001

Someone may have actually looked up the correct answer, but it seems to me that niether way is right or wrong.

In XHTML, tables are used strictly for tabular data, and there should be no need for paragraphs in them. In the same token, HTML 4, tables are an easy way to structure your layout.

If you want to be XHTML compliant, I would not put p-tags in table cells, but rather use a class which will impute the same attributes. And wrap a p-tag around the table if need be.

(text goes here)

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Whoa, there is certainly a right answer!

are block-level elements, as are . However, you cannot put inside a . Inside another table, or inside a or yes, nothing else.

can go inside any other block level element except itself (you cannot nest paragraph elements).

You can use inside a if you wish, however it's often redundant for data tables. If you're using tables for layout, however, it's going to be necessary.

When in doubt, http://validator.w3.org will help you.

To sum up, no inline elements can contain a block level element, and can only be in or . can be inside any other block level element, but cannot be nested in another .

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Also, better coding:

table.thistable td { color: #003;}

<table class="thistable">
    <tr>
        <td>(text goes here)</td>
    </tr>
</table>
'

Or you can use ID if it's a unique table -- same thing in the CSS, only table#thistable instead of table.thistable.

nicora's picture

He has: 267 posts

Joined: Nov 2001

Thanks for clarifying Suzanne!

Hopefully I wasn't too confusing... I just know that I never use p-tags in or around tables =)

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Actually, I can make it simpler -- no block level elements can be nested inside a paragraph element. Period. Inline elements only, such as span, strong, em, and img.

nicora's picture

He has: 267 posts

Joined: Nov 2001

Since we are already on the subject, I started a design concept, using XHTML Strict. It validates, but is it really done right?

http://www.seemecreate.com/archive/v3/

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

All the would be better dealt with by using margins or padding on the divs.

Nesting divs isn't usually necessary for thinks like your links -- a styled list is better for semantic reasons and uses less code.

Inline styles are not ideal -- pull them into global stylesheets.

and such won't render in older browsers, is that intended?

nicora's picture

He has: 267 posts

Joined: Nov 2001

Actually no, that was not intended. I stopped optimizing many sites for older browser (mainly my personal sites) because it is not worth the hassle. I have been tracking my site for 2 1/2 months and have had only a couple of 4+ browsers. If there was a way to keep it viewable for old browsers, I would certainly do it. But since I am not going to use that design anyways I suppose it doesn't matter. But thanks for taking a look Suzanne, when I do re-design, I'll be back here asking for your opinion again. =)

He has: 173 posts

Joined: Nov 2002

Thank you both. I had actually done some experimenting to try and figure out what seemed to work earlier, but I just wanted to know for sure (a good experiment doesn't mean a correct experiment). Smiling

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.