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.
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**.
>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.
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.
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.
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".