Treehouse: Grow your CSS skills. Land your dream job.

CSS alternative to complex table structure.

  • # March 6, 2013 at 11:41 am

    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.


    # March 6, 2013 at 11:43 am

    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**.

    # March 6, 2013 at 11:51 am

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

    # March 6, 2013 at 11:55 am

    >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.

    # March 6, 2013 at 12:18 pm

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

    # March 6, 2013 at 3:25 pm

    Sometimes, the best solution are tables, like @woldcry911 said. They are not always bad, just bad when used for layout only.

    For your solution (flexible width columns based on content, yet 100% width rows), if you don’t want tables in the markup, you can always use table values for the display property (IE8+ though) in CSS.

    # March 6, 2013 at 6:21 pm

    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:

    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.

    # March 7, 2013 at 2:34 am

    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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.