Menu
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:
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?
276
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.
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.
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
