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.