Stylesheets - how to achieve identical layouts achieved by <table> using <div>

Author

how to achieve identical layouts achieved by <table> using <div>

listaction

2005-05-20, 11:38 pm

Hi Folks,
can you help me by explaining how the code below can be translated
using <div> and achieve the same effect?

Thanks,
LA

<html>
<body>
<table bgcolor="#000000" width="100%" cellspacing="1">
<tr>
<td width="33%" bgcolor="#FFFFFF">test</td>
<td width="33%" bgcolor="#FFFFFF">test </td>
<td width="33%" bgcolor="#FFFFFF">test</td>
</tr>
</table>
</body>
</html>

Gus Richter

2005-05-21, 4:16 am

listaction wrote:
> Hi Folks,
> can you help me by explaining how the code below can be translated
> using <div> and achieve the same effect?
>
> Thanks,
> LA
>
> <html>
> <body>
> <table bgcolor="#000000" width="100%" cellspacing="1">
> <tr>
> <td width="33%" bgcolor="#FFFFFF">test</td>
> <td width="33%" bgcolor="#FFFFFF">test </td>
> <td width="33%" bgcolor="#FFFFFF">test</td>
> </tr>
> </table>
> </body>
> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>For Non-tabular matter</title>
<style type="text/css">
..equalboxes {border:1px solid black;width:33%;float:left;}
</style>
</head>
<body>
<div class="equalboxes">test</div>
<div class="equalboxes">test</div>
<div class="equalboxes">test</div>
</body>
</html>

--
Gus

Johannes Koch

2005-05-21, 7:22 pm

listaction wrote:
> Hi Folks,
> can you help me by explaining how the code below can be translated
> using <div> and achieve the same effect?

Have a look at the section on table in the CSS 2 specification (display:
table/table-row/table-cell).
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)