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: <ul> <li>http://jsfiddle.net/CXSS2/2/</li> </ul> If you slide the width of the HTML panel narrower, you will see that the table (the first one) has several convenient qualities: <ol> <li>Automatically finds a good place to split the two cells, giving the cell with more content a larger percentage of the available width.</li> <li>Fills all of the available width 100%.</li> <li>When deciding which of the cells to wrap, it does so in the way most efficient with regards to vertical space.</li> <li>Keeps the two cells aligned horizontally no matter what.</li> </ol> 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?

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.

Is there a CSS alternative to horizontal table layouts without drawbacks?

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:

http://jsfiddle.net/CXSS2/2/

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

Automatically finds a good place to split the two cells, giving the cell with more content a larger percentage of the available width.
Fills all of the available width 100%.
When deciding which of the cells to wrap, it does so in the way most efficient with regards to vertical space.
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?

Is it bad practice to use tables in HTML?

HTML tables were originally intended to be used for presenting tabular data, not for layout. The World Wide Web Consortium (W3C®) discourages use of tables for layout because they are striving for a web in which content and structure are completely separate from presentation.

Why HTML tables are not advised for layouts give 2 reasons?

Tables Are Not Accessible Plus, with nested tables, and various spans on the table cells can make the page difficult to figure out. This is the reason that the HTML5 specification recommends against tables for layout and why HTML 4.01 disallows it.

Should you use tables in HTML5?

So even in HTML5 it is COMPLETELY OK if you use tables for tabular data. Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.

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

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.

Is there a CSS alternative to horizontal table layouts without drawbacks?

Tags:

css

semantic-markup

brentonstrine

People also ask

2 Answers

Cory Danielson

Josh R

Recent Activity

Donate For Us

Is there a CSS alternative to horizontal table layouts without drawbacks?

Tags:

css

semantic-markup

brentonstrine

People also ask

2 Answers

Cory Danielson

Josh R

Related questions

Recent Activity

Donate For Us