Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
I'm trying to present some data, but as usual, I'm trying to minimise the markup required.
I feel justified in using a table for the layout for a change, and the presentational gear is kept separate, but I still am having trouble getting the look I am after.
Heres the markup:
[syntax="html"]
<table class="general_style" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Widget Name</th>
<th scope="col">Option 1</th>
<th scope="col">Option 2</th>
<th scope="col">Option 3</th>
</tr>
<tr>
<td><span>Item 1</span><span>Description goes here and goes on and on and on and on and on and on and on</span></td>
<td>$75.00</td>
<td>$90.00</td>
<td>$110.00</td>
</tr>
<tr class="alt">
<td><span>Item 1 & 2 Kit </span><span>Description goes here and goes on and on and on and on and on and on and onand on and on and on and on and on and on</span></td>
<td>$75.00</td>
<td>$90.00</td>
<td>$110.00</td>
</tr>
<tr>
<td><span>Item 2</span><span>Description goes here and goes on and on and on and on and on and on and on</span></td>
<td>$75.00</td>
<td>$90.00</td>
<td>$110.00</td>
</tr>
</table>
Code: Select all
table.general_style {
width: 100%;
font-size: 110%;
}
table.general_style th {
background-color:#FFFFCC;
color: #2D822F;
font-size: 110%;
}
table.general_style th,
table.general_style td {
padding: 8px 10px;
text-align: left;
border-top: 1px solid #CCCCCC;
vertical-align: top;
}
table.general_style .alt {
background: #EFEFEF;
}
You can see I used a span in the Widget Name column, what I was trying for was a way to have the first span sit at the top of the row, at whatever width it is, and for the second span to wrap but not back under the first span.
On a single row, it would have the appearance that each span was a column on a table with just a few words in the first column and enough text to wrap in the second.
So why not just do this? Well ... the description text is often quite long, the headings vary in width, and there are usually 20 - 30 rows in the table. Frankly, I just cant waste the space on a short titled row when the cell is padded to the longest.
Besides, it just looks so much easier to understand when it goes from a nice strong heading to a smaller text description that flows straight on from the titles in a non-uniform way, as opposed to a lined up column of descriptions.
Sadly, the current solution is to nest a secondary table into the first cell of each row, but frankly I just don't find it acceptable. A single table containing 30 nested tables ... I mean, come on. They aren't nested in depth at least, but even with presentation stripped bare it's still a depressing sight.
Can anyone help out with a clean semantic markup and CSS combo for this? I've been messing around with floating div's and assorted other approaches without any luck for ages (even resorting to spans, which I never get to work the way I want), so any help would be hot.
Cheers
feyd | Please use[/syntax]
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]