Tables - how to centre data in a table

[Digmen1]

Hi Guys

I have set up a table of data.

In one column I would like to center my data.

In another column I would like to indent the text a little bit.

Any suggestions?

Thanks

Regards

Digby

[penders]

According to the spec [w3.org] you should be able to style columns using the COL HTML element and some CSS:

HTML:

<table> 
<colgroup> 
<col class="date"> 
<col class="description"> 
<col class="change"> 
<col class="quantity"> 
</colgroup> 
<thead> 
<tr><th>Date</th><th>Description</th><th>Change</th><th>Quantity</th></tr> 
</thead> 
<tfoot> 
<tr><th>Date</th><th>Description</th><th>Change</th><th>Quantity</th></tr> 
</tfoot> 
<tbody> 
<tr><td>23/1/2007</td><td>Ray gun</td><td>Down</td><td>1323</td></tr> 
<tr><td>12/2/2007</td><td>Toy car</td><td>Down</td><td>529</td></tr> 
<tr><td>19/2/2007</td><td>Frisbee</td><td>Up</td><td>890</td></tr> 
<tr><td>2/3/2007</td><td>Scrapbook</td><td>Down</td><td>120</td></tr> 
<tr><td>17/3/2007</td><td>PSP</td><td>Up</td><td>120987</td></tr> 
</tbody> 
</table>

CSS:

.date { 
text-align:right; 
} 
.description { 
text-indent:20px; 
text-align:left; 
padding-right:20px; 
} 
.change { 
text-align:center; 
width:60px; 
} 
.quantity { 
text-align:right; 
width:120px; 
background-color:#ffa; 
}

However, this only seems to be fully(?) supported in IE (tested IE6). FF2 and Op9 do support this technique, but they only seem to honour certain styles.

width

and

background-color

work OK in FF2 and Op9, but text-align, text-indent (which is what you're after) and padding appear to be ignored (may be I'm missing something?!). In IE6, however, the above example works as expected.

The ALIGN attribute on the COL element seems to work OK in Op9, but not FF2 - besides it doesn't really separate the style from your content.

So, to get this working cross-browser I guess you need to apply a class to every TD in the column you wish to align or indent!?

If you have many rows you could think about using JS to grab the class from each COL element and applying the same class to each TD element in that column - at least that way unsupported browsers are catered for with the minimum of effort.

Is there another way?

[Xapti]

Text-indent is not supported by IE 6 I think?
Just use padding-left instead of text-indent. Text indent only works for the first line, so if you have a cell which has more than one line of content, it won't indent the subsequent lines.

I would think that opera and FF support the code, so something's up?
maybe it's because the following can be used, instead of CSS, so they decided to not support CSS?

cellpadding
align

For align, you can try adding the specific attribute,, but for the padding, I don't know... you would have to use CSS, since it's only for one side.

[edited by: Xapti at 8:50 pm (utc) on Sep. 14, 2007]

[penders]

Text-indent is not supported by IE 6 I think?

It is supported by IE6. AFAIK text-indent is supported by IE as far back as IE4. Yes, it indents just the first line, by design.

I would think that opera and FF support the code, so something's up?

Yes, I was a surprised/dismayed. I've tried it on FF1.5 and FF2 on two different machines. The COL attribute is supported, but only with certain (limited) styles.

maybe it's because the following can be used, instead of CSS, so they decided to not support CSS?

cellpadding
align

Well, not really. cellpadding controls the padding on every td, for which you can control using CSS. And even the ALIGN attribute on the COL element does not work in FF. It only works on the individual TD elements, and if you're going to do that you can set td{text-align:right} in the CSS.

The problem is setting the style of an entire column.

If you have many rows you could think about using JS to grab the class from each COL element and applying the same class to each TD element in that column - at least that way unsupported browsers are catered for with the minimum of effort.

The following works on the above example, but with certain restrictions as to table layout (as mentioned in the source). However, if anyone can demonstrate the proper HTML only cross-browser alternative I'd be appreciative.

JavaScript:

// For each TABLE in the document, copy the class from each COL element to each corresponding TD 
// Assume 1 COL element for every column (span not supported) and each COL has a class attribute 
// Assume each TD/TH does not span more than 1 column 
// Assume either all TH's or all TD's in a TR, not a mixture of both 
function styleCols() { 
var t,cols,trs,tr,tds,td; 
var tbls = document.getElementsByTagName('table'); 
for (t=0; t<tbls.length; t++) { 
// Get all the COL elements for this table 
cols = tbls[t].getElementsByTagName('col'); 
// Step through all the rows in the table 
trs = tbls[t].getElementsByTagName('tr'); 
for (tr=0; tr<trs.length; tr++) { 
// Row might have TH or TD (but not both) 
tds = trs[tr].getElementsByTagName('td'); 
if (tds.length == 0) { 
// No TD's, try and get TH's instead 
tds = trs[tr].getElementsByTagName('th'); 
} 
// Step through TD's (ie. Columns) and copy class from COL elements 
for (td=0; td<tds.length; td++) { 
tds[td].className += ' ' + cols[td].className; 
} 
} 
} 
}

Call from the windows.onload event.

[Digmen1]

Thanks guys for all your iunput and help.

I did not realise it would be so hard!

As a newbie to even HTML and XHMTL and CSS, I find it very strange that the different browsers are so incompatible. You would think they would put more effort into following WC3 standards.

Kind Regards

Digby

[Marshall]

Digby,

First, did you validate your page: HTML [validator.w3.org] and CSS [jigsaw.w3.org].

Also, I noticed you mentioned XHTML. Are you using a XHTML doctype? If so, why? It may be beneficial for you to read the thread on selecting the proper doctype [webmasterworld.com]. A lot of people have been quick to use or change over to a XHTML doctype, but most of those should not. XHTML is intended to be used with XML data and is not the next evolution of HTML doctypes. In short, do not waste your time trying to conform to something you do not need.

Marshall

[edited by: Marshall at 9:44 am (utc) on Sep. 17, 2007]

[penders]

penders: However, this only seems to be fully(?) supported in IE (tested IE6). FF2 and Op9 do support this technique, but they only seem to honour certain styles.

width

and

background-color

work OK in FF2 and Op9, but

text-align

,

text-indent

and

padding

appear to be ignored (may be I'm missing something?!). In IE6, however, the above example works as expected.

Digmen1: I find it very strange that the different browsers are so incompatible. You would think they would put more effort into following WC3 standards.

With a bit more reading it appears that FF is actually following the spec, and what IE6 provides is 'extra'!

The W3C spec [w3.org] states that the following CSS properties apply to COL and COLGROUP elements:

border, background, width,

and

visibility

. That's quite limiting IMO.

Also note that the

border

property only applies when

border-collapse:collapse

is set on the table element, which IE6 does not support!

Putting the COL element to one side, I think most will choose to manually apply a class to every TD in a column, in order to style that 'column'.