Using <table> not css, for charts

[valarcher]

Hi - to create a multiple-column table (e.g. comparing products) is it only <table><tr><td> in the xhtml and everything else is in the css? I'm looking at http://www.w3schools.com/css/css_table.asp

Problem is that page says Safari doesn't support css tables - "Browser support: M: Mac IE only".

I need to copy my old site with html <table>'s (I mean tables comparing products not the tables used for layout) into my new xhtml/css, but when I copy a <table> over, it freaks the validator out. The moment I copy a full <table> into the xhtml, that lovely green msg at validator turns into the ugly red one.

Is there a URL that teaches how to do multiple-column tables in xhtml/css? w3schools' info is very sparse.

thank you - Val

[valarcher]

sorry that header should read "using css tables for charts"

[AutisticCuckoo]

It sounds like tabular information, in which case <table> is the way to go.

Here's an example of a table with three columns:

<table>
  <thead>
    <tr>
      <th id="h-name">Name</th>
      <th id="h-age">Age</th>
      <th id="h-hair">Hair Colour</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="h-name">Anne</td>
      <td headers="h-age">26</td>
      <td headers="h-hair">blond</td>
    </tr>
    <tr>
      <td headers="h-name">Beth</td>
      <td headers="h-age">31</td>
      <td headers="h-hair">brown</td>
    </tr>
    <tr>
      <td headers="h-name">Carolyn</td>
      <td headers="h-age">24</td>
      <td headers="h-hair">red</td>
    </tr>
    <tr>
      <td headers="h-name">Diane</td>
      <td headers="h-age">29</td>
      <td headers="h-hair">black</td>
    </tr>
  </tbody>
</table>

[valarcher]

Hi - thank you! Pls can you recommend a good URL that will teach me how to do the css - how to define width of each column, bordercolor, fonts for thead + tbody, etc.

I've searched Paul's (sitepoint's) css reference but can't find a tutorial - e.g. border-color seems to apply only to boxes, I can't find it anywhere for tables.

best, Val

[AutisticCuckoo]

Border properties apply to table objects (tables and cells; and also rows, row groups, columns and column groups in the collapsing borders model).

Defining width for columns is not entirely straightforward. Unless you use the fixed layout algorithm (table-layout:fixed) you only specify minimum widths.

Here's one example of how to specify widths and borders for a 3-column table:

<table id="mytable">
  <col>
  <col class="age">
  <col class="hair">
  <thead>
    ...

#mytable {
  table-layout:fixed;
  width:30em;
  border-collapse:collapse;
}
 
#mytable th, #mytable td {
  border:1px solid #999;
}
 
.age {
  width:2em;
}
 
.hair {
  width:5em;
}

Specifying fonts is no different than for any other element:

#mytable thead {
  font:100% Georgia,serif;
}
 
#mytable tbody {
  font:100% Verdana,sans-serif;
}

[valarcher]

Hi - thank you! This is very helpful. I also found the tutorials -

http://dev.opera.com/articles/view/19-html-tables/
http://dev.opera.com/articles/view/33-styling-tables/
http://www.456bereastreet.com/archiv...on_the_tables/

all the best, Val

[valarcher]

Hi - I can't find in Opera or anywhere how to define column specs. I'm trying to define a column as text-align:left (when th,td is center).

I see above you give -
<table>
<col>
<col class="age">
<thead>

So I tried -
<table>
<col>
<col class="col1">
<thead>
<tr>
<td></td> etc, and

.col1 {text-align: left}

but now I don't know how to tell the html that the first td in every tr is col1.

I know I could do - td.lft {text-align: left}
and - <td class="lft">

But I'd rather define the entire column than every single td in the col.

thanks! - Val

[AutisticCuckoo]

Hi - I can't find in Opera or anywhere how to define column specs. I'm trying to define a column as text-align:left (when th,td is center).

You can't. Only a few CSS properties can be applied to table columns and column groups, and text-align is not one of them.

See Table formatting in the CSS reference for details.

You'll have to assign this class to each cell (td or th) instead of to the col.

[valarcher]

Hi - the electricity keeps on going off in South Africa so I forgot to send this after it came back on yesterday. I read the css ref, thank you! It works well for me, being able to change col-width of first col, then other cols are automatic width.

Table's working beautifully - I think I have it now. Your

<col>
<col class="age">
<col class="hair">
<thead>

really helped me! I didn't see that anywhere on web. Tho' I got a bit confused at validator, so finally I just changed it to <col></col> etc.

Am I correct in thinking I don't need this (for my simple tables where there are no col-groups):

<th id="h-age">Age</th>
<td headers="h-age">26</td>

Instead this is ok -

<th scope="col"></th>

thanks! - Val

[AutisticCuckoo]

Tho' I got a bit confused at validator, so finally I just changed it to <col></col> etc.

The col element doesn't have an end tag in HTML (it's forbidden). If you're using pretend-XHTML, use <col /> instead of <col></col>.

Am I correct in thinking I don't need this (for my simple tables where there are no col-groups):

<th id="h-age">Age</th>
<td headers="h-age">26</td>

Instead this is ok -

<th scope="col"></th>

In theory, yes. In practice, no. This is for accessibility, main for screen readers. But today's screen readers don't support the scope attribute. They need id and headers.

[valarcher]

Hi - thank you for col />.

Is this also only for screen readers?

<th id="h-age">Age</th>
<td headers="h-age">26</td>

If so, I think I'd rather use "scope" trusting that next gen screen readers will recognize it, and meanwhile I can keep code tighter for the many cell phone users who outweigh scr. reader users.

thanks! - Val

[AutisticCuckoo]

Is this also only for screen readers?

What do you mean 'only'? If you're depending on a screen reader to access the Web, there's nothing 'only' about it.

The headers attribute marks up the semantic relationship between a data cell and one or more header cells. Today it's probably mainly beneficial for screen readers, but who knows?

If your table is simple enough (no colspans or rowspans), most screen readers can figure out the relationships anyway. But I see no harm in marking up the relationships explicitly, unless you're in a very big hurry.

[valarcher]

thank you! By "only" I just meant, is there any other purpose for it besides readers? I understand from your answer it's just for readers. I'm not in a hurry but I'm trying to keep my code tight so there's less bytes for mobiles to download. I do have col+row spans but anyway, I think I'll take my chances that screen readers will soon understand "scope."

thanks for the in-depth info!

[AutisticCuckoo]

Scope is not entirely trivial when you mix colspans and rowspans into the equation. I wrote an article about HTML5 tables on Search-This, where I tried to decipher the proposed algorithm for associating header cells with data cells. It's quite complex.

I wouldn't rely on screen reader support for the scope attribute. Especially since screen readers are very expensive and many users simply can't afford to upgrade.