PDA

View Full Version : <table> ----> <div>



zaltek
Jan 19th, 2011, 06:35 PM
Hi guys,

I'm starting to use more divs in my store and using less tables. The problem is, I'm really a <div> novice and don't know how to align data with div tags like I do with tables.
How can I convert the following code from a table to divs using the cleanest code possible and make it look exactly like the original?

Link: http://unitedautoandtruck.com/table.html

Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>United Truck Centers</title>

<style type="text/css">

table.details {
background-color: black;
width: 500px;
margin: 0px;
border: 0px solid blue;
padding: 0px;
border-spacing: 1px;
vertical-align: middle;
margin-left: 0px;
margin-right: auto;
}

td.details_title {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-align: center;
vertical-align: middle;
}

td.details {
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-align: center;
vertical-align: middle;
}

td.details_shaded {
background-color: #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-align: center;
vertical-align: middle;
}

</style>

</head>

<body>

<table class="details">
<tr class="details_title">
<td class="details_title">
Item #
</td>
<td class="details_title">
Description
</td>
<td class="details_title">
Package
</td>
<td class="details_title">
Pack
</td>
</tr>

<tr class="details">
<td class="details">
39992
</td>
<td class="details_shaded">
Blue LED Work Light
</td>
<td class="details">
Boxed
</td>
<td class="details_shaded">
1 Pc./Card
</td>
</tr>

<tr class="details">
<td class="details">
39994
</td>
<td class="details_shaded">
Red LED Work Light
</td>
<td class="details">
Boxed
</td>
<td class="details_shaded">
2 Pc./Card
</td>
</tr>

<tr class="details">
<td class="details">
39996
</td>
<td class="details_shaded">
Green LED Work Light
</td>
<td class="details">
Boxed
</td>
<td class="details_shaded">
3 Pc./Card
</td>
</tr>
</table>

</body>

</html>

tracknut
Jan 19th, 2011, 07:00 PM
It looks like a table, and quacks like a table... it *is* a table. Leave it as is :)

Dave