DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 08-06-2007, 12:22 PM   #1
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default CSS & Tables

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.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 08-07-2007, 06:51 AM   #2
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

No one else has any problems with this? Hmm.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 08-07-2007, 07:07 AM   #3
LoisWakeman
Staff
 
LoisWakeman's Avatar
 
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
Default

It looks just fine in Firefox (Win).
LoisWakeman is offline   Reply With Quote
Old 08-07-2007, 07:10 AM   #4
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by LoisWakeman View Post
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.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 08-07-2007, 02:10 PM   #5
Steve Rindsberg
Staff
 
Join Date: Nov 2004
Posts: 6,742
Default

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?

   
__________________
Steve Rindsberg
====================
www.pptfaq.com
www.pptools.com
and stuff
Steve Rindsberg is offline   Reply With Quote
Old 08-07-2007, 04:57 PM   #6
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Steve Rindsberg View Post
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?

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 08-07-2007, 05:34 PM   #7
Steve Rindsberg
Staff
 
Join Date: Nov 2004
Posts: 6,742
Default

Quote:
Originally Posted by ktinkel View Post
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.

   
__________________
Steve Rindsberg
====================
www.pptfaq.com
www.pptools.com
and stuff
Steve Rindsberg is offline   Reply With Quote
Old 08-12-2007, 11:50 PM   #8
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by ktinkel View Post
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?

Quote:
[*]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.

Quote:
[*]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.

Quote:
[*]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.

Quote:
[*]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...

Quote:
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:
HTML Code:
<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...

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 08-13-2007, 07:22 AM   #9
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by iamback View Post
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.

Quote:
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.

Quote:
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?

Quote:
Originally Posted by iamback
Get your structure right first of all. Then style.
I actually started out that way, then got frustrated.

Quote:
Originally Posted by iamback
So, looking at that structure, I come up with the following global structure:
HTML Code:
<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?

Quote:
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.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 08-13-2007, 02:45 PM   #10
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

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?

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
tables + InDesign FlipSide Print Design 9 12-12-2006 06:58 PM
InDesign problem with merged cells in tables iskreto Print Design 7 12-06-2006 09:53 AM
Quark and InDesign tables: Hidden feature? bmann Print Design 4 10-30-2006 12:30 PM
InDesign tables Adrian Print Design 1 10-11-2006 03:54 PM


All times are GMT -8. The time now is 05:30 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.