Column width in a CSS table

[Cogito]

I am trying to incorporate a css table into a page without much
success.
I have copied a css table from somewhere and I use it as a prototype.
There are however, a zillion attributes in the copied .css file and
I'm not quite sure what does what.
(does css actually saves work?)
In particular, I can't figure out what determines the width of each
column.
My copied table looks good, but the table I created (after hours of
work) has enormously wide columns.
How can I control it?

And, if you happen to have a good (and not too complicated) example of
a css table it would be of great help.

 

[Spartanicus]

I am trying to incorporate a css table into a page without much
success.

You are aware that IE doesn't support css tables I hope?

In particular, I can't figure out what determines the width of each
column.

Controlling the width is similar to html tables.

My copied table looks good, but the table I created (after hours of
work) has enormously wide columns.

A url would have helped.

And, if you happen to have a good (and not too complicated) example of
a css table it would be of great help.

http://homepage.ntlworld.com/spartanicus/css-table.htm

This leaves out the possible confusing aspect of anonymous table objects
( http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes )

 

[Jim Scott]

You are aware that IE doesn't support css tables I hope?

What nonsense. My entire site is made from css tables.

 

[Spartanicus]

What nonsense. My entire site is made from css tables.

Apparently you don't know what css tables are (many people don't). Have
a look at the example I provided with IE and then with a proper browser.

 

[Jim Scott]

And, if you happen to have a good (and not too complicated) example of

a css table it would be of great help.

Here you are.
It's not mine but was recommended here.
Use TopStyle Lite to edit it.

table.sample {
width: 100%;
height: 100%;
border-width: 0px 0px 0px 0px;
border-spacing: 0px 0px;
border-style: none none none none;
border-color: gray gray gray gray;
border-collapse: separate;
background-color: transparent;
text-align: center;
font-size: small;
font-weight: bold;

}
table.sample th {
border-width: 0px 0px 0px 0px;
padding: 5px 5px 5px 5px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: transparent;
-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
border-width: 0px 0px 0px 0px;
padding: 5px 5px 5px 5px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: transparent;
-moz-border-radius: 0px 0px 0px 0px;

 

[Barbara de Zoete]

Here you are.
It's not mine but was recommended here.

Come again? Never! Not for the use OP asks for.

Use TopStyle Lite to edit it.

table.sample {
width: 100%;
height: 100%;

<snip useless info>

Not as a CSS-table. This is merely some CSS to make a table look like you want
it to look, in some modern graphical browsers.

Try reading and understanding
<http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display> and
<http://www.w3.org/TR/CSS2/tables.html#q2>. Look for any display property value
with 'table' in it. Then compare it with
<http://www.w3.org/TR/CSS2/tables.html#q1>. It's easy to spot the difference,
but that doesn't make it less difficult to understand appearently.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Steve Pugh]

What nonsense. My entire site is made from css tables.

If you mean the site in your sig -
http://freespace.virgin.net/mr.jimscott/ - that doesn't use a single
CSS table. It uses HTML tables. Read the CSS spec to see what everyone
else is talking about.

Steve

 

[Jim Scott]

If you mean the site in your sig -
http://freespace.virgin.net/mr.jimscott/ - that doesn't use a single
CSS table. It uses HTML tables. Read the CSS spec to see what everyone
else is talking about.

Steve

So how come I use table.css to get them there?

 

[Cogito]

A url would have helped.

Here is my example:
http://users.bigpond.net.au/blackbox/a9/dailydose.html

In IE it looks like it is intended to, except that the table is way
too big. In FF, the grey background is only on the sides. Without the
table it forms a thin line at the top, as intended.
The file table.css is the one that I have copied and modified.

 

[Cogito]

Here you are.
It's not mine but was recommended here.
Use TopStyle Lite to edit it.

table.sample {
width: 100%;
height: 100%;
border-width: 0px 0px 0px 0px;
border-spacing: 0px 0px;
border-style: none none none none;
border-color: gray gray gray gray;
border-collapse: separate;
background-color: transparent;
text-align: center;
font-size: small;
font-weight: bold;

}
table.sample th {
border-width: 0px 0px 0px 0px;
padding: 5px 5px 5px 5px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: transparent;
-moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
border-width: 0px 0px 0px 0px;
padding: 5px 5px 5px 5px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: transparent;
-moz-border-radius: 0px 0px 0px 0px;

This does not seem to work.
I need a complete working example to understand how it all fits
together.

 

[Barbara de Zoete]

So how come I use table.css to get them there?

Like I pointed out to you in my message
<http://groups.google.com/groups?selm=opsrfzgjtvx5vgts@zoete_b>:

<quote>
Try reading and understanding
<http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display>
and <http://www.w3.org/TR/CSS2/tables.html#q2>. Look for any display
property value with 'table' in it. Then compare it with
<http://www.w3.org/TR/CSS2/tables.html#q1>. It's easy to spot the
difference, but that doesn't make it less difficult to understand
appearently.
</quote>

And stop making a fool of yourself.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Spartanicus]

[About CSS tables]

Here is my example:
http://users.bigpond.net.au/blackbox/a9/dailydose.html

Like Jim Scott you too are using the wrong terminology, what you have
there is *not* a CSS table, but an HTML table styled with CSS.

When you post an example it's rather rude to expect us to first correct
your errors to see if there's a relation to the issue that you are
experiencing, so you need to make sure your code validates. Your html
doesn't:
http://validator.w3.org/check?uri=http://users.bigpond.net.au/blackbox/a9/dailydose.html

In IE it looks like it is intended to, except that the table is way
too big. In FF, the grey background is only on the sides. Without the
table it forms a thin line at the top, as intended.

The margin specified on #pagecontainer seems to throw IE.

The file table.css is the one that I have copied and modified.

Copying and pasting someone else's css without a proper understanding of
the language is bound to cause problems both for you as the "author" and
the user. Learn the language first, then write your own code.

 

[Cogito]

[About CSS tables]

Here is my example:
http://users.bigpond.net.au/blackbox/a9/dailydose.html

Like Jim Scott you too are using the wrong terminology, what you have
there is *not* a CSS table, but an HTML table styled with CSS.

When you post an example it's rather rude to expect us to first correct
your errors to see if there's a relation to the issue that you are
experiencing, so you need to make sure your code validates. Your html
doesn't:
http://validator.w3.org/check?uri=http://users.bigpond.net.au/blackbox/a9/dailydose.html

In IE it looks like it is intended to, except that the table is way
too big. In FF, the grey background is only on the sides. Without the
table it forms a thin line at the top, as intended.

The margin specified on #pagecontainer seems to throw IE.

The file table.css is the one that I have copied and modified.

Copying and pasting someone else's css without a proper understanding of
the language is bound to cause problems both for you as the "author" and
the user. Learn the language first, then write your own code.

First you ask me to provide a link to my table than you tell me it's
rude to expect…
I'm not even aware of what this code validator is or does. All I
wanted is to get a nicer looking table using css. As you could see,
all I need is a simple 2 column table. If that is asking too much I
can live with a simpler html table.

 

[Steve Pugh]

So how come I use table.css to get them there?

Because you decided to call one of your stylesheets table.css. The
styles in table.css style your HTML tables, they do not create any CSS
tables - do you see any display: table; or similar styles in there? I
don't.

Steve

 

[Cogito]

Because you decided to call one of your stylesheets table.css. The
styles in table.css style your HTML tables, they do not create any CSS
tables - do you see any display: table; or similar styles in there? I
don't.

The truth to be said, I have no idea what a css table is.
I have been dabbling with html coding (just for fun) for a while and
occasionally I read this newsgroup. From it, I got the impression that
css id the way to go. Fine. So I copied some code of what I thought
was a css table with a view to teach myself basic css by experimenting
and trying to understand how the code works. If this is not a css
table, can you please show me a simple example of a css table with two
columns and two rows?

 

[Barbara de Zoete]

The truth to be said, I have no idea what a css table is.

Should have read the other posts in this thread too. Than you would have known
by now.

If this is not a css
table, can you please show me a simple example of a css table with two
columns and two rows?

<ul style="display:table;">
<li style="display:table-row;">
<ul>
<li style="display:table-cell;">
length
</li>
<li style="display:table-cell;">
width
</li>
</ul>
</li>
<li style="display:table-row;">
<ul>
<li style="display:table-cell;">
a mile
</li>
<li style="display:table-cell;">
and a half
</li>
</ul>
</li>
</ul>

or perhaps

<div style="display:table;">
<div style="display:table-row;">
<div style="display:table-cell;">
length
</div>
<div style="dispaly:table-cell;">
width
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
a mile
</div>
<div style="dispaly:table-cell;">
and a half
</div>
</div>
</div>

The idea is that you can take anything and make it look like a table.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Toby Inkster]

The truth to be said, I have no idea what a css table is.

http://examples.tobyinkster.co.uk/table-tricks/q

 

[Cogito]

Good news. After some trial and error I solved my problem.

Now, my last two questions are:

1
In my .css file I have:

body#homepage table.archivetable
{
margin-bottom:30px;
width:100%;
border-collapse:collapse;
}

…as well as many other attribute definitions for table.archivetable

in my source .html file I have:

<table class="archivetable">

My question is: If I want to change the width attribute, say to 50%,
do I have to hard code the change in the .css file
or can I leave the .css file with 100% and override it on the <table
class="archivetable"> tag?
If the second option is possible could you please show me the syntax
for it?


2

It seems that there are two ways to include the .css file into the
source

<link rel="StyleSheet" href="table.css" type="text/css" />
and
<style type="text/css" media="all">@import
'table.css';</style>

They both work well. What is the difference between them and which is
the better one to use?