6

My boss wants me to stop using CSS layouts and start using table layouts. A major factor in this is the desirable behavior of tables in horizontally positioned, fluid layouts. See this example:

If you slide the width of the HTML panel narrower, you will see that the table (the first one) has several convenient qualities:

  1. Automatically finds a good place to split the two cells, giving the cell with more content a larger percentage of the available width.
  2. Fills all of the available width 100%.
  3. When deciding which of the cells to wrap, it does so in the way most efficient with regards to vertical space.
  4. Keeps the two cells aligned horizontally no matter what.

Example A does not have quality 1. (You have to update the ratio by hand if the content size changes.)

Example B does not have quality 1 or 3. (Static 50% is less than ideal but could work. However, it breaks on to 3 lines while the table is still only 2 lines tall.)

Example C does not have quality 2 or 4. (I can see ways to fake quality 2 with this one, but clearing down to the next line is totally a deal breaker.)

Example D does not have quality 1 or 4. (Technically it has 1, but the huge gap in between is not practical. Also, left/right floating on the same line doesn't work well in some browsers.)

Since the data is not semantically tabular, I really want to avoid using tables. But my boss pays me, so I need to go with what he says or find a better solution. Is there a way to do this using semantic markup and CSS?

animuson
  • 53,861
  • 28
  • 137
  • 147
brentonstrine
  • 21,694
  • 25
  • 74
  • 120
  • Wow it really goes wrong right at the first sentence. Have you tried looking at grid systems, e.g. Twitter Bootstrap? – Mike Robinson Jul 11 '12 at 00:39
  • Tell me about it. I haven't used grid systems in the past, I'll look at Bootstrap. Is there a good website that demo's how it would help in my situation? – brentonstrine Jul 11 '12 at 00:41

3 Answers3

5

Updated: For all browsers > ie7 you can use display: table, table-row, table-cell. the jQuery code will target ie7 and then replace the div's with appropriate table elements.

If this is the only problem you've run into so far, you shouldn't install some goofy grid system just to fix this. That's overkill and a waste of time.

http://jsfiddle.net/CoryDanielson/yuNTX/

sample html

<div class="table width100pct">  <!-- .table should have NO style. just 'display: table' -->
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>​
<!-- class="table, tr, td" is ONLY for changing display: table, table-row and table-cell.
you SHOULD NOT include any styles inside of these CSS selectors. These classes will 
be removed when the divs are transformed into <table>, <tr>, <td>
-->

//conditionally load the javascript patches for ie7
<!--[if IE 7]><script src="/js/IE7fixes.js"></script><![endif]-->

IE7fixes.js

$(document).ready(function(){
  //comment out the if statement to check functionality without ie7    
  if ($.browser.msie && $.browser.version == 7) {
      $('html').addClass('ie7') //<html class="ie7">.. like modernizr
      var elem, elemClass    
      $('div.table').each(function(i, elem) {
          elem = $(elem)
          elemClass = elem.removeClass('table').attr('class') || ''
          elem.wrapInner("<table class='" + elemClass + "' />").children().unwrap()
      })
      $('div.tr').each(function(i, elem) {
          elem = $(elem)
          elemClass = elem.removeClass('tr').attr('class') || ''
          elem.wrapInner("<tr class='" + elemClass + "' />").children().unwrap()
      })  
      $('div.td').each(function(i, elem) {
          elem = $(elem)
          elemClass = elem.removeClass('td').attr('class') || ''
          elem.wrapInner("<td class='" + elemClass + "' />").children().unwrap()
      })
  }                    
});​

You should structure your CSS similar to mine

required css

table, div.table { width: 100%; }
tr, div.tr { vertical-align: top; }
/* the following 3 classes will be dropped when transformed in ie7
   but that won't matter because they'll fall back to <table><td><tr>
 */
div.table { display: table; } /* NO STYLES HERE */
div.tr { display: table-row; } /* NO STYLES HERE */
div.td { display: table-cell; } /* NO STYLES HERE */
Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
  • 2
    I want to cry. Just this week we found out that we have to start supporting IE7 again. :( – brentonstrine Jul 11 '12 at 00:54
  • Hm. That's unfortunate (to say the least)... if I can think of a solution I'll update the answer. – Cory Danielson Jul 11 '12 at 00:56
  • Kirk, can you make it work by wrapping them in a `div` without the `display:table` CSS? – brentonstrine Jul 11 '12 at 01:19
  • you'd probably need `display: table-row` on that wrapping div, also `display: table-cell` won't work in ie7 (i'm fairly certain) – Cory Danielson Jul 11 '12 at 02:24
  • i updated my answer to include some jQuery code that will revert to using tables – Cory Danielson Jul 11 '12 at 02:43
  • Cory, this is incredible. You are truly a master. – brentonstrine Jul 11 '12 at 13:53
  • you mind marking it as an answer, if it's working to solve your problem :D – Cory Danielson Jul 11 '12 at 15:20
  • In a hurry to get some points? :D I want to make sure this works for me first, I'm working on it right now. I think I want to suggest an improvement too--which I'm willing to work out myself--adding the extra markup for IE7 in dynamically with Javascript, so that good browsers don't get any unneeded code. – brentonstrine Jul 11 '12 at 21:27
  • Haha! Yes actually. Trying to get to 1500. Sounds like a logical improvement though, there's no need to load Javascript if it's not used in the browser. That seems like a good use case for YepNope or Modernizr. – Cory Danielson Jul 11 '12 at 22:13
  • Actually, a conditional script include would work just fine. Especially if your fixes are just going to be targeting IE7. I updated my answer a bit to reflect the changes – Cory Danielson Jul 11 '12 at 22:22
  • 2
    Ok, since you're in a hurry. :) Also, this thread contributed to a win for the semantic web--my boss wanted to see my demo site work in IE7, so I gave him the jsfiddle proof of concept and that satisfied him--no non-semantic tables on our websites! Hurrah! – brentonstrine Jul 11 '12 at 23:02
1

I haven't used tables for laying out non-tabular content of a website for years so I might be missing a few things here but I have some alternatives and ideas.

To abstract it some: It sounds like the root issue is that your boss wants you to use a web development technique that is faster than the one you are currently using, allows you to achieve the same layout, and he isn't concerned with semantic markup.

I think a CSS or site building framework like Twitter Bootstrap or 960gs (Note: 960gs is included in Bootstrap) could be used to achieve the same goals instead of a table based layout. These frameworks do have some non-semantic markup such as div's to contain the rows and span's to set the width and offset elements but are better than using a table with regards to accessability and the amount of non-semantic markup.

You can additionally mitigate this by giving your elements ids and additional classes and styling them, and there is less non-semantic markup than if you used a table based layout.

Going off my interpretation of the root issue, a framework like either of these also gives you pre-styled elements and a way of nicely spacing out elements that will save you time in the overall design -> code -> revise cycle and none of this goes against web development best practices.

Some resources for Twitter Bootstrap:
http://twitter.github.com/bootstrap/ - Has the download and good documentation
http://twitter.github.com/bootstrap/scaffolding.html - Examples of the code you would use in Bootstrap instead of a table based layout

960gs (960px wide Grid System):
960.gs/ - Homepage
https://speakerdeck.com/u/nathansmith/p/960-grid-system - The definitive 960gs tutorial and reasons on why to use it
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/ - The tutorial I first used to learn about grid systems in web design

If I got my initial assumption wrong, sorry! Also if you have any questions or want more information let me know.

Josh R
  • 1,970
  • 3
  • 27
  • 45
  • You're right that time saving is a big factor here. Because we're developing for a closed system where everyone is on a Windows desktop with IE7 or IE8, and Google will never find the site, semantics at the cost of some time is a hard sell. Another big part of this is that the other developers here all are used to tables, so it's partially a training issue. Something like this might work, then again, maybe not. I'll have to look in to it, but I really appreciate the links. – brentonstrine Jul 11 '12 at 01:05
  • Welcome, and thanks for the additional info. If you're targeting IE7 and IE8 good tools to know about are html5shiv and Modernizr (which basically includes Modernizr). They use Javascript to retrofit HTML5 and better CSS support to those browsers. Microsoft likes Modernizr so much it includes it standard with every MVC3 .NET project. They will incur very little additional training time because they only add features, not remove them. The team will need to know why they are there but one dev could do all the work with them – Josh R Jul 11 '12 at 01:17
0

Have you given a shot to css frameworks such as foundation? It beats having td within a td within a table within a td within a table ... (:

ODelibalta
  • 2,194
  • 1
  • 18
  • 28