473,320 Members | 2,177 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

Jul 20 '05 #1
1 2763
In article <3f***********************@freenews.iinet.net.au >,
Justin French <ju****@indent.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
kr*******@xs4all.netherlands (nl)
Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Dario de Judicibus | last post by:
I wish to create two simple layouts by using only HTML, CSS and the minimum JavaScript as possible. Layouts should be "elastic" (no fixed widths and heights) and cross-browser enabled. The first...
9
by: alex | last post by:
Hi, It seems like HTML 4.01 Transitional spec. doesn't allow table height to be expressed in percents. When i have this doctype tag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01...
3
by: sinister | last post by:
From http://www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html "Typically CSS layout replaces tables, which are currently the most popular method of placing page elements. There...
47
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
16
by: Michael Rozdoba | last post by:
I'm far from a CSS expert, but what I see of it I really like & I love keeping content & style separate. I also hate the way table layout produces convoluted bulky code. However when asked why...
0
by: nwiebe | last post by:
Hi, does anyone know how to avoid replicating delete statements? I have a table in a source database. This table is pruned occasionally. I'd like to have a copy of this table in a second...
5
by: Derickson | last post by:
I am working with a production runtime Access 2000 db, split front-end and back-end. Running on a network, I need a nightly copy of the backend transferred to a laptop with a temporary network...
4
by: ruca | last post by:
Hi, I have an web application with fields that must be the filters for some results. To show the result I have a datagrid. So far so good. To distinguish filter fileds from datagrid I put a...
5
by: Radek | last post by:
Hi I'm in need of creating reporting database. What I have to do it is to replicate only half of tables to next database so reports could query only that second database. Unfortunately there is...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.