replicating simple table layouts

[Justin French]

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

[Kris]

Re: replicating simple table layouts

In article <3f1b71d0$0$235 86$5a62ac22@fre enews.iinet.net .au>,
Justin French <justin@indent. com.au> wrote:
[color=blue]
> 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>
>[/color]

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@xs4al l.netherlands (nl)