Table Behavior without Tables
Many times a “table like” layout is necessary to abide by the Rule of Thirds law, specially with the currently popular “magazine” type website layouts.
Adding a table to the layout would simply be too easy, and wouldn’t fit into the “Do Everything without Tables” mentality plaguing the web. So I demonstrate how to achieve the behavior without the table.
Years ago, when the average users monitor resolution only allowed for two column layouts, this would of been achieved by using a table with one row and three columns.
<table width="960" cellpadding="10" cellspacing="0" border="0"> <tbody> <tr> <td width="320" valign="top"> <h3>Current Features</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus. Sed rhoncus arcu et orci eleifend interdum. Nullam et eros a lacus imperdiet suscipit. Maecenas interdum, lorem ac scelerisque dapibus, risus velit ullamcorper libero, non scelerisque tellus enim at leo. Vestibulum sem ipsum, convallis vel, eleifend et, dictum ut, arcu. Sed sagittis, urna eu sodales tristique, turpis turpis lobortis ipsum, id varius magna nunc vitae eros. Vivamus sagittis tincidunt elit. Integer velit. Suspendisse potenti. Etiam purus metus, vehicula ac, tincidunt et, congue ut, enim. Phasellus quis arcu quis massa consectetur scelerisque. Maecenas nunc. Integer at risus et odio luctus interdum. Vestibulum facilisis ultricies lorem. </p> </td> <td width="320" valign="top"> <h3>Contact Us</h3> <p> Morbi quis diam vitae ipsum ullamcorper posuere. Vestibulum justo neque, cursus ut, vulputate ac, molestie et, tortor. Donec elementum sem. Etiam ut eros eu augue porttitor consectetur. Nullam nulla nisi, dapibus vitae, lobortis laoreet, dictum at, sem. Praesent laoreet leo et metus. Quisque laoreet aliquam magna. Phasellus nulla lorem, luctus at, ultrices vel, fringilla vel, ligula. Mauris quis quam sed urna fermentum fermentum. Nam quam. Pellentesque facilisis orci a orci. Ut et orci sed massa porta vehicula. Integer id purus. Mauris eros. </p> </td> <td width="320" valign="top"> <h3>Download a Trial</h3> <p> Donec laoreet egestas risus. Quisque ipsum sapien, dapibus et, cursus in, placerat sed, nisi. Suspendisse dapibus nunc non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum. Ut a metus sit amet nisl malesuada consectetur. Vivamus mi metus, dapibus quis, fermentum id, accumsan eget, nisl. Nam pharetra sodales nulla. Nam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum, sapien quis vehicula hendrerit, justo ante cursus quam, sit amet semper odio diam ullamcorper augue. Vestibulum eros leo, placerat vel, hendrerit sit amet, sollicitudin convallis, enim. Fusce interdum, lectus in sollicitudin gravida, lectus risus lacinia magna, ut tristique ante nulla in arcu. </p> </td> </tr> </tbody> </table>
Today with more standard compliant browsers we can utilize two CSS rules that navigate to the same results as a table. Specifically the display:table; on the parent node and the display:table-cell; assigned to the definition lists will provide the table like functionality that we are looking for.
div.columns{ margin:0px auto; width:960px; display:table; font-family:Arial, Helvetica, sans-serif; } div.columns dl.column{ padding:10px; width:320px; display:table-cell; border:1px solid #000; } div.columns dl.column dt{ font-size:24px; } div.columns dl.column dd{ margin:0px; font-size:14px; line-height:20px; text-align:justify; }
I chose to use a definition list because of the Definition Title(dt) and Definition Description(dd) that comes pre packaged with the element. That way the content we have to divide up in three columns already have spots for their titles and content.
The entire list must be contained in a parent element that will serve as the table.
<div class="columns"> <dl class="column"> <dt>Current Features</dt> <dd> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus. Sed rhoncus arcu et orci eleifend interdum. Nullam et eros a lacus imperdiet suscipit. Maecenas interdum, lorem ac scelerisque dapibus, risus velit ullamcorper libero, non scelerisque tellus enim at leo. Vestibulum sem ipsum, convallis vel, eleifend et, dictum ut, arcu. Sed sagittis, urna eu sodales tristique, turpis turpis lobortis ipsum, id varius magna nunc vitae eros. Vivamus sagittis tincidunt elit. Integer velit. Suspendisse potenti. Etiam purus metus, vehicula ac, tincidunt et, congue ut, enim. Phasellus quis arcu quis massa consectetur scelerisque. Maecenas nunc. Integer at risus et odio luctus interdum. Vestibulum facilisis ultricies lorem. </dd> </dl> <dl class="column"> <dt>Contact Us</dt> <dd> Morbi quis diam vitae ipsum ullamcorper posuere. Vestibulum justo neque, cursus ut, vulputate ac, molestie et, tortor. Donec elementum sem. Etiam ut eros eu augue porttitor consectetur. Nullam nulla nisi, dapibus vitae, lobortis laoreet, dictum at, sem. Praesent laoreet leo et metus. Quisque laoreet aliquam magna. Phasellus nulla lorem, luctus at, ultrices vel, fringilla vel, ligula. Mauris quis quam sed urna fermentum fermentum. Nam quam. Pellentesque facilisis orci a orci. Ut et orci sed massa porta vehicula. Integer id purus. Mauris eros. </dd> </dl> <dl class="column"> <dt>Download a Trial</dt> <dd> Donec laoreet egestas risus. Quisque ipsum sapien, dapibus et, cursus in, placerat sed, nisi. Suspendisse dapibus nunc non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum. Ut a metus sit amet nisl malesuada consectetur. Vivamus mi metus, dapibus quis, fermentum id, accumsan eget, nisl. Nam pharetra sodales nulla. Nam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum, sapien quis vehicula hendrerit, justo ante cursus quam, sit amet semper odio diam ullamcorper augue. Vestibulum eros leo, placerat vel, hendrerit sit amet, sollicitudin convallis, enim. Fusce interdum, lectus in sollicitudin gravida, lectus risus lacinia magna, ut tristique ante nulla in arcu. </dd> </dl> </div>
Now of course with IE7 and below there is an issue with this rendering correctly. IE(with the exception of IE8!) does not recognize the two rules we used. So using conditional statements add the following rules to fix the problem.
div.columns dl.column{ /*we subtract pixels from the original width so IE displays them on one row.*/ width:300px; } div.columns dl.column{ float:left; }
Example
http://dolfo.org/demos/03282009/
There are some situations when tables are necessary. They were just grossly overused when I learned web design, and the web may have never recovered from that. IE also makes things harder on people who want to use REAL CSS rules… thanks for this, though.
Ahh Ryan, the early days of my career consisted of me creating everything in tables, simply not knowing better. Then I became rebellious and attacked any recommendation to use tables. lol Now I simply apply the most logical semantic markup to the situation.
Truth be told, I do still get a guilty pleasure feeling when I get to use a table for tabular data.