Doing a table in CSS

[James A. Donald]

--
I am just beginning to get into CSS. I like to keep all
my html simple and generic looking.

I want to use a table, because I have, (gasp) tabular
data. I want it to look like a table. Not only that,
but I want it to look like a plain ordinary
uncomplicated vanilla table, to look like everyone
else's table.

Seems to me that the only reasonably easy way to do this
is to declare the style transitional, and use <TABLE >

Is there a better way?

--digsig
James A. Donald
6YeGpsZR+nOTh/cGwvITnSR3Tdzcl VpR0+pr3YYQdkG
I+ZMSazMMSKlfyX +QwvlSFcNl49Faf n5glRFYcFV
4SY3/GBXA3FTNgCjcJdo kwMMCbs5dlavAIp G3504w


--

http://www.jim.com

[mscir]

Re: Doing a table in CSS

James A. Donald wrote:[color=blue]
> --
> I am just beginning to get into CSS. I like to keep all
> my html simple and generic looking.
>
> I want to use a table, because I have, (gasp) tabular
> data. I want it to look like a table. Not only that,
> but I want it to look like a plain ordinary
> uncomplicated vanilla table, to look like everyone
> else's table.
>
> Seems to me that the only reasonably easy way to do this
> is to declare the style transitional, and use <TABLE >
>
> Is there a better way?
>
> --digsig[/color]

Since you have tabular data, I'd go with a table, that's what they're for.

=============== =============

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

CSS-Based Layouts

HTML was never designed to be a layout language. The <table> element was
designed to mark-up tabular data (such as you'd find in a spreadsheet).
CSS (Cascading Style Sheets) was designed for design and presentational
issues - and makes pages easier and faster to code, more manageable,
accessible, and faster to download.

Do not let the term "tableless layouts" fool you, it means exactly what
it says, it does not mean "tableless webpages". You should continue to
use tables for tabular data.

=============== =============

http://webdesign.about.com/od/css/a/aa102102a.htm

....CSS Positioning (CSS-P) is the only way to create standards based Web
pages using XHTML. Why? Because XHTML requires that tables only be used
to define tabular data, and not be used for layout.

=============== =============

http://www.tableless.com.br/en/

What is Tableless?

Tableless isn't a technology, nor a programming language, much less an
application! Tableless is a rather misleading name for a method of
building clean, accessible and standard complaint websites.
Notwithstanding , "tableless" is what best describes the main concept
towards a more accessible web: the abolishing of tables as a means of
designing web sites.

We use CSS to format the information contained in the text markup files
or, if you prefer, (X)HTML files.

Clarifying: We don't use the infamous tables to structure the website.
For this we use exclusively CSS. We didn't get rid of the tables. In the
tableless method, all the tags are used semantially, i.e, each tag has
its own role. If you want to have an italic text, you should use the
<i></i> tag. Want a paragraph? Use <p></p> Got it? So, if you want to
display tabular data , e.g. a list of products with their prices, names,
if it's available in the stock; you should use tables. Therefore, using
tables to display tabular data is right but never use them to layout
structuring.

=============== =============

http://www.dcddesigns.com/folder/website-design-information/page/Tableless-CSS-Driven-Website-Design-Services

Tableless CSS Driven "Fluid" Website Design

So you may be asking "what are tables and why does removing them from my
website help?" Glad you asked! Tables have mistakenly been used for many
years by designers to piece a site's graphic layout back together,
similar to a jigsaw puzzle.

.... Removing tables from non-tabular data will also allow those with
disabilites and image disabled browsers a more meaningful experience
with your website and as more and more non computer devices are able to
access websites your site will be ready to go on them!

[C A Upsdell]

Re: Doing a table in CSS

James A. Donald wrote:[color=blue]
> --
> I am just beginning to get into CSS. I like to keep all
> my html simple and generic looking.
>
> I want to use a table, because I have, (gasp) tabular
> data. I want it to look like a table. Not only that,
> but I want it to look like a plain ordinary
> uncomplicated vanilla table, to look like everyone
> else's table.
>
> Seems to me that the only reasonably easy way to do this
> is to declare the style transitional, and use <TABLE >
>
> Is there a better way?[/color]

Yes, there is a better way. Use strict instead of transitional: TABLE
is not deprecated, just misused.

[Stan Brown]

Re: Doing a table in CSS

On Mon, 30 May 2005 17:02:21 -0700, James A. Donald
<jamesd@echeque .com> wrote:
[color=blue]
>I want to use a table, because I have, (gasp) tabular
>data. I want it to look like a table. Not only that,
>but I want it to look like a plain ordinary
>uncomplicate d vanilla table, to look like everyone
>else's table.
>
>Seems to me that the only reasonably easy way to do this
>is to declare the style transitional, and use <TABLE >
>
>Is there a better way?[/color]

Yes: declare it _strict_, and use a <table>.

The idea that "you mustn't use tables" is an oversimplificat ion. Not
even the most thoroughgoing purist would object to using <table> for
data that are actually tabular by nature. The objection is to using
<table> simply to enforce a layout -- _that_ is what should better
be done with CSS.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA

http://OakRoadSystems.com/

"I feel a wave of morning sickness coming on, and I want to
be standing on your mother's grave when it hits."

[SorbitoL]

Re: Doing a table in CSS

"C A Upsdell" <""cupsdellXXX\ "@-@-@XXXupsdell.com "> escribió en el mensaje
news:V7Odnf78HP jMIwbfRVn-1g@rogers.com.. .[color=blue]
> James A. Donald wrote:[color=green]
>> --
>> I am just beginning to get into CSS. I like to keep all
>> my html simple and generic looking.
>>
>> I want to use a table, because I have, (gasp) tabular
>> data. I want it to look like a table. Not only that,
>> but I want it to look like a plain ordinary
>> uncomplicated vanilla table, to look like everyone
>> else's table.
>>
>> Seems to me that the only reasonably easy way to do this
>> is to declare the style transitional, and use <TABLE >
>>
>> Is there a better way?[/color]
>
> Yes, there is a better way. Use strict instead of transitional: TABLE is
> not deprecated, just misused.[/color]


there's nothing wrong with <table> if you have tabular data.
the use of <table> is not recommended when it comes to
layout design.

[C A Upsdell]

Re: Doing a table in CSS

SorbitoL wrote:[color=blue][color=green]
>>Yes, there is a better way. Use strict instead of transitional: TABLE is
>>not deprecated, just misused.[/color]
>
> there's nothing wrong with <table> if you have tabular data.
> the use of <table> is not recommended when it comes to
> layout design.[/color]

What else did you think I meant?

[James A. Donald]

Re: Doing a table in CSS

C A Upsdell[color=blue]
> Use strict instead of transitional: TABLE
> is not deprecated, just misused.[/color]

When I use "strict" I get the error messages such as
: : Line 46, column 12: there is no attribute "WIDTH"
: : <TD width="47%">

Doubtless there is a CSS equivalent of WIDTH and I should know it, but
I cannot seem to find any examples of tables done under strict. There
is a web page that seems to be about tables done under strict,
http://www.w3.org/TR/REC-CSS2/tables.html but without any examples, I
find the web page mystifying and overwhelming.

That web page tells me there is such a thing as a width property, yet
I get error messages about that property when I use the W3C Markup
Validation Service




--

http://www.jim.com

[Spartanicus]

Re: Doing a table in CSS

James A. Donald <jamesd@echeque .com> wrote:
[color=blue]
>When I use "strict" I get the error messages such as
>: : Line 46, column 12: there is no attribute "WIDTH"
>: : <TD width="47%">
>
>Doubtless there is a CSS equivalent of WIDTH[/color]

Called "width", difficult eh?
[color=blue]
>and I should know it, but
>I cannot seem to find any examples of tables done under strict. There
>is a web page that seems to be about tables done under strict,
>http://www.w3.org/TR/REC-CSS2/tables.html[/color]

That explain the CSS table model, use the HTML spec:

http://www.w3.org/TR/html4/struct/tables.html

[color=blue]
>but without any examples, I
>find the web page mystifying and overwhelming.
>
>That web page tells me there is such a thing as a width property, yet
>I get error messages about that property when I use the W3C Markup
>Validation Service[/color]

The width attribute has been deprecated for table cells, but not for
other elements such as table. Deprecated means that it's not valid under
the Strict DTD. http://www.w3.org/TR/html4/index/attributes.html

The reason why certain seemingly presentational attributes such as
valign are still valid under the Strict DTD is that in certain
situations moving them to css could result in a loss of structure which
can negatively effect the user's ability to interpret the content.

--
Spartanicus

[johnSteve]

Re: Doing a table in CSS

On Tue, 31 May 2005 21:33:14 -0700, James A. Donald
<jamesd@echeque .com> wrote:
[color=blue]
>C A Upsdell[color=green]
>> Use strict instead of transitional: TABLE
>> is not deprecated, just misused.[/color]
>
>When I use "strict" I get the error messages such as
>: : Line 46, column 12: there is no attribute "WIDTH"
>: : <TD width="47%">
>[/color]
they are probably telling you in strict there is no inline style, so
no width inline
try defining width up in the head then move it to separate style
sheet[color=blue]
>Doubtless there is a CSS equivalent of WIDTH and I should know it, but
>I cannot seem to find any examples of tables done under strict. There
>is a web page that seems to be about tables done under strict,
>http://www.w3.org/TR/REC-CSS2/tables.html but without any examples, I
>find the web page mystifying and overwhelming.[/color]

http://www.sturgood.com/dna/result/

in this example I group floating tables inside separate divs. valid
strict html and css.
I define no width on the tables or divs though to allow for
flexibility. For people like me there is finally the ability to
increase the font size to read tabular data.

cheers
johnSteve

[Tony]

Re: Doing a table in CSS

"Spartanicu s" <invalid@invali d.invalid> wrote in message
news:dhmq911dfo cq7ndo0qt2buui8 kbvclnjjb@news. spartanicus.utv internet.ie...[color=blue]
> James A. Donald <jamesd@echeque .com> wrote:
>[color=green]
>>That web page tells me there is such a thing as a width property, yet
>>I get error messages about that property when I use the W3C Markup
>>Validation Service[/color]
>
> The width attribute has been deprecated for table cells, but not for
> other elements such as table. Deprecated means that it's not valid under
> the Strict DTD. http://www.w3.org/TR/html4/index/attributes.html[/color]

That would be in regard to attributes in the manner of <td width="10%">, as
opposed to <td style="width:10 %">, right?

[Spartanicus]

Re: Doing a table in CSS

"Tony" <someone@somewh ere.not> wrote:
[color=blue][color=green]
>> The width attribute has been deprecated for table cells, but not for
>> other elements such as table. Deprecated means that it's not valid under
>> the Strict DTD. http://www.w3.org/TR/html4/index/attributes.html[/color]
>
>That would be in regard to attributes in the manner of <td width="10%">, as
>opposed to <td style="width:10 %">, right?[/color]

Correct. In the latter example "style" is the attribute, "width" is the
property of a css rule, with "10%" as it's value.

Note that using inline css such as in the latter example is rarely good
practice.

--
Spartanicus

[Tony]

Re: Doing a table in CSS

"Spartanicu s" <invalid@invali d.invalid> wrote in message
news:o07s9150lc 9q2lsnls55oj6v5 ftutu2kgt@news. spartanicus.utv internet.ie...[color=blue]
> "Tony" <someone@somewh ere.not> wrote:
>[color=green][color=darkred]
>>> The width attribute has been deprecated for table cells, but not for
>>> other elements such as table. Deprecated means that it's not valid under
>>> the Strict DTD. http://www.w3.org/TR/html4/index/attributes.html[/color]
>>
>>That would be in regard to attributes in the manner of <td width="10%">,
>>as
>>opposed to <td style="width:10 %">, right?[/color]
>
> Correct. In the latter example "style" is the attribute, "width" is the
> property of a css rule, with "10%" as it's value.[/color]

That's what i thought.
[color=blue]
> Note that using inline css such as in the latter example is rarely good
> practice.[/color]

Was mainly doing it to make the difference clear

[James A. Donald]

Re: Doing a table in CSS

James A. Donald[color=blue][color=green]
> >When I use "strict" I get the error messages such as
> >: : Line 46, column 12: there is no attribute "WIDTH"
> >: : <TD width="47%">[/color][/color]

johnSteve[color=blue]
> they are probably telling you in strict there is no inline style, so
> no width inline
> try defining width up in the head then move it to separate style
> sheet[/color]

What I have done is moved the width attribute to a <COL width=47%><COL
width=53%>, inside the <TABLE></TABLE> but above the <TR></TR>

This fixed the problem, works in strict, and seems a lot better than
the old way (since table formatting code should not have to look
ahead)

Obviously the truly correct thing to do is to create a style sheet
with various table styles corresponding to tables with different <COL>
attributes, effectively moving the <COL> attributes to a style sheet.

Not clear to me how to move the <COL> data into a style sheet. Cannot
seem to find any examples.
[color=blue]
> http://www.sturgood.com/dna/result/
> in this example I group floating tables inside separate divs. valid
> strict html and css.
> I define no width on the tables or divs though to allow for
> flexibility. For people like me there is finally the ability to
> increase the font size to read tabular data.[/color]

You have moved your <table> properties into the <STYLE> command and
similarly for your <TD> properties, but no column width properties. I
would expect them to go into a table class.

I attempted to move my now working table attributes into a style
command

<STYLE type=text/css>{
}
TABLE {
BORDER:1; WIDTH:100%;
<COL width="34%"><CO L width="66%">
}
</STYLE>

The parser was happy with it, but the output was total crap. No
borders, and the first table the first column was 66% and the second
34%, and in the next table the other way around

--

http://www.jim.com

[Stan Brown]

Re: Doing a table in CSS

On Wed, 01 Jun 2005 10:56:42 -0600, johnSteve <stevo1@bresnan .net>
wrote:
[color=blue]
>they are probably telling you in strict there is no inline style, so
>no width inline[/color]

Huh? Inline styles are just fine in HTML 4.01 Strict.

For <td> in particular, refer to

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6

and note that core attributes are allowed. Core attributes are
defined at

http://www.w3.org/TR/html401/sgml/dtd.html#coreattrs

and include style.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA

http://OakRoadSystems.com/

"I feel a wave of morning sickness coming on, and I want to
be standing on your mother's grave when it hits."

[dcddesigns]

Re: Doing a table in CSS

Gee Im honored Ive been quoted here (found it in my copyscape) but
everything I said in that article on my site is 100% and if you care at
all about your SE rankings you'll learn tableless layouts and fast! Man
your rankings can go through the roof!

If you want a great place to learn this stuff Im a member of
sitepoint.com ... some of the best CSS gurus in the world over there
will help you work thru the hard times you'll have switching. It sucks
at first but one you learn it you wonder why you ever used tables for
non tabular data!

thanks again for the quote!