What would be the best way to make this layout (css or tables) ?

Question

Hi, I am developping an application where there are subscriptions available. I wanted to know what would be the best way to structure data like the following schema (using tables or css). (Sorry, I am at work and cold not post the picture of what I want on a free image hosting service.)

|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| Location:   xxxxxxxxx-xxxx-xxx                 Maximum subscription date: 12-11-2009  |
| Begin date: 12-15-2009                                              Cost: $ 150       |
| Duration:   2 Days                                                                    |
| Status:     Confirmed with remaining places                           [Subscription]  |
|                                                                                       |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
| Location:   xxxxxxxxx-xxxx-xxx                 Maximum subscription date: 12-12-2009  |
| Begin date: 12-15-2009                                              Cost: $ 150       |
| Duration:   2 Days                                                                    |
| Status:     Confirmed with remaining places                           [Subscription]  |
|                                                                                       |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

I was thinking about tables, but I am not sure this is the most appropriate way for this.

Answer 1

No matter how much I hate tables for layout, I'd have to say tables.

Answer 2

You could do it with CSS, but think about the kind of data you are trying to present: it really is a table of data, essentially. So I would recommend using a table for this.

Really, tables get a lot of flak, but the only time you should avoid tables is when you are using them specifically for layout purposes (i.e. not for the purposes of presenting a table, necessarily). Using tables for this type of situation would be a correct usage of tables.

Answer 3

Tables for the content since it is essentially tabular data, but make sure to make good use of TH for headings such as status, duration, etc.

Answer 4

Depends on what you want

The example in your question right now looks like a box with some lines of text in it, then another box, etc.

If that's what you want, I would suggest divs styled with CSS. If it's more clearly a "columns and rows" layout, go with tables.

Answer 5

I'm doing almost the same in a form i'm developing right now and i'm using a definition list. for ex:

<dl>
    <dt>Location:</dt>
    <dd>xxxxxxx-xxxxx</dd>
    ....
</dl>

It's a bit harder to do this way but the code looks cleaner IMHO. (For me it's ok to do it with tables too)

Answer 6

Display tabular data in tables

Answer 7

tables would make more sense here.

Answer 8

I think people need to get over knee-jerk negative reactions to using table tags in their (x)html. It's a valid set of tags, and it renders and organizes "square" data very well. If you're going to be vehemently opposed to them, be smart and specify that and the rest are inappropriate for semantically inappropriate uses. Don't use a table to lay out your logo and header. This is not tabular data. Are you displaying data in a square-ish way that shows relationships between rows and columns of information? Then go ahead and use tables!

For your particular use, I would recommend, given my understanding of semantic markup (thanks Dan C.!) either a table or a definition list. This accurately describes what you're trying to write.

Answer 9

I personally avoid tables, unless the data is very much table driven (excel-like results). In this case a collection of divs, or even li based would probably be best. (psuedo-markup below)

UL
  LI
    DIV.left
      DL
        DT LABEL {label} /LABEL /DT
        DD {detail}
      /DL
      ...
    /DIV.left

    DIV.right
      ...
    /DIV.right

    DIV.subscribe ... /DIV.subscribe
  /LI
  ...
/UL

NOTE: the use of the label, is because I use a similar technique for input forms. Being consistent helps with reducing un-needed css.

the .left and .right are simply for floating, I would have the LI's positioning be relative, and eliminate specific styling wrt the CSS and bullets (IE makes this part a bit of a PITA, which is why a DIV.list > DIV.list-item may be better in terms of real-world use.