Defining a table in CSS

[Charles Lavin]

Hi --

I have the following table:

<table border="1" width="100%" cellspacing="5" cellpadding="3"
bgcolor="#EFF5FD" style="border-collapse: collapse; float: left"
bordercolor="#E7F0FC">
<tr>
<td width="62%"><b>COL1</b></td>
<td width="10%" align="center">COL2</td>
<td width="10%" align="center">COL3</td>
<td width="18%" align="right"><b>COL4</b></td>
</tr>
</table>

This table repeats many, many times on a page, with the number of rows in
each table varying.

How much of this table can I define in the stylesheet?

(How) can I specify that there are four columns, the width of these columns,
that columns 1 and 4 are bold, column 1 is left-justified, columns 2-3 are
centered and column 4 is right-justified?

TIA
CL

 

[dorayme]

Hi --

I have the following table:

<table border="1" width="100%" cellspacing="5" cellpadding="3"
bgcolor="#EFF5FD" style="border-collapse: collapse; float: left"
bordercolor="#E7F0FC">
<tr>
<td width="62%"><b>COL1</b></td>
<td width="10%" align="center">COL2</td>
<td width="10%" align="center">COL3</td>
<td width="18%" align="right"><b>COL4</b></td>
</tr>
</table>

This table repeats many, many times on a page, with the number of rows in
each table varying.

How much of this table can I define in the stylesheet?

(How) can I specify that there are four columns, the width of these columns,
that columns 1 and 4 are bold, column 1 is left-justified, columns 2-3 are
centered and column 4 is right-justified?

Apart from some more or less esoteric caveats - I have to be quick
answering you because I can hear JK is coming - you can specify nearly
all of what you are likely to want in CSS.

The number of columns and rows is something that is shown by the HTML
alone. Though quite how they look is determined by CSS (these days at
least)

<table>
<tr>
<td class="product"><b>COL1</b></td>
<td class="weight" align="center">COL2</td>
<td class="volume" align="center">COL3</td>
<td class="price" align="right"><b>COL4</b></td>
</tr>
</table>

CSS might be, depending on what quite you want:

table {width:100%; color: #000; background-color: #EFF5FD;
border-collapse: collapse; float: left; border: 1px solid #E7F0FC}

td {border: 1px solid; padding: 3px;}

..product {width: 62%;}
..weight (width: 10%; text-align: center;}

etc.

Read a good tute on CSS and you will get the hang of it. Just by the
way, it is seldom a good idea to be setting widths for cells. Tables are
clever beasts, it is better to leave it to them as much as possible.

 

[dorayme]

<table>
<tr>
<td class="product"><b>COL1</b></td>
<td class="weight" align="center">COL2</td>
<td class="volume" align="center">COL3</td>
<td class="price" align="right"><b>COL4</b></td>
</tr>
</table>

That should have read:

<table>
<tr>
<td class="product"><b>COL1</b></td>
<td class="weight">COL2</td>
<td class="volume">COL3</td>
<td class="price"><b>COL4</b></td>
</tr>
</table>

I forgot to cut enough out of my paste!

 

[Charles Lavin]

Thanks for the info. I was afraid it would come to that. I was just
wondering if there was some quicker shorthand.

The reason column widths are specified: Yes, tables are clever beasts, and
they can adjust pretty well to the data that's presented. But this page
consists of dozens of separate tables with essentially the same data in
them. There are dozens of tables because they are split by subheaders and
running text and such. If I let each table auto-adjust to its local data,
then every table will look different. And I want the columns to line up from
table to table all the way down the page.

It's because of the number of tables repeating in the page that I want to
move as much of the table design off to the stylesheet ...

Thanks again,
CL

 

[Charles Lavin]

LOL

I didn't notice it. All I needed to see was the 'class=' in the td tag to
figure out where you were headed.

CL

 

[dorayme]

....

(I have transferred your reply to under by reply, best in this newsgroup
to bottom post or at least to quote the relevant bits first to what your
comments are comments on.)

Thanks for the info. I was afraid it would come to that. I was just
wondering if there was some quicker shorthand.

Do you mean a shorthand for avoiding having to class so many cells? Yes,
there is a way, we might have to discuss browser support though but I
will give you one idea:

<http://dorayme.netweaver.com.au/alt/tableClean.html>

....

It's because of the number of tables repeating in the page that I want to
move as much of the table design off to the stylesheet ...

It is always good practice to do this.

 

[richard]

Hi --

I have the following table:

<table border="1" width="100%" cellspacing="5" cellpadding="3"
bgcolor="#EFF5FD" style="border-collapse: collapse; float: left"
bordercolor="#E7F0FC">
<tr>
<td width="62%"><b>COL1</b></td>
<td width="10%" align="center">COL2</td>
<td width="10%" align="center">COL3</td>
<td width="18%" align="right"><b>COL4</b></td>
</tr>
</table>

This table repeats many, many times on a page, with the number of rows in
each table varying.

How much of this table can I define in the stylesheet?

(How) can I specify that there are four columns, the width of these columns,
that columns 1 and 4 are bold, column 1 is left-justified, columns 2-3 are
centered and column 4 is right-justified?

TIA
CL

I would abandon the old IE method of styling as you show for starters.
First, you would assign a "class" to each seperate column.
Col 1 would use text-align:left;
col2 and 3 would use text-align:center;
col4 would use text-align:right.

Widths can be assigned in CSS as well, width:62%.

Where you have that garbage in the <table> tag, all of that should be
defined in the CSS area.

 

[richard]

How do I do that?

You should learn how to do CSS properly from either books or websites.
I suspect you're just trolling with this question.

Inside the <head> of the document you would begin with:

<style type="text/css">

td.column1 {width:50%;}
td.column2 {width:10%;}


</style>


Then in the "body" you would create the table using the following
format:
<td class="column1">data</td>
<td class="column2">data</td>

 

[Andy Dingley]

First, you would assign a "class" to each seperate column.

How do I do that?

 

[Doug Miller]

First, you would assign a "class" to each seperate column.
Col 1 would use text-align:left;
col2 and 3 would use text-align:center;
col4 would use text-align:right.

That'll be a bit difficult, considering that an HTML table consists of rows
and cells -- but not columns.

Please show an example.

 

[Doug Miller]

You should learn how to do CSS properly from either books or websites.
I suspect you're just trolling with this question.

Inside the <head> of the document you would begin with:

<style type="text/css">

td.column1 {width:50%;}
td.column2 {width:10%;}


</style>


Then in the "body" you would create the table using the following
format:
<td class="column1">data</td>
<td class="column2">data</td>

That's assigning classes to separate *cells*, not columns as you previously
said.

 

[richard]

That's assigning classes to separate *cells*, not columns as you previously
said.

The assignment of the classes to each cell within that row pseudo
creates a column. I have done it this way and it works just fine.

 

[Doug Miller]

The assignment of the classes to each cell within that row pseudo
creates a column. I have done it this way and it works just fine.

Yes, of course it works just fine. But it's still assigning classes to cells,
not to columns. The former is possible, the latter is not.

 

[dorayme]

You should learn how to do CSS properly from either books or websites.
I suspect you're just trolling with this question.

You are on to him! Anyway, spambait has given the game away. Don't you
bother to read my suggestions in this thread, Richard, are they so bad?

 

[Jukka K. Korpela]

Yes, of course it works just fine. But it's still assigning classes
to cells, not to columns. The former is possible, the latter is not.

This group would probably be a better place if we all ignored "richard". His
extremely clueless postings don't disturb me, except when someone comments
on them - possibly making a comment I "have to" comment on.

It _is_ possible to assign a class to a column, namely by using a
class="..." attribute in a <col> tag.

It's just of limited usefulness, since most settings of CSS properties for a
column have no effect according to CSS "specs" (though IE deviates from
this, in some modes at least); see
http://www.w3.org/TR/CSS2/tables.html#columns