1

So, I am making a CSS layout that takes advantage of display:table, display:table-row, and display:table-cell. However, I've run into a problem:

I need to apply a colspan to one of my DIVs.

However, adding this attribute to a DIV is pretty much pure evil. What are my options?

See: http://jsfiddle.net/RhFz6

EDIT:

I found a solution: http://jsfiddle.net/RhFz6/4

Instead of making everythingggg a table, I just made the center area a table. The header and footer were left as block elements. From there, I gave the table 100% height, and negative margins so it fits in the page. It turned out beautifully!

Nathanael
  • 6,893
  • 5
  • 33
  • 54

4 Answers4

3

I don't understand why people would rather make their lives a living hell trying to fake a table, when the <table> tag is still there and perfectly valid for use. Use tables, and you can apply all the rowspan and colspan you want. Add table-layout: fixed and you can reliably specify the width and height of the cells, leaving no downside so far as I can see.

Tables even have useful features, such as cellIndex and rowIndex, grouping tHead, tFoot and tBodies[] together. There's plenty of things made a lot easier by using the properties that tables expose to us.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • The main problem is that it doesn't make sense from a code point-of-view. From a practical perspective it does, and from a visual perspective it does. However, for web crawlers, text-to-speech software, and other automated systems, it's a nightmare. – Nathanael Jun 25 '12 at 01:49
  • Since the text is divided into logical groups, and would be in the same order whether they are in `
    `s or ``s, I'm afraid I fail to see how they would negatively impact such automated systems...
     – Niet the Dark Absol Jun 25 '12 at 01:56
  • Yeah, I get what you're saying, but even still, tables are still designated for more tabular data, so better play it safe. I'm all about keeping up with the standards, haha. But hey! I got it working with pure CSS. See here: http://jsfiddle.net/RhFz6/4 – Nathanael Jun 25 '12 at 02:38
0

Not sure if this is the "evil" option you were referring to, but there's a column-span property, though it looks like it's only supported by Chrome and Opera at present.

Edit:

Looking at the fiddle example, if the colspan is only needed on the first and last row (the table header and footer), then you should have some options. Even if you fake those rows it won't disrupt the consistent columns sizes of the inner rows.

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
  • I was referring to adding the actual attribute. But as you mentioned, it's not very widely supported, so I don't want to use this. But thanks! – Nathanael Jun 25 '12 at 00:54
0

Do you absolutely have to fake a table? From your JSFiddle, it looks like you're just trying to get #sidebar and #content next to one another. This could be done fairly easy with floats. If you're trying to get the #sidebar and #content divs to have a background and want them to be identical in height, try putting the background you'd put on #sidebar on #main instead. It would still look the same, even though #sidebar wouldn't be the element with the background.

Proof of concept: http://jsfiddle.net/RhFz6/3/

Sean Johnson
  • 5,567
  • 2
  • 17
  • 22
  • Thanks for the help! Unfortunately, I think faking a table is the best bet. In my actual project, I have three columns in the `main` section. The first is fixed-width, the second is an auto width, and the third is a fluid, percentage width. The 100% height is still required, which makes it tricky! – Nathanael Jun 25 '12 at 01:31
  • I fixed it! I ended up faking a table just for the middle area, the rest was block elements. Thanks! – Nathanael Jun 25 '12 at 02:37
0

I figured it out, and my solution actually doesn't require a wrapper either, which is really nice. See here:

http://jsfiddle.net/RhFz6/4

What made my situation difficult was the fact that I needed three columns in the main body area, in addition to a header and footer. Furthermore, the layout was fluid-width, so I couldn't just use pseudo-columns. Of course, I didn't want to use a table either, because, well, I'd feel guilty. :P

Instead of treating the entire layout like a table, which was the reason I need a column span, I simply made the center area a table. The header and footer were simply displayed as block elements. I then set the height of html and body to 100%, and then made the center content area have a height of 100%. Unfortunately, this pushed the minimum-size layout past the window area, as it was a 100% height plus the header and footer.

To get around that, I just added some negative margins, to the pseudo-table, some positive padding to the cells (so you can still see the content after the header and footer overlap the table), and some fancy z-index work (because the header was beneath the table, not above it)

And, well, ta-da! Works in all modern browsers, but not tested in older ones. Thanks for your help!

Nathanael
  • 6,893
  • 5
  • 33
  • 54
  • FYI, there is an HTML tag, [`aside`](http://www.w3.org/wiki/HTML/Elements/aside), which might be a more logical tag to describe your sidebar content. – jeffjenx Jun 25 '12 at 02:48