Tables using CSS and XHTML

[Stecyk]

Hi,

I learned my tables knowledge by trolling the internet and finding various examples. I'd like to show my example code to see if I am doing things reasonably right. The good news is that my tables appear the way I want them, so I don't think I am too far off, if at all.

CSS Table Code...
/* KHS Added Table Structure CSS */

table{
border-collapse: collapse;
/* border-left: 2px solid #000; */
border: 2px solid #000;
margin: 2px;
}

caption{
text-align: center;
font-size: 110%;
font-weight: bold;
}

thead tr{
background-color: #A0DCF8;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

tfoot tr{
background-color: #FFFFFF;
}

tfoot td{
text-align: left;
}

thead th{
padding: 0.2em;
white-space: nowrap;
}

tfoot th{
/* font-size: 110%; */
text-align: right;
padding-right: 0.5em;
letter-spacing: 1px;
}

tfoot td{
padding-left: 0.5em;
color: black;
font-size: 100%;
/* font-weight: 600; */
}

tfoot td:hover{
/* background-color: red; */
background-color: #CFD4D9;
/* color: white; */
}

tr{
background-color: #D0EEFC;
}

tr.odd{
background-color: white;
}

th.col{
text-align: center;
}

th.row{
text-align: left;
}

th.alignleft{
text-align: left;
}

th.alignright{
text-align: right;
}

th.aligncenter{
text-align: center;
}

tbody tr:hover{
/* background-color: #FFCCCC; */
background-color: #DAE0E6;
}

td, th{
border: 1px dotted #CCCCCC;
}

td {
text-align: right;
}

td.alignright{
text-align: right;
}

td.alignleft{
text-align: left;
}

td.aligncenter{
text-align: center;
}

td.alignleft-sub{
text-align: left;
padding-left: 20px;
}

td.alignright-sub{
text-align: right;
padding-left: 20px;
}

tbody td
{
padding: 0.2em;
}

You can see an example table in my post here:
http://www.speciousargument.com/blog/archives/2007/10/alberta_royalty_review_part_eleven_undiscounted.php

Here's an example of my table code in that post above...
<table summary="Example of Oil Decline Rates">
<caption>Well Production With Given Decline Rates</caption>
<thead>
<tr>
<th class="col" scope="col">&nbsp;</th>
<th class="col" scope="col" colspan="4">Daily Production in Barrels</th>
</tr>
<tr>
<th class="col" scope="col">Year</th>
<th class="col" scope="col">3%</th>
<th class="col" scope="col">5%</th>
<th class="col" scope="col">7%</th>
<th class="col" scope="col">10%</th>
</tr>
</thead>

<tfoot>
<tr>
<th class="aligncenter" scope="row">Source:</th>
<td colspan="4">Kevin H. Stecyk</td>
</tr>
</tfoot>

<tbody>
<tr class="odd">
<th class="aligncenter" scope="row">1</th>
<td class="alignright">1000</td>
<td class="alignright">1000</td>
<td class="alignright">1000</td>
<td class="alignright">1000</td>
</tr>

<tr>
<th class="aligncenter" scope="row">2</th>
<td class="alignright">970</td>
<td class="alignright">950</td>
<td class="alignright">900</td>
<td class="alignright">850</td>
</tr>

...blah blah blah...
</table>

My code above is better formatted with proper indentation. Not sure why it doesn't show properly.

Are there any glaring errors? My concern is most focused on the alignment of the cells. But I think I am okay.

Best regards,
Kevin

[kennylucius]

Looks fine in Safari. Here's my two cents worth:

The first th can be rowspan=2 so that "Year" is not on the second row.

You can include more that one class for a tag, e.g., <td class="alignleft sub">. That way, you need define only one sub style that can be used in conjunction with others.

BTW, what's with the hairdo in the photo of the pretty girl. It's cute, but looks like a mousse accident.

[Stecyk]

Looks fine in Safari. Here's my two cents worth:

The first th can be rowspan=2 so that "Year" is not on the second row.

I am okay with "Year" on the second row. I put a blank space in the first row so that Year would be on the second row. But I should experiment so that I know this trick for the future.

You can include more that one class for a tag, e.g., <td class="alignleft sub">. That way, you need define only one sub style that can be used in conjunction with others.

So in your example, both "alignleft" and "sub" are both classes? I quickly reviewed my code and I think I am just using one class per line. Did I miss something? That would not surprise me.

As far as the hairdo, I don't do hair, so I can't provide any insight.

Thank you for your help so far.

[kennylucius]

I meant that you can replace the definition of alignleft-sub and alignright-sub with one definition:

td.sub{
padding-left: 20px;
}

and add it to the class preceded by a space:

<td class="alignleft sub">
<td class="alignright sub">
<td class="aligncenter sub">


The browser will apply both styles. There is no need to do it that way, but it is sometimes convenient to mix the styles in the tag rather than pre-defining every combination of styles in the CSS file. The state of the row (primary or subordinate) seems to be an excellent use of this feature.

Removing the border above "Year" will have the same effect as a rowspan-ed cell. It will make the headings a tiny-bit clearer. Disclosure: I'm a professional desktop publisher and prone to nitpick. That said, I would like to see the whole table centered.

Okay, okay...I'm done. Red pencil down!

[Stecyk]

Hi,

Ahhh....I think you spotted a glitch.

I currently have

td.alignleft-sub{
text-align: left;
padding-left: 20px;
}

td.alignright-sub{
text-align: right;
padding-left: 20px;
}

It should be

td.alignleft-sub{
text-align: left;
padding-left: 20px;
}

td.alignright-sub{
text-align: right;
padding-right: 20px;
}

That would change your comments, I think. That said, I still learned that I can have two classes together simply by providing a space between the names.

Removing the border above "Year" will have the same effect as a rowspan-ed cell. It will make the headings a tiny-bit clearer. Disclosure: I'm a professional desktop publisher and prone to nitpick. That said, I would like to see the whole table centered.

Agree with both your comments about border around year and having the table centered. Any helpful hints?

Best regards,
Kevin

[phppete]

On the structure below I would not have a class attribute on each th tag, instead I would do something like (scroll to second markup block :

<tbody>
<tr class="odd">
<th class="aligncenter" scope="row">1</th>
<td class="alignright">1000</td>
<td class="alignright">1000</td>
<td class="alignright">1000</td>
<td class="alignright">1000</td>
</tr>

<tr>
<th class="aligncenter" scope="row">2</th>
<td class="alignright">970</td>
<td class="alignright">950</td>
<td class="alignright">900</td>
<td class="alignright">850</td>
</tr>

<tbody>
<tr class="odd tdr thc">
<th scope="row">1</th>
<td>1000</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
</tr>

<tr class="tdr thc">
<th scope="row">2</th>
<td>970</td>
<td>950</td>
<td>900</td>
<td>850</td>
</tr>

so my class tdr would be:


.tdr td {
text-align:right;
}
.thc th {
text-align:center;
}


That helps to reduce the bloat in the markup, then if at some point you actually wanted the td cells left align you don't need to change the markup, just change those two style rules. If you didn't know, but you may do, you can have multiple classes like this class="myclass1 myclass2 myclass3" and so on.

[Stecyk]

Hi,

Thank you. Yes, that is more compact.

The question I struggle with is that I already have tables in various blog posts. If I start changing to a more compact system, I would then have to go back and rewrite my tables. That might not be such a bad thing. I should see if I can easily scan my articles to see which have tables and which do not. Actually, I did scan my articles and I don't have that many tables to fix. So I think it is a worthwhile exercise to clean up my CSS and my tables. While I am not going to do it immediately, I am going to do it soon.

Thank you for your helpful advice.

Best regards,
Kevin