|
 |
|
|
08-03-2006, 04:32 PM
|
div or table
|
Posts: 626
|
I have seen a lot of talk about throwing the tables in the garbage.
I'm curious to know if this is only referring to tables as a layout tool.
I am trying to show a comparison on my site between 2 different scenarios, and currently I have a table within the content to show it. Is this a good idea?? Or should I break it into div's??
Here is the table:
HTML Code:
<table cellpadding="0" cellspacing="0" width="90%" align="center">
<tr style="color:#FFFF04; ">
<th colspan="3" align="center" bgcolor="#000040"><b>Before Debt Consolidation</b></th>
<th width="8%"> </th>
<th colspan="3" align="center" bgcolor="#A00000"><b><i>After Debt Consolidation</i></b></th></tr>
<tr style="color:white; ">
<th bgcolor="#000040" width="23%" align="center" valign="top">Item</th>
<th bgcolor="#000040" width="13%" align="center" valign="top">Value</th>
<th bgcolor="#000040" width="10%" align="center" valign="top">Pmt/Mth</th>
<th width="8%"> </th>
<th bgcolor="#A00000" width="23%" align="center" valign="top">Item</th>
<th bgcolor="#A00000" width="13%" align="center" valign="top">Value</th>
<th bgcolor="#A00000" width="10%" align="center" valign="top">Pmt/Mth</th>
</tr>
<tr>
<td width="23%" valign="top" style="padding-left:5px; border-left:1px solid #000040; border-bottom:1px solid #000040;">
<br>House Value:
<br>
<br>Mortgage:
<br>TD Visa:
<br>PC M/C:
<br>TD Line of Credit:
<br>Car 1:
<br>Car 2:
<br><b>Total Debt:</b></td>
<td width="13%" valign="top" style=" border-bottom:1px solid #000040; ">
<br>$275,000
<br>
<br>$160,000
<br> $4,758
<br> $6,321
<br> $9,765
<br> $8,243
<br> $12,946
<br><b style="border-top:1px solid #000040; "> $202,033</b></td>
<td width="10%" valign="top" style="border-right:1px solid #000040; padding-right:5px; border-bottom:1px solid #000040;">
<br>
<br>
<br> $1,261
<br> $143
<br> $189
<br> $195
<br> $247
<br> $404
<br><b style="border-top:1px solid #000040; "> $2,439</b>
</td>
<td width="8%"> </td>
<td width="23%" valign="top" bgcolor="white" style="padding-left:5px; border-left:1px solid #A00000; border-bottom:1px solid #A00000;">
<br>House Value:
<br>
<br>New Mortgage:
<br>
<br><b>No Other Debts</b>
<br>
<br><b class="redlink">Monthly Savings:</b></td>
<td width="13%" valign="top" bgcolor="white" style=" border-bottom:1px solid #000040; ">
<br>$275,000
<br>
<br>$202,033
<br></td>
<td width="10%" valign="top" bgcolor="white" style="border-right:1px solid #A00000; padding-right:5px; border-bottom:1px solid #000040;">
<br>
<br>
<br> $1,814
<br>
<br>
<br>
<br><b class="redlink">$625</b>
</td>
</tr>
</table>
|
|
|
|
|
08-03-2006, 04:44 PM
|
Re: div or table
|
Posts: 635
|
A table is fine for that, it's tabled data. But instead of using a million line breaks and non-breakign spaces, use individual cells.
Tables are for data (like your example) people are simply trying to move away from using them to layout entire sites and using CSS instead.
Last edited by funkdaddu; 08-03-2006 at 05:00 PM..
|
|
|
|
|
08-03-2006, 04:49 PM
|
Re: div or table
|
Posts: 2,898
Name: Keith Marshall
Location: Connecticut
|
Are these you own personal finances?? Remember, this is read by everyone!
__________________
<mgraphic /> - I don't have a solution but I admire the problem.
|
|
|
|
|
08-03-2006, 05:08 PM
|
Re: div or table
|
Posts: 626
|
HAHAHa... Mgraphic. NO!
It is a sample that I use to show the benefits of mortgage debt consolidation (I am a mortgage broker).
That's so funny though!!! It may have been a dumb question... But I'm not that dumb hahaha.
|
|
|
|
|
08-03-2006, 05:09 PM
|
Re: div or table
|
Posts: 626
|
Thanks funkdaddu.
|
|
|
|
|
08-03-2006, 05:28 PM
|
Re: div or table
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
I'll just reiterate that tables are fine. When you have data that's meant to be presented in tabular form you should use them. When we all talk about using css over tables we're talking about the overall layout of the page.
|
|
|
|
|
08-03-2006, 10:50 PM
|
Re: div or table
|
Posts: 353
Location: Arizona
|
You can also line those up without all of the nonbreaking spaces using css.
|
|
|
|
|
08-03-2006, 11:39 PM
|
Re: div or table
|
Posts: 626
|
Two things:
1. What do you mean by non-line breaking spaces??
2. Carterdea, How would you set it up using CSS?
|
|
|
|
|
08-04-2006, 12:57 AM
|
Re: div or table
|
Posts: 2,898
Name: Keith Marshall
Location: Connecticut
|
__________________
<mgraphic /> - I don't have a solution but I admire the problem.
|
|
|
|
|
08-04-2006, 02:33 AM
|
Re: div or table
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
I probably shouldn't assume, but I think carterdea meant using css to style the table. You could certainly code the whole table in css, but when you have tabular data to present a table is going to be much easier.
the non-breaking spaces are all the so you can add more than one space and also ensure that what's in front of the space and behind the space remain on the same line.
I actually would have used more table rows and table cells to present all the data. One value per table cell and then use css to style the table and table cells to align things. You'd end up with more table code that way, but probably less code overall and code that would be easier to read.
|
|
|
|
|
08-04-2006, 10:33 AM
|
Re: div or table
|
Posts: 626
|
It's funny that you say that, I did that last night. I actually started a new thread because I am having a problem with one of the borders. But thanks for the suggestion.
And you are right, it was a lot less coding overall, and easier to follow now.
As you have seen with my coding on my father's site, I had css built in to each element. I did the same thing on my own site... I always had intentions on changing it but I just never got around to it. You know how it is! LOL.
|
|
|
|
|
08-04-2006, 02:57 PM
|
Re: div or table
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
Yeah. That's actually not a bad way to start with css. It's easier to see it right there in the html. Next you move it to the head of the document, which will save you some code over the page and then it all gets moved to an external file saving code over the site. The last stage is about breaking out of the tables and going for the css layout. Usually the hardest and longest stage too.
|
|
|
|
|
08-04-2006, 04:02 PM
|
Re: div or table
|
Posts: 626
|
Actually, it is in an exteral file... i just put it in the <style></style> tags incase someone threw it into dreamweaver to test it.
The tables that I have there are the tables that I listed here which you said was okay... I'm assuming that your just telling me the natural order?
|
|
|
|
|
08-04-2006, 04:16 PM
|
Re: div or table
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
Yeah that's what I meant. I think it's just the way a lot of people progress with using css. I think you're beyond those first few stages already and mostly working on the last one. I think it's easiest at first for people to replace an html attribute with an inline style. That way all they really have new is the css syntax. After a while though you realize you've typed in the same thing on a every table cell maybe and so replace the inline styles with a rule or two in the head of the document and then go from there.
|
|
|
|
|
08-04-2006, 05:52 PM
|
Re: div or table
|
Posts: 626
|
Cool...
I've been tweaking it a little more... I've now placed the two tables inside a div (#compare-container) so that I can center them side by side (relative to the content).
Do you think there is any way I can shave this down?
HTML Code:
<div id="compare-container">
<table id="compare-left">
<tr>
<th colspan="4" class="line1">Before Debt Consolidation</th>
</tr>
<tr>
<th width="130px" align="left">Item</th>
<th width="55px" align="right">Value</th>
<th width="18px" class="spacer"> </th>
<th width="47px" align="right">Pmt/Mth</th>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td>House Value:</td>
<td align="right">$275,000</td>
<td class="spacer"> </td>
<td> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td>Mortgage:</td>
<td align="right">$160,000</td>
<td class="spacer"> </td>
<td align="right">$1,261</td>
</tr>
<tr>
<td>TD Visa:</td>
<td align="right">$4,758</td>
<td class="spacer"> </td>
<td align="right">$143</td>
</tr>
<tr>
<td>PC M/C:</td>
<td align="right">$6,321</td>
<td class="spacer"> </td>
<td align="right">$189</td>
</tr>
<tr>
<td>TD Line of Credit:</td>
<td align="right">$9,765</td>
<td class="spacer"> </td>
<td align="right">$195</td>
</tr>
<tr>
<td>Car 1:</td>
<td align="right">$8,243</td>
<td class="spacer"> </td>
<td align="right">$247</td>
</tr>
<tr>
<td>Car 2:</td>
<td align="right">$12,946</td>
<td class="spacer"> </td>
<td align="right">$404</td>
</tr>
<tr>
<td class="total">Total Debt:</td>
<td align="right" class="subtotal">$202,033</td>
<td class="spacer"> </td>
<td align="right" class="subtotal">$2,439</td>
</tr>
</table>
<table id="compare-right" cellpadding="0" cellspacing="0">
<tr>
<th colspan="4" class="line1">After Debt Consolidation</th>
</tr>
<tr>
<th width="130px" align="left">Item</th>
<th width="55px" align="right">Value</th>
<th width="18px" class="spacer"> </td>
<th width="47px" align="right">Pmt/Mth</th>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td>House Value:</td>
<td align="right">$275,000</td>
<td class="spacer"> </td>
<td align="right"> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td>Mortgage:</td>
<td align="right">$202,033</td>
<td class="spacer"> </td>
<td align="right">$1,814</td>
</tr>
<tr>
<td>TD Visa:</td>
<td align="right">$0</td>
<td class="spacer"> </td>
<td align="right">$0</td>
</tr>
<tr>
<td>PC M/C:</td>
<td align="right">$0</td>
<td class="spacer"> </td>
<td align="right">$0</td>
</tr>
<tr>
<td>TD Line of Credit:</td>
<td align="right">$0</td>
<td class="spacer"> </td>
<td align="right">$0</td>
</tr>
<tr>
<td>Car 1:</td>
<td align="right">$0</td>
<td class="spacer"> </td>
<td align="right">$0</td>
</tr>
<tr>
<td>Car 2:</td>
<td align="right">$0</td>
<td class="spacer"> </td>
<td align="right">$0</td>
</tr>
<tr>
<td class="total">Total Debt:</td>
<td align="right" class="subtotal">$202,033</td>
<td class="spacer"> </td>
<td align="right" class="subtotal">$1,814</td>
</tr>
</table>
</div>
CSS:
HTML Code:
<style>
/***** Debt Consolidation *****/
/** Comparison Tables **/
#compare-container {
margin:0px 0px 0px 35px;
}
#compare-container .spacer {padding:0px; }
#compare-left {
background-color:#ECEEFF;
width:250px;
color:#000040;
border:1px solid #000040;
vertical-align:top;
float:left;
border-collapse:collapse;
margin:0 0 15px 0; /* adds blank space under DIV */
}
#compare-left th {
background-color:#000040;
font-weight:bold;
padding:0 5px 0 5px;
vertical-align:middle;
color:#FFFFFF;
}
#compare-left th.line1 {
color:#FFFF04;
text-align:center;
}
#compare-left td {
padding:0px 5px 0px 5px;
}
#compare-left td.total {
font-weight:bold;
}
#compare-left td.subtotal {
border-top:1px solid #000040;
font-weight:bold;
border-spacing:21px;
}
#compare-right {
background-color:#FFFFFF;
width:250px;
color:#000040;
border:1px solid #A00000;
vertical-align:top;
float:left;
border-collapse:collapse;
margin:0 0 15px 10px; /* adds blank space under DIV and separates compare tables */
}
#compare-right th {
background-color:#A00000;
font-weight:bold;
padding:0 5px 0 5px;
vertical-align:middle;
color:#FFFFFF;
}
#compare-right th.line1 {
color:#FFFF04;
text-align:center;
font-style:italic;
}
#compare-right td {
padding:0px 5px 0px 5px;
}
#compare-right td.total {
font-weight:bold;
color:#A00000;
}
#compare-right td.subtotal {
border-top:1px solid #000040;
font-weight:bold;
color:#A00000;
}
</style>
|
|
|
|
|
08-04-2006, 07:58 PM
|
Re: div or table
|
Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
|
I think you're doing pretty good with the css. There are a couple of shortcuts you can use. You usually don't have to specify background-color: if that's all you want. background: will work. Sometimes you do need to specify it, but not here.
There's a shortcut too when specifying hex colors too. Instead of #ffffff you can use #fff. When you use the second version each of the hex characters is representing two. So #00ff33 could be #0f3. It wouldn't work for something like #2d4f51.
For the most part though I think you've got it pretty good. There's almost always some way you can shave a little here and there, but I'm not seeing anything obvious.
|
|
|
|
|
08-08-2006, 09:50 PM
|
Re: div or table
|
Posts: 626
|
thanks.
|
|
|
|
|
|
« Reply to div or table
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
