About Using Tables

[Punchinello]

I need to create a really, really simple static html file like a beginner might create. It needs to display a collection of data elements in the format Caption: Value where the "Captions" are right-aligned in a column and the "Values" are left-aligned in the next column but not all rows will have the same number of columns. For example:
[tt]
Name: John Smith ID: 59403
Address: 123 Main Street
City: Washington State: DC Zip: 22101
[/tt]
I have used tables with align and that works fine, but is there an alternative (preferred or otherwise) to using tables for aligning data on a row-by-row basis?

 

[LTeeple]

Why wouldn't you want a table for columns and rows?

For those rows that don't have equal amount of columns as other rows, take advantage of the colspan attribute of the <tr> tag.

Otherwise, take a look at css positioning, although unfortunately not all browsers render css properly.


Cheers!
Laura

 

[Punchinello]

Thanks Laura, I'm using the colspan attribute, but I read someone's opinion (don't remember where or who) that tables are clumsy. I'm just fishing for a better way. For example, let's say you have to text values and you want to align the first one on the left and the second one on the right of the same line. Easy with a table:
[tt]
<table>
<tr>
<td width=50% align=left>First Value</td>
<td width=50% align=right>Second Value</td>
</tr>
</table>
[/tt]
But is there a way to do this same thing without the table?

 

[Foamcow]

Punchinello: for tabular data, tables are ideal. It's what they are for. There is no point reinventing the wheel and trying to emulate tables with CSS. Table tags provide a logical and structural method of displaying tabular data. They work perfectly well and are perfectly valid.
In case anyone missed it... tables are great for tabular data!

For your particular problem I would use CSS to define a class for the captions.

Something like...

td.caption {
font-weight:bold;
text-align:right;
}

Then create the table cells like so:

<table>
<tr>
<td class="caption">Name:</td><td>Dave Cyberman</td>

etc...

This means that your (X)HTML is stripped right back to basics and doesn't become "clumsy". The alignment and other styling is handled by the stylesheet. The HTML contains basic HTML tags and your content, nothing else.

 

[petey]

You could use a definition list:

http://www.maxdesign.com.au/presentation/definition/

It has a good section on styling the lists. Also, you may have heard tables are bad for page layout, but they're perfect for making actual tables, so you had the right idea. Generally though you want to have each name on a single table row and use header cells:
[tt]
NAME ADDRESS ID CITY STATE ZIP
John Smith 123 Main Street 59403 Washington DC 22101
Bob Roberts 456 Central Ave 42875 Dallas TX 64758
[/tt]
If you have only one name a definition list is probably better.

http://www.drpeterjones.com/

News and views of some obscure guy

 

[Punchinello]

Thanks foamcow and petey,

I've actually got a css file structured just like foamcow suggests. Great link, petey!

 

[ChrisHunt]

I would use CSS to define a class for the captions

I wouldn't. I'd use <th> tags for the captions/headings and <td> tags for the data, that's what they're for. However, I would use CSS to describe how each of them looked.

I hadn't thought about using a <dl>, though it's certainly a possibility. However, since you said you wanted "a really, really simple static html file like a beginner might create", tables are going to win over CSS positioning every time for me!

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[Foamcow]

I wouldn't. I'd use <th> tags for the captions/headings and <td> tags for the data, that's what they're for. However, I would use CSS to describe how each of them looked.

Thinking about it, I would too.
But aren't <th>'s meant to sit at the top of a column? I must confess to not using <th> tags much.

 

[BabyJeffy]

TH (table header) functions just like TD (table data) with the exception that browser clients can choose to display them differently (by default). Usually this is limited to making the content bold (and in some cases setting the horizontal alignment of the content to centre). You can use CSS to overwrite this default (of course) and make TH appear just like TD (should you wish).

I always thought that you should only have 1 set of TH tags... and so went looking at the DTD definition at W3.ORG. There is no mention of having "only one" set of TH tags per table (as per my initial thought).

So... to summarise... ChrisHunt's suggestion to use TH throughout a table to signify table headings (how ever many you may have) sounds like the best way forward on this (whilst maintaining a simple table structure that an HTML newbie would be comfortable managing).

Hope this is of use to you,
Jeff

 

[tviman]

I concur with Laura, Jeff, Chris and others. There's nothing wrong with using tables for structured layouts. The only "problem", if you will, with tables and browsers is that the browser calculates the entire table in terms of size, space, color, etc. BEFORE the table is rendered. In other words, the browser must construct the table in memory first, then place it on the page. So, for very complex tables coupled with old browser versions and even older CPU's, there could have been a slight delay or slow down when rendering the page. (I've built some pretty complex tables with loads of nested tables and have never seen any slow-downs). However, with newer browsers, loads of memory, and multi-gHZ cpu's I doubt that all but the most complex and hugely complicated tables would show any noticable delay in rendering the page.

There's always a better way. The fun is trying to find it!