CSS table

[Jim Scott]

Most of my pages have a table with a picture, a link-button(CSS) and some
text; sometimes 2x2 sometimes 3rowsx2cols. It would be nice to have the
basic template in a stylesheet, but I looked at the tutorials and it looked
verry complicated for what it does.
Anyone recommend a site with perhaps a template/sample stylesheet for this?
TIA

 

[Andy Dingley]

Anyone recommend a site with perhaps a template/sample stylesheet for this?

Not entirely what you're after, but one of the few "template sites"
I've seen recently that was worth looking at
http://www.benmeadowcroft.com/webdev/csstemplates/prosandcons1.html

CSS-design doesn't really need "templates". The idea is that the
content and presentation are _separated_, which also allows you to
refer to the same "presentation controller" (CSS stylesheet) from many
places, without needing to duplicate it on each page.

Of course there's still some need for templating, because you must
still mark the content up sensibly, and with appropriate use of the
class/id selectors. But this is very much simpler than for a
table-based layout. Often you can simply keep it in your head (for
stylesheets by a single designer) because _all_ of them work with the
same content markup; a <div class="body=text" > in the middle, etc.

Another advantage of the CSS approach is that these selectors are
bound to the content, not the presentation. So "nav-menu" with one
stylesheet might be entirely different with one stylesheet rather than
the other. This is the CSS Zen Garden approach (take a look)

 

[Jim Scott]

CSS-design doesn't really need "templates".

Sorry My jargon is not up to scratch yet.
I suppose I meant sample scripts.

 

[Andy Dingley]

Sorry My jargon is not up to scratch yet.
I suppose I meant sample scripts.

No, "templates" is fine.

Before CSS, you _really_ needed templates. With CSS you can recycle
the existing file (because it's separate) and the thing you author
yourself becomes so simple that close guidance is no longer so
necessary.

 

[Jim Scott]

Before CSS, you _really_ needed templates. With CSS you can recycle

the existing file (because it's separate) and the thing you author
yourself becomes so simple that close guidance is no longer so
necessary.

I know what it is and I use one Toby posted. Although I understand what it
does, I could not have produced it. I find the learning curve very steep
and I am, by nature, impatient. ?

 

[William Hamby]

Most of my pages have a table with a picture, a link-button(CSS) and some
text; sometimes 2x2 sometimes 3rowsx2cols. It would be nice to have the
basic template in a stylesheet, but I looked at the tutorials and it looked
verry complicated for what it does.
Anyone recommend a site with perhaps a template/sample stylesheet for this?
TIA

Tables are for tabular data.

 

[Jim Scott]

Tables are for tabular data.

But they make nice placeholders if you don't know how to do that otherwise.
Which really is my question, how do I find out how to get/make a stylesheet
to do what my tables do.

 

[William Hamby]

But they make nice placeholders if you don't know how to do that otherwise.
Which really is my question, how do I find out how to get/make a stylesheet
to do what my tables do.

Actually, they do NOT make nice placeholders since they are NOT
supposed to be used for anything but tabular data. It's like using a
tricycle to commute back and worth to work just because it's cheaper
than driving a car, only you'll get a ticket for playing in traffic.

To answer your question (thank you for asking it, btw), simply go to
www.w3.org or the CSS vault and learn away. If you have any questions,
don't hesitate to ask me. I'll help in any way I can.

 

[Andy Dingley]

It's like using a tricycle to commute back and worth to work just because it's cheaper
than driving a car, only you'll get a ticket for playing in traffic.

Read uk.rec.cycling Several of my neighbours commute 10 miles each
way (Bristol-Bath) on tricycles. I'd do it too, but I'm only a
two-wheeler.

Faster than driving too.

 

[William Hamby]

Read uk.rec.cycling Several of my neighbours commute 10 miles each
way (Bristol-Bath) on tricycles. I'd do it too, but I'm only a
two-wheeler.

Faster than driving too.

LOL

 

[RF Rohrer]

You dont. Replacing table quickly with CSS is not possible cross-browser.
There are still too many browser quirks. Work with what is fast and solid
cross-browser.

 

[Travis Newbury]

Read uk.rec.cycling Several of my neighbours commute 10 miles each
way (Bristol-Bath) on tricycles. I'd do it too, but I'm only a
two-wheeler.
Faster than driving too.

I use to commute from Kinser (Naha) to Foster (just outside of Okinawa
city) and it was a faster commute if II rode my bike.

 

[Jim Scott]

To answer your question (thank you for asking it, btw), simply go to
www.w3.org or the CSS vault and learn away. If you have any questions,
don't hesitate to ask me. I'll help in any way I can.

OK forgetting CSS for now.
How do I do this
http://freespace.virgin.net/mr.jimscott/1993_5.html
without using the table and allowing it to fit in 20% narrower fram and
cross browser?

 

[humbads]

I'd stick with tables for laying out your images. But use CSS classes
to make your life easier. Try this to learn how:

http://www.somacon.com/blog/page41.php

 

[Jim Scott]

I'd stick with tables for laying out your images. But use CSS classes
to make your life easier. Try this to learn how:

http://www.somacon.com/blog/page41.php

Thanks friend.
I've spent a couple of days playing with CSS two and three column layouts
(no tables), but one image only has to be slightly bigger than an allocated
% width and the whole thing goes pear-shaped.

 

[Jim Scott]

Follow-up.
Done that and it works well (well, as well as normal tables did)
Can anyone explain why constructing tables via a stylesheet should be
'better' than using convential HTML?

 

[Spartanicus]

Follow-up.
Done that and it works well (well, as well as normal tables did)
Can anyone explain why constructing tables via a stylesheet should be
'better' than using convential HTML?

Use css to style a table if it still makes sense/works if css is not
enabled, otherwise use html attributes.

Using css to create a page layout only has real benefits if you abandon
using html tables for layout purposes. Adding inline css to a html
layout table as you have done has no real benefits.

Be advised that using a non html table css layout that works in IE
restricts what you can do in terms of complexity of the layout. Css2
makes it easy to replace most complex html table layouts with a css
layout, but IE doesn't support that particular aspect of css2.

Staying within the constraints of IE limits what can be achieved with a
"css layout". For example it's not possible to create layout boxes that
properly contain their content.

You'd do well to forget about css layouts for the moment, and
concentrate on making your pages work in a wider range of viewport
widths, using html to properly structure your pages by using headers,
lists, paragraphs etc., and lastly getting rid of other presentational
html such as font tags.

If after having done that you enjoyed completing that challenge, then
come back to the topic of css layouts.

 

[Jim Scott]

You'd do well to forget about css layouts for the moment, and

concentrate on making your pages work in a wider range of viewport
widths, using html to properly structure your pages by using headers,
lists, paragraphs etc., and lastly getting rid of other presentational
html such as font tags.

Thanks for the help although that last paragraph blinded me with science eg
"wider range of viewport widths". I take it that might mean I should make
it look better in a higher screen resolution as I have only designed it for
800x600?

I am trying very hard to produce a site which in markup compares to a
correctly punctuated sentence. (While of course maintaining my Bellringers
section, where it all started.)

When I used Frontpage I was criticised for 'bloat' and incorrect HTML. I
dumped FP which, incidentally, was by far the simplest way to build a
website.
I rebuilt all my 'million' pages so that each was validated.
I made mistakes along the way, but felt I had got there even learning some
HTML and css (which I had never heard of when I began).
The criticism now arose that 'frames are for data' and that I should not
use them to hold images and buttons in place. Since my site consists
largely of images and buttons, I have to be sure that any advice I follow
is 'better' and not just some pedant's view of heaven.
I had a look at creating the css equivalent of a 2x2 or 3x3 table to fix
the positions of my images in the manner I desire, and although it all
worked well in Firefox, IE beggered it up if a picture was a tad too big.
However then someone kindly chipped in and advised that I should stick with
tables as 'scaffolding' (my term), but set up the basic table in css.
My question here was really "what difference does it make whether the table
is in a stylesheet or purely in the HTML body? It's still a table."
I have all the time in the world to change yet again, but need to be sure
of the course to take.

 

[dorayme]

My question here was really "what difference does it make whether the table
is in a stylesheet or purely in the HTML body? It's still a table."
I have all the time in the world to change yet again, but need to be sure
of the course to take.

Having a separate stylesheet helps to set all the tables of the same type on
your site. Some gains: not having to repeat style info in the html pages(s),
being able to change many things at one go. If the style is unique to some
particular html item on some particular page, probably best to use inline
right there where it acts...

dorayme

 

[humbads]

not just some pedant's view of heaven.

Funny. <flamebait>I'm afraid you'll get a lot of that around
here.</flamebait>

What is a table? It is a collection of data organized by rows and
columns. Since you want your images in rows and columns, it is best to
use a table to hold them. I have the CSS2 programmer's reference, and
it doesn't even have an entry in its index for "columns". CSS doesn't
know anything about rows and columns. Don't use tables where you can
use CSS, but that doesn't mean don't ever use tables. (Example, you
have a list of products and you want there to be a lot of white space
between each list item. Don't use a table with high cell padding, use
the line-height CSS property specified in em units on the LI tag.)

For your two by two tables, put your style definitions in a common file
and reference this file via a link tag in each html page. Then,
specify the class for the 2x2 tables, like this:

CSS:

table.foursquare { width: 100%; }
table.foursquare td { width: 50%; }

psuedo-HTML:
<link rel="stylesheet" type="text/css" href="globalstyles.css">
</head><body>
<table class="foursquare">
<tr><td><img1></td><td><img2></td>
<tr><td><img3></td><td><img4></td>
</table>

Now you can control the look of all the foursquare tables in your whole
website from a single file. That's the main advantage of CSS. Another
major advantage is inheritance, which you can see above in the
"table.foursquare td" style. This says the style applies to all td
elements within a table.foursquare. You save the tedious work of having
to specify a class attribute in each td. Now let your imagination run
wild with the possibilities.