Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS alternative to complex table structure.

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #43192
    blake
    Participant

    I currently have an app that generates a complex “header” structure within a page using tables. The header is composed of several “blocks”, each of which contains a label row and a data row. Within each block, it is imperative that the labels line up properly with the corresponding data, although there is no need for the individual blocks to line up their cells with the cells from the other blocks. Each block has a width equal to 100% of the width of the container, and the width of the individual cell within each block must be flexible based on the data it contains. The complete header structure is generated on the fly based on data within a database.

    Currently, this is implemented using a separate table for each block, with a row for the label and a row for the data. This works well, since the browser takes care of lining up the cells in the rows, and adjusting the width of the cells as required based on the size of the data retrieved from the database.

    I am wondering if there is a better way of achieving this via CSS without using tables – any advice would be greatly appreciated.

    Thanks,
    Blake

    #127208
    Kitty Giraudel
    Participant

    If you want some very specific help, you’ll have to provide a picture or even better: code.

    If you’re question is: how can we replace HTML tables to achieve layouts, then the answer is: **floats**.

    If you want to use shiny upcoming stuff, then the answer is: **flexbox**.

    #127210
    wolfcry911
    Participant

    I agree – more information is needed. But it sounds as if a table may be the correct markup (label and data rows).

    #127211
    Paulie_D
    Member

    >and the width of the individual cell within each block must be flexible based on the data it contains.

    This is the part that troubles me.

    If a table format is required, and I agree that it sounds like it, then this would be the hard part…wouldn’t it?

    Code & CSS (or at least an image of what it’s supposed to look like) would be the ideal.

    #127213
    blake
    Participant

    Thanks for the quick responses. I’m new to this site and to Codepen, so hopefully the attached link will serve as an example.
    http://cdpn.io/JBkdp

    #127247
    Merri
    Participant

    If something can be done better then the “labels” there should be th tags in the sample syntax.

    Other than that I guess the representation ultimately depends on

    1. What the data/content is like.
    2. What representation limits there are.

    If the end result has to be like a government form then tables are pretty much the only way to go, and more so if flexibility depending on content length is desired. However what goes against “it is tabular data” is that each bit of data only has a certain label into it. No repeating data, one to one. Thus this would sound like it could be a definition list (although DL does allow multiple DD elements for each DT).

    To give my brains something to do I doodled this: http://codepen.io/Merri/pen/ctGkD

    It is a table styled representation of a definition list. The CSS is overly long considering the same end result would be sooo easy to do with tables. A different representation could be visually more pleasing. It all depends on content.

    #127280
    blake
    Participant

    Thanks all – I really appreciate the responses from everybody. I think I’ll probably stick with tables for this paticular situation, particularly since it is an Intranet based application with most users still using IE7. I will definitely look into using table values for the display property, as well as flexbox for the future, but since I’m stuck in the pasture, tables seem to be the way to go. I really appreciate your option Merri, but I need the browser to take care of column sizing, since each page served will be different based on the server side data.
    Thanks again to all responses – they have all been valuable to me. I’m so glad that I found this site.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.