css 'table' tutorial

S

Sims

Hi,

I want to replace my tables, (<table>), with css.
But I am not familiar with doing it.

I found a few css tutorial with google but none of them seem to touch the
table.

Would a kind soul give me one or two examples on how to create css tables.

Many thanks.

Regards

Sims
 
W

Whitecrest

I want to replace my tables, (<table>), with css.
But I am not familiar with doing it.

<assumption, you are taking about table layout>
First, CSS layout and Table layout are not mutually exclusive. Many
times it is more logical it use one or the other, or even both in
combination with each other to get the desired results.
I found a few css tutorial with google but none of them seem to touch the
table.

Good place to start:
http://glish.com/css/
 
B

Barry Pearson

Sims said:
Hi,
I want to replace my tables, (<table>), with css.

Are you talking about laying out your pages, or presenting
semantically-related data? If you are talking about the latter, stick to
tables. You are unlikely to regret it.
But I am not familiar with doing it.

I found a few css tutorial with google but none of them seem to touch
the table.

Would a kind soul give me one or two examples on how to create css
tables.

If you are talking about laying out your pages using CSS techniques, then it
is probably a bad idea to think in terms of tables while you are doing so.
There is little point in trying to replace one way of building rows & columns
with another. Especially when it is typically harder to do so using CSS.

It would better to re-think what sort of layouts you want to achieve, then use
whatever technique is appropriate. A good CSS-based page layout isn't just
table-layout done another way. It may well not be oriented in rows & columns.
It may behave differently. It may exploit images (for backgrounds, or buttons,
or whatever) in very different ways. It may do things that can't easily, if
all, be done with tables.

"Using tables for layout", and "using CSS", and "using CSS techniques for
layout", are not mutually exclusive. (Indeed, you should *always* use CSS,
whether you are using layout tables or not). You can mix-n-match. You may have
a largely CSS-based layout with a simple table within it for a few elements.
Or have an extremely simple layout table with everything in it handled by CSS.
(But be careful of absolute-positioning within tables). And you can use CSS to
re-position parts of a table!

I won't go further until I understand what you are really talking about.
 
S

Sims

I won't go further until I understand what you are really talking about.

Sorry, my mistake, I should have gone into more details.

I saw in a few articles claiming something along the lines that a good html
programmer would not use tables but instead use css.
I am fairly familiar with tables, (<table><td><tr>), but I do not know how
to achieve the same result using css, by that I mean getting rid of the
common html tags, (<table><td><tr>).

And looking at some of the pages given by you and others it looks likes the
tags never really go away. So css in not a replacement for tables but rather
a better way of doing things.
The idea of using css in the tables is to remove all the styles, things like
width="100%" and so on.

Is my assumption right?

Sims
 
K

Karl Groves

Sims said:
Sorry, my mistake, I should have gone into more details.

I saw in a few articles claiming something along the lines that a good html
programmer would not use tables but instead use css.

I think it is important to clarify something ahead of time.
A "good html programmer" will use HTML for its intended purpose: to define
the *structure* of a document.
A simple example: some people will use <b> to create bold text that is
really a heading, and therefore should be using one of the <hx> elements
(replace "x" with the appropriate level of heading)

So, a "good html programmer" will use a table when presenting tabular data.

So, HTML is for the structure of the document. CSS is to be used to define
the presentation. This includes, in all reasonable instances, the physical
layout of the document.
I am fairly familiar with tables, (<table><td><tr>), but I do not know how
to achieve the same result using css, by that I mean getting rid of the
common html tags, (<table><td><tr>).

The first step is learning HTML enough to understand how things work on a
web page. A CSS-based layout requires a fundamentally different approach,
especially if you're a talented graphic artists.

A lot of the proselytizing about CSS by people on this NG is done by those
with extremely bland sites. That's not to say I'm much better, but I think
it is important to recognize that people can beat their chests all day about
CSS when they're basically doing a set of links across the top and a long
scrolling page with some margin and typography. Its entirely different to do
stuff like http://www.csszengarden.com/ Learning to do a great site with
CSS doesn't just happen overnight.

I recommend working on some hybrid stuff for a while. Try doing a
tables-based layout without any presentational attributes in the HTML. Limit
nesting tables, don't use spacers, none of that.

Then, work your way up to the full Monty.

-Karl
 
B

Barry Pearson

Sims said:
Sorry, my mistake, I should have gone into more details.

I saw in a few articles claiming something along the lines that a
good html programmer would not use tables but instead use css.

Not true. In fact, if you want to layout semantically-related material in rows
& columns, a good HTML programmer *will* use tables.

What those articles may have said is that you should use never use tables for
page-layout purposes. That is a strongly-held opinion of a vocal but tiny
minority of the web authors in the world. Whether you obey them is up to you -
identify the consequences each way, then make up your own mind. You are the
one who has to live with the consequences, not them.
I am fairly familiar with tables, (<table><td><tr>), but I do not
know how to achieve the same result using css, by that I mean getting
rid of the common html tags, (<table><td><tr>).

Once again - are you talking about page-layout or the layout of
semantically-related data? For the latter - you are better off sticking to
tables. For the former - make up your own mind.
And looking at some of the pages given by you and others it looks
likes the tags never really go away. So css in not a replacement for
tables but rather a better way of doing things.

No. For laying out semantically-related data in rows & columns, it is a worse
way of doing things.

For page-layout, it varies from one case to another. It varies with design
concept, audience, and author's skill level. And, sometimes, using a mixture
of both approaches is easier.
The idea of using css in the tables is to remove all the styles,
things like width="100%" and so on.

I agree that, if you decide to use tables, it is generally better to style
them with CSS rather than HTML-attributes. If you want your pages to lay-out
in a similar way even if the user doesn't use CSS, there are one or two
attributes you may still want to use, such as "valign". And you may want to
use "colspan" and "rowspan". And there are some others for semanticaly-related
rows & columns that you may want to use, such as "headers" & "scope".
Is my assumption right?

You still need to identify whether you are using tables for
semantically-related rows & columns, or page-layout. Much depends on that.
 
N

Neal

I agree that, if you decide to use tables, it is generally better to
style
them with CSS rather than HTML-attributes.

The one attribute I regularly use in the table element is border, as
otherwise the table can be hard to read when CSS is not being applied.
 
S

Sims

Not true. In fact, if you want to layout semantically-related material in rows
& columns, a good HTML programmer *will* use tables.

Ok, i see.
What those articles may have said is that you should use never use tables for
page-layout purposes. That is a strongly-held opinion of a vocal but tiny
minority of the web authors in the world. Whether you obey them is up to you -
identify the consequences each way, then make up your own mind. You are the
one who has to live with the consequences, not them.

I think you are right, I was misunderstanding the articles for saying that
_all_ tables should be replaced by css
Once again - are you talking about page-layout or the layout of
semantically-related data? For the latter - you are better off sticking to
tables. For the former - make up your own mind.

I am using tables for both data and page layout.
So I guess that technically my use of the tables is not wrong,(the html is
valid but used in the wrong way), but I need to re-write my page-layout to
use css.
I agree that, if you decide to use tables, it is generally better to style
them with CSS rather than HTML-attributes. If you want your pages to lay-out
in a similar way even if the user doesn't use CSS, there are one or two
attributes you may still want to use, such as "valign". And you may want to
use "colspan" and "rowspan". And there are some others for semanticaly-related
rows & columns that you may want to use, such as "headers" & "scope".

So to summarize, where I am going wrong is that I am using table for page
layout.
*as a general rules* tables should only be used to display data, not the
page.
You still need to identify whether you are using tables for
semantically-related rows & columns, or page-layout. Much depends on that.

I am guilty of using tables for page-layout so I guess I need to move away
from that ,(bad?), habit.
I will use an example of one of my typical page.

<table>
<tr><td colspan='3'>Menu</td></tr>
<tr>
<td width='25%'>Left menu</td>
<td width='50%'>Main body</td>
<td width='25%'>Right menu</td>
<td></td>
</tr>
</table>

That's the way I would do a page, but now I want to move away from this and
do it properly.
This is where I am assuming I need to learn .css
And this is where my original question needs to be re-asked, 'where can I
find a .css tutorial on page layout?'.

But that also begs the question, if the code above is valid html, why would
css be better, (for page layout)?

Many thanks for your replies.

Sims
 
S

Sims

Hi,
So, HTML is for the structure of the document. CSS is to be used to define
the presentation. This includes, in all reasonable instances, the physical
layout of the document.

This is essentially where I am going wrong as I am using tables for the
layout of my page.
The first step is learning HTML enough to understand how things work on a
web page. A CSS-based layout requires a fundamentally different approach,
especially if you're a talented graphic artists.

I guess my understanding of HTML was limited to 'as long as you follow the
rule what you are doing is correct'.
That includes using tables for page layout.
A lot of the proselytizing about CSS by people on this NG is done by those
with extremely bland sites. That's not to say I'm much better, but I think
it is important to recognize that people can beat their chests all day about
CSS when they're basically doing a set of links across the top and a long
scrolling page with some margin and typography. Its entirely different to do
stuff like http://www.csszengarden.com/ Learning to do a great site with
CSS doesn't just happen overnight.

Again I agree, and that is why I was asking for a tutorial.
I now realize that my question was too vague.
What I really I need something to get me started on page layout.
I recommend working on some hybrid stuff for a while. Try doing a
tables-based layout without any presentational attributes in the HTML. Limit
nesting tables, don't use spacers, none of that.

Then, work your way up to the full Monty.

-Karl

Many thanks

Sims
 
N

Neal

This is essentially where I am going wrong as I am using tables for the
layout of my page.

Question: Is it wrong to use tables for page layout?

Answer: Define "wrong."

I advocate using CSS for page layout whenever possible. However, there may
be times when you are between a rock and a hard place, and you have to
resort to table layout. Examples: A client requests a design which cannot
be accomplished in CSS (or, you don't know how to accomplish it in CSS); a
page must be prepared in a very brief time and you're more comfortable
with tables than CSS.
 
B

Big Bill

Ok, i see.


I think you are right, I was misunderstanding the articles for saying that
_all_ tables should be replaced by css


I am using tables for both data and page layout.
So I guess that technically my use of the tables is not wrong,(the html is
valid but used in the wrong way), but I need to re-write my page-layout to
use css.


So to summarize, where I am going wrong is that I am using table for page
layout.
*as a general rules* tables should only be used to display data, not the
page.


I am guilty of using tables for page-layout so I guess I need to move away
from that ,(bad?), habit.
I will use an example of one of my typical page.

<table>
<tr><td colspan='3'>Menu</td></tr>
<tr>
<td width='25%'>Left menu</td>
<td width='50%'>Main body</td>
<td width='25%'>Right menu</td>
<td></td>
</tr>
</table>

That's the way I would do a page, but now I want to move away from this and
do it properly.
This is where I am assuming I need to learn .css
And this is where my original question needs to be re-asked, 'where can I
find a .css tutorial on page layout?'.

But that also begs the question, if the code above is valid html, why would
css be better, (for page layout)?

Me, I dunno because I don't really understand it myself, but one place
CSS is really useful is if you've got something like
<font face="arial, verdana, helvetica, sans-serif" size="2"><b>text
here</b></font>
repeated loads of times in your site as you can replace all that (bar
the included text itself of course) with <p class="p1">text here</p>
once you've defined what the class is and put that definition in an
external file (or an internal one but that bloats the file size). You
can cut way, way down on server use and download times just doing
something basic like that. So it's worth having a crack at.

BB
 
B

Barry Pearson

Sims said:
Barry Pearson wrote ...
Not true. In fact, if you want to layout semantically-related [snip]
Once again - are you talking about page-layout or the layout of
semantically-related data? For the latter - you are better off
sticking to tables. For the former - make up your own mind.

I am using tables for both data and page layout.
So I guess that technically my use of the tables is not wrong,(the
html is valid but used in the wrong way), but I need to re-write my
page-layout to use css.

Why? Will this make your websites more successful?
So to summarize, where I am going wrong is that I am using table for
page layout.
*as a general rules* tables should only be used to display data, not
the page.

No. If you want to layout semantically-related information in rows & columns,
use tables, and you will probably never regret it. Tables are super for laying
out information in rows & columns.

If you are talking about page-layout, then use tables, or CSS techniques, or
combinations of these, as appropriate. It is your choice, because you bear the
consequences. Perhaps 99% of pages on the web use table-layout, so you can be
certain that it works & that you are in good company. But there are
alternatives, that may suit you better. (I use one or the other or both, or
sometimes no special layout technique at all, as appropriate).

[snip]
I am guilty of using tables for page-layout so I guess I need to move
away from that ,(bad?), habit.

No. It's only mark-up, it isn't sin! For sematically-related rows & columns,
yoiu will almost certainly be better off if you use tables. For anything else,
make up your mind according to the consequences. It isn't a bad habit to use
tables for page-layout. It is simply an option, used by vast numbers of
successful professional web authors world-wide.
I will use an example of one of my typical page.
<table>
<tr><td colspan='3'>Menu</td></tr>
<tr>
<td width='25%'>Left menu</td>
<td width='50%'>Main body</td>
<td width='25%'>Right menu</td>
<td></td>
</tr>
</table>
That's the way I would do a page, but now I want to move away from
this and do it properly.

Who is to say that this isn't doing things properly? What problems has it
caused you? What audience have you lost? Has it cost you extra effort? What is
your method of judging whether it is proper or not? Have you simply been told,
by someone who isn't going to bear the consequences of what you do?

That is a plausible layout table (except for that 4th column which appears to
be redundant). But now start to use CSS as well, instead of "width".

Here are 3 pages that all use *exactly* the same layout table, not very
different from that one. They all use CSS instead of things like "width"
attributes (which is deprecated in td). Have a look at what can be done with a
combination of tables & CSS. (They are only for fun! I'm not really suggesting
that you do exactly this). The aim is to show some of the things that can be
done by combinations of tables & CSS positioning.

http://www.barry.pearson.name/articles/table_pages/exhibit04.htm

http://www.barry.pearson.name/articles/table_pages/exhibit05.htm

http://www.barry.pearson.name/articles/table_pages/exhibit07.htm

[snip]
But that also begs the question, if the code above is valid html, why
would css be better, (for page layout)?

The aim of a website is to communicate with the audience. Judge the techniques
you use according to that. Are you communicating? At acceptable cost, risk,
and time? Will you continue to do so in future? Tables & CSS are simply means
to that end.

The overwhelming majority of authors, including professional authors, use
layout tables. The overwhelming majority of pages on the web, including just
about all the most commercially-successful ones, use table-layout. Some of the
best brains at authoring use tableless-layouts. But are they more commercially
successful as a result? And what could those same brains output if they
decided to use table-layout instead?

I choose which technique to use, or which mixture, on a case by case basis.
But I think I take too many risks with my tableless-layouts, (they sometimes
blow apart in browser, & on systems, that I haven't been able to test on). And
if they were commercial pages I might play a bit safer, and use simple tables
instead.
 
W

Whitecrest

This is essentially where I am going wrong as I am using tables for the
layout of my page.

Using tables for layout is not "wrong". Use what works best for the
situation. Sometimes it is tables, sometimes it is css, sometimes it is
a combination of both.
 
R

Richard

Sims said:
I want to replace my tables, (<table>), with css.
But I am not familiar with doing it.
I found a few css tutorial with google but none of them seem to touch the
table.
Would a kind soul give me one or two examples on how to create css
tables.
Many thanks.

Sims

For a short introduction to creating layout with css look here.
www.1-large-world.com/samples/sample1.html
View the source code for information.

Bascially, a "div" is equivelant to a table cell.. With more flexibility per
DIV than a table cell.
One must understand that in this group certain users are under the
impression that the mentioning of tables is fair game to assault the poster.
IMHO, the group name is alt.html and tables are a part of html like them or
not.
 
L

Leif K-Brooks

Neal said:
I advocate using CSS for page layout whenever possible. However, there
may be times when you are between a rock and a hard place, and you have
to resort to table layout. Examples: A client requests a design which
cannot be accomplished in CSS (or, you don't know how to accomplish it
in CSS); a page must be prepared in a very brief time and you're more
comfortable with tables than CSS.

Virtually any layout which can be created using tables can be created
using CSS. If you don't know how to do it right, tell you client to find
a more competent web designer.

However, there are legitimate uses for table layouts. If a lot of your
visitors will be using ancient browsers, like Netscape 4.x, you may need
to do evil things to keep a pretty layout for them.
 
W

Whitecrest

Try here for any number of good examples.
http://nemesis1.f2o.org/templates.php

Nice examples, but the big problem with most CSS design in general (and
almost all the examples on that page) Is that the layout falls apart in
a smaller window.

http://www.benmeadowcroft.com/webdev/csstemplates/3-column.html Try it
and see. Which is why, if the design or layout matters to your site.
Then use what ever combination of CSS and tables it takes to make it
right. One or the other alone might not work. And one size NEVER fits
all.
 
B

Barry Pearson

Neal wrote:
[snip]
I advocate using CSS for page layout whenever possible. However,
there may be times when you are between a rock and a hard place, and
you have to resort to table layout. Examples: A client requests a
design which cannot be accomplished in CSS (or, you don't know how to
accomplish it in CSS); a page must be prepared in a very brief time
and you're more comfortable with tables than CSS.

I have just posted this to the macromedia.dreamweaver newsgroup (which is on
its own server):

A bit of philosophy, from Bill Murray in Groundhog Day. "Well maybe the real
God uses tricks. Maybe he's not omnipotent; he's just been around so long he
knows everything". That appears to be the main trick to using CSS. Be around
long enough, using it, learning the tricks, until you can start to appear
omnipotent!

I have found that there are 2 very different types of
learning involved. One type is to become very familiar with the key concepts.
"Selectors & pattern-matching". "The cascade". "The box model". (Etc). You
can't avoid those.

The other type is that, every time I try a new thing (for example, roll-over
links based on lists, or controlling tables using CSS), it takes me a lot
longer than I expected. This is partly because the application of the basic
concepts isn't always obvious. But, far more often, it is because the
browser-designers didn't read the same specification that I read! And even if
they did, they took advantage of all the flexibility built into the formatting
model, so they all do it with different defaults, etc.

This latter requires the steady build-up of your "portfolio" of techniques to
overcome each of these. You can sometimes build this up from newsgroups &
websites. Sometimes, you just have to work it out for yourself. And the day
after you have done so, you are able to answer someone else's question on the
topic, as though you are omnipotent!

In the meantime, if you are in a hurry, and the design appears to need things
that are not in your portfolio, you may be better off using just enough
table-layout to overcome your problem. It may simply be (say) a 2-column 1-row
table with everything controlled by CSS. (I have even used 1-row 1-column
tables for specific purposes). Knowledge of
CSS-positioning improves your table-layout too.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,835
Latest member
KetoRushACVBuy

Latest Threads

Top