Tables, XHTML Strict and CSS

[DarkScythe]

Hello,

I'm trying to see if I can get this table formatted in such a way so that it passes XHTML strict. Currently, my doctype is set to transitional, but I'd like to keep it as close to strict as I possibly can, and it was validating as strict, until I decided to add tables.

I'm not using the tables for layout though, I'm using it to display a bunch of thumbnails and figured that classified as tabular data. I thought about using a div, but that probably would've been more complicated than this.

Anyway, test page is again: http://www.darkscythe.com/DoTtest2.html
By popular request, I've decided to continue with this layout, as DoTtest.html original was not very popular. Anyway, in order to center the table, I had to use align="center" in the table tag, but this is apparently not allowed in XHTML strict. Setting the table's class to margin: 0 auto; did not seem to center it, and I'm not sure why. It also seems cellpadding and cellspacing are not valid CSS attributes either.

Currently, this is my table code:
<table class="thumbtable" cellpadding="0" cellspacing="0" border="0" align="center">

I've already assigned it a class, which is this:
.thumbtable {
padding: 0px;
margin: 0px auto;
clear: both;
}

Any ideas?

Thanks in advance.

[mmurph211]

Try this:


.thumbtable {
margin: 0px auto;
padding: 0px;
border: none;
border-spacing: 0px 0px;
border-collapse: collapse;
width: auto;
}


Matt M
www.matts411.com

[smyhre]

Unless the table has a set width margin: 0px auto won't work

[eloquentBohemia]

Why not do this, which will validate XHTML Strict:

<ul class="thumbtable">
<li><a href="thumbs/Test1.jpg"><img src="thumbs/Test1-th.jpg" alt="#" /></a></li>
<li><a href="thumbs/Test2.jpg"><img src="thumbs/Test2-th.jpg" alt="#" /></a></li>
<li><a href="thumbs/Test3.jpg"><img src="thumbs/Test3-th.jpg" alt="#" /></a></li>
</ul>
<ul class="thumbtable">
<li><a href="thumbs/Test4.jpg"><img src="thumbs/Test4-th.jpg" alt="#" /></a></li>
<li><a href="thumbs/Test5.jpg"><img src="thumbs/Test5-th.jpg" alt="#" /></a></li>
<li><a href="thumbs/Test6.jpg"><img src="thumbs/Test6-th.jpg" alt="#" /></a></li>
</ul>

with this CSS

.thumbtable
{
width:6oopx;
list-style:none;
clear:both;
}

.thumbtable li
{
display:block;
float:left;
width:200px;
height:150px;
}

If it isn't centered because it isn't as wide as the column, add margin:0 auto; to the thumbtable only.

You could style margins between the thumbtables and each thumbtable li if you wanted.

Also add width and height to each of your images. This is a must whether Strict or not.

[DarkScythe]

Thanks for all the responses guys!
smyhre hit the nail right on the head, I can't believe I missed that.
The table is going to be 600px wide no matter what is in it, but the height will vary. I didn't know you could define the width of a table in CSS, but it seems to work. I was able to get rid of align="center" and still keep the tables centered.

However, my tables still have cellpadding="0" cellspacing="0" and border="0" defined.. is there any way I can import these into CSS so that I only need to define the class? mmurph211 - I'm not entirely sure what border-spacing and border-collapse do.. I suppose border: none would be equivalent to the border="0" though.

eloquentBohemia, thanks again for the help.
Certainly an approach that never crossed my mind, but I'm not sure if that would work out as well, since that may interfere with my lists elsewhere. A table seems like the cleanest method of doing this, I think. What would the advantages of presenting it as a list be?

Also thanks for the reminder about width/height on images. I made it very quickly last night, so I forgot to put them there.

[Declan1991]

A single ul with the CSS .thumbtable
{
width:6oopx;
list-style:none;
clear:both;
}

.thumbtable li
{
display:block;
float:left;
width:200px;
height:150px;
}would be most semantically correct. It's a list of pictures isn't it?

[DarkScythe]

Yes it's a bunch of pictures, I never thought about it as a "list" of pictures though.

Wouldn't that be dependent on the width and height specified in the CSS?
As I said, these thumbnails will not all be the same exact size. Modifying the lists to hold the new values would work OK if I were hard coding it manually, but it will probably be pulled automatically from a CMS. I just thought have a "container" such as a table would be the easiest way to define something like that.

[smyhre]

I haven't really done many tables in xhtml and css, so Im not sure if you can get rid of the cellpadding and such from the code and place it in the css only. Though I have done things like calendars and such in only css defined unordered lists. Not sure if it would work for what you want though.

[mmurph211]

border-collapse: Sets whether the table borders are collapsed into a single border or detached as in standard HTML

border-spacng: Sets the distance that separates cell borders (only for the "separated borders" model)

Check this out for more info: http://www.w3schools.com/css/css_reference.asp#table

Setting those 2 styles in your CSS file should take care of the cellpadding="0" and cellspacing="0" attributes

[felgall]

You can specify the cellpadding and such in the stylesheet.

See http://www.felgall.com/csref12.htm for a list of the table specific styles and what they do.

You can also easily set margin and padding on all the <td> and <th> elements in your table with a single command in the stylesheet that references those tags.

[DarkScythe]

Perfect - Thanks guys!

Tables now only need to be defined the class and the rest is done automatically. I'm not sure if I needed border-spacing since I have border-collapse, but I'll leave it there set to 0px just in case I make any changes later on.

I'll also keep the tip with using unordered lists in mind as an alternative to fall back to if I run into any problems.

[Declan1991]

Wouldn't that be dependent on the width and height specified in the CSS?
As I said, these thumbnails will not all be the same exact size. Modifying the lists to hold the new values would work OK if I were hard coding it manually, but it will probably be pulled automatically from a CMS. I just thought have a "container" such as a table would be the easiest way to define something like that.
I've never tested it, but as long as you don't exceed the width (i.e. have images whose total width is greater than the ul width) the
.thumbtable
{
width:6oopx;
list-style:none;
clear:both;
}

.thumbtable li
{
display:block;
float:left;
}
should divide them into two rows. If you need the images centered in the container, you'd do something like this
.thumbtable
{
width:6oopx;
list-style:none;
clear:both;
}

.thumbtable li
{
display:block;
float:left;
width:33%; /* 1/3 of the ul width for three in a row */
}
.thumbtable img {
margin:0 auto; /* Center image */
}
It's actually easier to maintain than a table, because if you remove or add an image, it'll start a new row or not automatically.

[DarkScythe]

That's an interesting point. I'll see if I can play around with it some time tonight. Thanks for the suggestions and code snippets. If it can really automatically add rows, that might be good. Does it require another ul though? or can I just have a single ul width 600 and then just however many li's and it will automatically put them together properly?

[Declan1991]

Yes, it'll automatically overflow the lis onto the next row for you.<ul id="listofimages">
<li><div>Pretend I'm an image</div></li>
<li><div>Pretend I'm an image</div></li>
<li><div>Pretend I'm an image</div></li>
<li><div>Pretend I'm an image</div></li>
<li><div>Pretend I'm an image</div></li>
<li><div>Pretend I'm an image</div></li>
</ul>#listofimages {
width:600px;
}
#listofimages li {
display:block;
float:left;
width:33%;
}
There's only one problem with it, the ul has no defined height because all of it's elements are floated, so if you try to apply a background to the ul, it won't work.

[eloquentBohemia]

There's only one problem with it, the ul has no defined height because all of it's elements are floated, so if you try to apply a background to the ul, it won't work.
Possibly, he could use the .clearfix (http://www.positioniseverything.net/easyclearing.html) to have the background on the ul?