replicating simple table layouts

Hi all,

I've been using CSS for typography for quite some time, but have not
looked into it too deep at all in regards to layout.

Now is as good a time as any eh?

Whilst ultimately I'll want to look at complex layouts (and can find
plenty of tutorials on them already), I just want to start with the
basics for the moment...

Can any one point me to some tutorials on the basics?

eg, how would i replicate this table layout in css?

<table width='500' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td align='right' valign='top' height='50' width='50'>
<img src='fred.gif' ...>
</td>
<td align='left' valign='top' height='50' width='20'>
<!--gutter-->&nbsp;
</td>
<td align='left' valign='top' height='50' width='430'>
<p>All about Fred</p>
</td>
</tr>
<tr>
<td align='right' valign='top' height='50' width='50'>
<img src='jane.gif' ...>
</td>
<td align='left' valign='top' height='50' width='20'>
<!--gutter-->&nbsp;
</td>
<td align='left' valign='top' height='50' width='430'>
<p>All about Jane</p>
</td>
</tr>
</table>

Thanks in advance,

Justin

In article <3f1b71d0$0$23586$5a62ac22 (AT) freenews (DOT) iinet.net.au>,
Justin French <justin (AT) indent (DOT) com.au> wrote:

Hi all,

I've been using CSS for typography for quite some time, but have not
looked into it too deep at all in regards to layout.

Now is as good a time as any eh?

Whilst ultimately I'll want to look at complex layouts (and can find
plenty of tutorials on them already), I just want to start with the
basics for the moment...

Can any one point me to some tutorials on the basics?

eg, how would i replicate this table layout in css?

table width='500' border='0' cellpadding='0' cellspacing='0'
tr
td align='right' valign='top' height='50' width='50'
img src='fred.gif' ...
/td
td align='left' valign='top' height='50' width='20'
!--gutter-->&nbsp;
/td
td align='left' valign='top' height='50' width='430'
p>All about Fred</p
/td
/tr
tr
td align='right' valign='top' height='50' width='50'
img src='jane.gif' ...
/td
td align='left' valign='top' height='50' width='20'
!--gutter-->&nbsp;
/td
td align='left' valign='top' height='50' width='430'
p>All about Jane</p
/td
/tr
/table

This is quite defendable an example of tabular data;
[name] [details]
[label: Fred] [value: Things about Fred]
[label: Fred] [value: Things about Fred]

But, if you don't like that, then this will do (and that is how I would
have done it anyway):

<div class="person">
<h1><img src="fred.gif" width="50" height="50" alt="Fred:"></h1>
<h2>All about Fred</h2>
<p>
.....
</p>
</div>

<div class="person">
<h1><img src="jane.gif" width="50" height="50" alt="Jane:"></h1>
<h2>All about Jane</h2>
<p>
.....
</p>
</div>

..person {
clear: both;
}
..person h1 {
float: left;
}
..person h2, .person p {
margin: 0 0 0 70px;
}

--
Kris
kristiaan (AT) xs4all (DOT) netherlands (nl)