Convert HTML table to DIV
Below is one suggestion for converting your table tags to CSS div tags:
CSS Style
<style type="text/css" >
div.blueTopBox {
padding: 0px;
margin: 0px;
width: 165px;
diplay:block;
background-color: #333366 ;
border-style: solid;
border-width: 1px;
border-color: #b6cce1;
font-family: Times New Roman, Times, serif;
text-align: center;
}
div.InnerBox { background-color: #333366;
padding: 0px;
margin: 0px;
font-weight: 600;
color:#000000;
font-size: 16px;
line-height: 25px;
}
div.centerBox {
height:100%;
width:100%
clear: all;
padding:1px;
margin: 1px;
background-color: #FFFFFF;
font-size: 14px;
line-height: .50em;
}
a:link {color: #333366} /* unvisited link */
a:visited {color:#993399} /* visited link */
a:hover {color:#333366} /* mouse over link */
a:active {color:#333366} /* selected link */
</style>
</head>
HTML file:
<div class="blueTopBox">
<div class="InnerBox"><span>Auto</span></div>
<div class="centerBox">
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
</div>
</div>
</div>
Below is one suggestion for converting your table tags to CSS div tags:
CSS Style
<style type="text/css" >
div.blueTopBox {
padding: 0px;
margin: 0px;
width: 165px;
diplay:block;
background-color: #333366 ;
border-style: solid;
border-width: 1px;
border-color: #b6cce1;
font-family: Times New Roman, Times, serif;
text-align: center;
}
div.InnerBox { background-color: #333366;
padding: 0px;
margin: 0px;
font-weight: 600;
color:#000000;
font-size: 16px;
line-height: 25px;
}
div.centerBox {
height:100%;
width:100%
clear: all;
padding:1px;
margin: 1px;
background-color: #FFFFFF;
font-size: 14px;
line-height: .50em;
}
a:link {color: #333366} /* unvisited link */
a:visited {color:#993399} /* visited link */
a:hover {color:#333366} /* mouse over link */
a:active {color:#333366} /* selected link */
</style>
</head>
HTML file:
<div class="blueTopBox">
<div class="InnerBox"><span>Auto</span></div>
<div class="centerBox">
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
<p><a href="link.html">link</a></p>
</div>
</div>
</div>
WD said:Hi all,
I've been try to convert an html table to div(s), but i can't seem to
keep the same look? Here's the table:
<table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
border=0>
<tbody>
<tr>
<td>
<table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
border=0>
<tbody>
<tr>
<td align=middle background="images/m.jpg">
<div align="center"><b>Auto</b></div>
</td>
</tr>
<tr valign=top>
<td bgcolor=#FFFFFF>
<div align="center">
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a><br>
<a href="link.html">link</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>