473,840 Members | 1,594 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2782
In article <3f************ ***********@fre enews.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*******@xs4al l.netherlands (nl)
Jul 20 '05 #2

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

Similar topics

1
1709
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 one is a non-scrollable page which contains a centered title and a centered division with automatic scrolling on overflow, that is: +---------------------+ | TITLE | | +--------------++ |
9
9982
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 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> the percents don't work.
3
2080
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 is a common misconception that CSS layout techniques are incapable of producing complex page layouts. While it is true that *tables generally provide more flexibility*, I will show you that complex layouts are quite possible with CSS." No,...
47
9175
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
2465
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 one should use CSS rather than tables, particularly when tables work & browser support of CSS can be dodgy, especially in IE, I usually fail to come up with a concise & convincing argument :/ I've been having this long running discussion with a...
0
1083
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 database, containing every row that ever existed in the source table. So, when a "delete from srouce where ..." is execute, that delete is not replicated, but all other SQL statements against the source table are. Is there a sane way to do this with...
5
2199
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 connection so as to be able to run a locally linked version of the database outside of the production environment. No data will be modified; it will be read-only. I am struggling with docmd.transferdatabase and trying to empty the laptop-local...
4
1374
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 line between them. But...................... I want that this line must be dash and I don't find any control that allows that. At the moment I'm using a simple HTML Line <hr size=1>
5
4316
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 too many inserts in existing database so simple master/slave solution won't give me much. I was wondering if there is a way to replicate just few tables? Can I use for it mysql replication or do I have to create manually scripts to do that? I...
0
9702
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10924
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10302
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9444
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7023
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5686
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5879
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4498
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3139
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.