CSS & Tables

[ktinkel]

I ran across an old-fashioned inline HTML-type table (scroll down to the table) on the web and decided that I needed to figure out how to control tables with CSS.

I wanted to create a liquid page with a table controlled by CSS. I uploaded my first attempt.

It took quite a while — I kept running into seemingly unsolveable problems:

• Each of the subheads (“Type of stitches,” etc.) should have its own row. But I couldn’t do it within the table. I tried colspan but it didn’t work properly, or at least not as I would have expected: it left out the dividers across the line but added three little boxes to the right end of the row, outside the table. Ugly.
  .
• Then I tried making separate tables, breaking before each of the subtitles (which I marked H2 and styled). But then I had several individual tables, and their columns didn’t match up. Ugh again.
  .
• So I ended up adding the subhds as part of the first TD line, using BR to force the second part of the line down. That worked, sort of, but the subhds were too close to the first line below and I couldn’t figure out how to add space between the two lines. So I changed the line-height. Kind of a kludge, but it works visually in my browsers.
  .
• I tried using list for the entries down the side, but couldn’t figure out how to do that and the table and its columns as well. Is that the right approach, though?
  .
• I tried using border-collapse: collapse to minimize the boxiness. I really wanted to eliminate the box around the the whole table (just retain horizontals and interior verticals) but couldn’t figure out how to do that either (border: none was simply ignored).

But it sort of works. Anyone know better ways?

P.S. — The thing validates as XHTML 1.0 Strict.

[ktinkel]

No one else has any problems with this? Hmm.

[LoisWakeman]

It looks just fine in Firefox (Win).

[ktinkel]

Originally Posted by LoisWakeman

It looks just fine in Firefox (Win).

Thanks. It looks okay in everything I tried, too, but I wanted to do something else (as I note in the text), and cannot figure that out for the life of me. Most (all?) of it — colspan, for example — could have been done with inline HTML as in the old days.

I fear I have just done something stupid.

[Steve Rindsberg]

Hm. Could you remove the table's borders then create your own by styling the individual cells with borders as required? Or would that leave little gaps between one cell and the next?

[ktinkel]

Originally Posted by Steve Rindsberg

Hm. Could you remove the table's borders then create your own by styling the individual cells with borders as required? Or would that leave little gaps between one cell and the next?

I tried that. It ignored me.

I could obviously use the background-color as the border color (or at least I think I can), but that would be sort of bogus, don’t you think?

[Steve Rindsberg]

Originally Posted by ktinkel

I tried that. It ignored me.

I could obviously use the background-color as the border color (or at least I think I can), but that would be sort of bogus, don’t you think?

Kludgy at best, I have to agree.

[iamback]

Originally Posted by ktinkel

I ran across an old-fashioned inline HTML-type table (scroll down to the table) on the web and decided that I needed to figure out how to control tables with CSS.

I wanted to create a liquid page with a table controlled by CSS. I uploaded my first attempt.

It took quite a while — I kept running into seemingly unsolveable problems:

[*]Each of the subheads (“Type of stitches,” etc.) should have its own row. But I couldn’t do it within the table. I tried colspan but it didn’t work properly, or at least not as I would have expected: it left out the dividers across the line but added three little boxes to the right end of the row, outside the table. Ugly.

Yes, the subheads should have their own row - what was the problem with that?

[*]Then I tried making separate tables, breaking before each of the subtitles (which I marked H2 and styled). But then I had several individual tables, and their columns didn’t match up. Ugh again.

Unless you set precise pixel sizes for the column widths, each table will do its own sizing - so they won't match up. If you want "fluid" (avoiding precise pixel sizes) you can't do that - you need a single table.

[*]So I ended up adding the subhds as part of the first TD line, using BR to force the second part of the line down. That worked, sort of, but the subhds were too close to the first line below and I couldn’t figure out how to add space between the two lines. So I changed the line-height. Kind of a kludge, but it works visually in my browsers.

It doesn't work structurally though. In fact, it doesn't even work for me visually, because that bit of bold text sits within a box with some text so clearly it applies only to that bit of text.

[*]I tried using list for the entries down the side, but couldn’t figure out how to do that and the table and its columns as well. Is that the right approach, though?

Wrong approach. Your data clearly is tabular data, so it needs to be marked up as such.

[*]I tried using border-collapse: collapse to minimize the boxiness. I really wanted to eliminate the box around the the whole table (just retain horizontals and interior verticals) but couldn’t figure out how to do that either (border: none was simply ignored).

No. it's not ignored. Border-collapse ensures there's no space between cells, and if cells are given a border, the border is collapsed with that of an adjacent cell if that has a border. Border on the table is what goes around the whole thing. Try making it a different color, or a different width and you'll see it's still there - but if you use border-collapse and have borders on each cell and have a border round the table at the same width and color as those for the cells, you just can't see it...

But it sort of works. Anyone know better ways?

Get your structure right first of all. Then style.

The general structure of your table has actually lost some of the structure that was there in the original - for instance there are four main sections: and (unnamed) general (brand/model), features, additional features, and dealer information - each should have its own subhead; then there's a header (naming the columns) and a footer (for the totals - where you even have lost the columns!). So, looking at that structure, I come up with the following global structure:

<table>
<caption>name your table here</caption>
<thead>your column headings go here</thead>
<tfoot>for the totals</tfoot>
<tbody>general</tbody>
<tbody>features</tbody>
<tbody>additional features</tbody>
<tbody>dealer information</tbody>
</table>

Then start to fill in the details.

It is actually rather a complicated table, so it's not easy to do correct markup (and have it accessible as well) but it's certainly possible. But don't even do any styling until you've got the structure right - because the styling should support the structure, not fake a structure that isn't there in your markup.

BTW, why are you leaving a space at the end of cell content? It will only make styling harder...

[ktinkel]

Originally Posted by iamback

Yes, the subheads should have their own row - what was the problem with that?

The colspan="4" cleared the space within the table all right but placed three small little columns at the end of the row, outside the general table boundaries, eating up some of the table’s width.

Originally Posted by iamback

Unless you set precise pixel sizes for the column widths, each table will do its own sizing - so they won't match up. If you want "fluid" (avoiding precise pixel sizes) you can't do that - you need a single table.

Yep, figured that out, which — combined with problem 1 above — led to the kludged subheads.

Originally Posted by iamback

No. it's not ignored. Border-collapse ensures there's no space between cells, and if cells are given a border, the border is collapsed with that of an adjacent cell if that has a border. Border on the table is what goes around the whole thing. Try making it a different color, or a different width and you'll see it's still there - but if you use border-collapse and have borders on each cell and have a border round the table at the same width and color as those for the cells, you just can't see it...

Is there any way to have no border around the whole table?

Originally Posted by iamback

Get your structure right first of all. Then style.

I actually started out that way, then got frustrated.

Originally Posted by iamback

So, looking at that structure, I come up with the following global structure:

<table>
<caption>name your table here</caption>
<thead>your column headings go here</thead>
<tfoot>for the totals</tfoot>
<tbody>general</tbody>
<tbody>features</tbody>
<tbody>additional features</tbody>
<tbody>dealer information</tbody>
</table>

Then start to fill in the details.

Thanks for that. Why do you place the tfoot before the items that logically precede it?

Originally Posted by iamback

BTW, why are you leaving a space at the end of cell content? It will only make styling harder...

Beats me. Just to make it easier to read, I guess. I will change it, see what happens.

Appreciate your help. I knew I had taken a wrong direction when I started playing around with the subheads.

[ktinkel]

I think I figured out how to apply your advice, and have a second version.

I cannot figure out where the extra td> that appears at the top of the page is hanging out.

And I wanted to have all the entries except <th> items be indented, but the darned thing ignored me when I added “text-indent: 1em;” to <td> (so I didn’t try “text-indent: none;” for <th>).

Is there a secret?