How to make this 2 column table without using tables? - html

Question

http://jsfiddle.net/pkLMC/
the left column should shrink to fit, and the right column should take up the remainder of the width of the page. It needs to work with IE7 as well
image of issue
<style>
table
{
width:100%;
border:1px solid black;
}
td
{
vertical-align:top;
border:1px solid green;
background-color:orange;
}
.left
{
/* trim the column to the minimum necessary width required to avoid overflow */
width:1px;
}
.long
{
/* this layout works whether the content of the right column wraps or not */
/* display:none; */
}
</style>
<table>
<tr><td class="left">ABC</td><td>Lorem ipsum dolor</td></tr>
<tr><td class="left">ABCDE</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td></tr>
<tr class="long"><td class="left">ABCDEFG</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHI</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHIJK</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
</table>

Answer 1

The data you present in your example is tabular in nature in that it has both rows and columns. Css without HTML tables is good for formatting stuff in columns (like a newspaper). Once you have both rows and columns with variable width columns (like your data), tables (/table, /tr, /td, etc.) is the way to go.
You might want to stripe your rows. Here is an example: http://jsfiddle.net/peavU/

Answer 2

Something to keep in mind is that using tables for layout is not a bad thing at all IF the information you're presenting is tabular in nature.
Using tables to arrange non-tabular data isn't good, but that doesn't mean that tables don't have their place.
On preview... what #DwB said.

Answer 3

A definition list <dl> is perfect for the type of layout you have on your fiddle.
http://www.maxdesign.com.au/articles/definition/

Answer 4

Have you tried using div tags instead? They are more organized, efficient, and can adjust to multiple screen sizes

Answer 5

I agree with both #DwB and #Diodeus. Means, if you have really tabular data, the best you can do is to use tables. But, if your list is actually a list of definitions, then it makes sense to convert to <dl> like in the example:
HTML
<dl>
<dt>THIS IS THE TITLE</dt>
<dd>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd>
<dt>THIS IS ANOTHER TITLE</dt>
<dd>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd>
</dl>
CSS
dl {
width: 100%;
background: Orange;
margin: 0;
padding: 0;
}
dt {
width: 10em;
clear: left;
float: left;
padding: 1em;
border-top: 1px solid #fff;
}
dd {
margin-left: 12em;
padding: 1em;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
}

Answer 6

I can get a bit crazy using lists, but here is my two cents...with a jsFiddle example: Table like layout using lists
The code should resize and the text won't wrap, utilizing the "text-overflow: ellipsis;" css rule.
HTML:
<ul>
<!-- "table" header" -->
<li class="col1 th">Column 1 header</li>
<li class="col2 th">Column 2 header</li>
<!-- "table" rows -->
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>
CSS:
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul {
border: 1px solid #333;
list-style-type: none;
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
ul:after {
content:"";
display: table;
clear: both;
}
.col1, .col2{
float: left;
text-align: left;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
padding: .25em;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.col1 {
clear: left;
width: 30%;
}
.col2{
width: 70%;
}
.th {
font-weight: bold;
text-align: center;
}
Hopefully that helps!