Table layout without Tables

**Richardf** · 09-05-2006, 01:28 PM

Hi there,
I'd like to create a layout within the main column of a 3 column layout which has the same symmetry as a table, but not using the table tags.
I was looking for something like
( the dash line represents a horizontal rule or the top or bottom border of a div - whatever is easier and the names, ages, occupations and location should all line up neatly - hope that makes sense)
---------------------------------------------------------
John Smith 25 Engineer New York
---------------------------------------------------------
William Thomas 23 Nurse Los Angeles
---------------------------------------------------------
Sarah Giles 29 Doctor San Fran
---------------------------------------------------------
Catherine Fox 21 IT Support Texas

That kind of thing - was wondering what the easiest way to do it was. Had some ideas, but they all seem so long.
Thanks

**DeadMeatGF** · 09-05-2006, 01:35 PM

Try this - and browse the site if it's not quite what you're after.
Also remember - if you need a table, use a table. If you're using tables to create a positional layout, you want to look for an alternative, but if you're using a table because it's tabular, then carry on.

**coothead** · 09-05-2006, 03:30 PM

Hi there Richardf,

and a warm welcome to these forums.

Have a look at this simple example...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container {
    width:678px;
    margin:25px auto;
    border:1px solid #000;
    padding:2px;
 }
.name {
    width:200px;
    line-height:50px;
    border:1px solid #000;
    padding-left:5px;
    float:left;
 }
.age {
    width:50px;
    line-height:50px;
    border:1px solid #000;
    padding-left:5px;
    float:left;
 }
.job {
    width:200px;
    line-height:50px;
    border:1px solid #000;
    padding-left:5px;
    float:left;
 }
.home {
    width:200px;
    line-height:50px;
    border:1px solid #000;
    padding-left:5px;
    float:left;
 }
#clear {
   clear:both;
 }
-->
</style>

<script type="text/javascript">
<!--

//-->
</script>

</head>
<body>

<div id="container">

<div class="name">John Smith</div>
<div class="age">25</div>
<div class="job">Engineer</div>
<div class="home">New York</div>

<div class="name">William Thomas </div>
<div class="age">23</div>
<div class="job">Nurse</div>
<div class="home">Los Angeles</div>

<div class="name">Sarah Giles</div>
<div class="age">29</div>
<div class="job">Doctor</div>
<div class="home">San Francico</div>

<div class="name">Catherine Fox</div>
<div class="age">21</div>
<div class="job">IT Support</div>
<div class="home">Texas</div>

<div id="clear"></div>

</div>

</body>
</html>

**Office Angel** · 10-30-2006, 04:12 AM

My site has a 3 column layout without tables using absolute positioning of divisions.

There are many advantages to this such as improving your search engine ranking if done properly and your site can also be viewed in text browsers since they cannot display table data.

Borders can be used to divide the columns or rows.

You can view my web page at: http://OfficeAngel.Biz and then view one its css files at http://OfficeAngel.Biz/design2d.css for some ideas.

**Richardf** · 11-06-2006, 05:30 PM

Hi there guys,
Thanks for the response and advice and sorry about the delay.
DeadMeatGF, Thanks for the link - I will check it out. The reason I want to create it without tables, is because I understand that if you create it using tables, then its very difficult to adapt for other media, such as handhelds and mobiles/cells.
Coothead, thanks for the warm welcome. The method that you proposed does work, but occassionally the individual would have two jobs, and when you enter two occupations into the occupation column, it would break the design. Also specificying the height, created a fixed layout, which made it inaccessible.
Office Angel, absolute positioning would work, but I am trying to create my first accessible website. If I create it using absolute positioning, will fix the heights and make the site inaccessible.
Thanks

**coothead** · 11-07-2006, 02:05 PM

Hi there Richardf,

well, you never mentioned that these people are multi-talented and have more than one occupation.

Well you could, in that case, try it like this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container {
    width:678px;
    margin:25px auto;
    border:1px solid #000;
    padding:2px;
 }
.name {
    width:195px;
    height:32px;
    line-height:32px;
    border:1px solid #000;
    padding:0 5px;
    float:left;
    overflow:auto;
 }
.age {
    width:45px;
    height:32px;
    line-height:32px;
    border:1px solid #000;
    padding:0 5px;
    float:left;
 }
.job {
    width:195px;
    height:32px;
    line-height:32px;
    border:1px solid #000;
    padding:0 5px;
    float:left;
    overflow:auto;
 }
.home {
    width:195px;
    height:32px;
    line-height:32px;
    border:1px solid #000;
    padding:0 5px;
    float:left;
    overflow:auto;
 }
#clear {
   clear:both;
 }
-->
</style>

<script type="text/javascript">
<!--

//-->
</script>

</head>
<body>

<div id="container">

<div class="name">John Smith</div>
<div class="age">25</div>
<div class="job">Engineer <br />actor<br />postman<br />banker</div>
<div class="home">New York</div>

<div class="name">William Thomas </div>
<div class="age">23</div>
<div class="job">Nurse<br />public executioner<br />pencil sharpener<br />shepherd</div>
<div class="home">Los Angeles</div>

<div class="name">Sarah Giles</div>
<div class="age">29</div>
<div class="job">Doctor<br/>pole dancer<br />deep sea diver<br />crab extractor</div>
<div class="home">San Francico</div>

<div class="name">Catherine Fox</div>
<div class="age">21</div>
<div class="job">IT Support <br />doctor <br />engineer</div>
<div class="home">Texas</div>

<div id="clear"></div>

</div>

</body>
</html>

**Office Angel** · 11-13-2006, 03:30 AM

Originally Posted by Richardf

Hi there guys,
Office Angel, absolute positioning would work, but I am trying to create my first accessible website. If I create it using absolute positioning, will fix the heights and make the site inaccessible.
Thanks

You could use percent figures in your absolute positioning style statements which should automatically adjust the layout to whatever screen size. For instance top:2%; rather than top:15px;

**DeadMeatGF** · 11-15-2006, 04:49 PM

Originally Posted by Office Angel

You could use percent figures in your absolute positioning style statements which should automatically adjust the layout to whatever screen size. For instance top:2%; rather than top:15px;

There's a few problems with percents, though - quite often if you don't add up to 100% it breaks the layout, on the other hand, if you do add up to 100% it spills over onto the next line.

**mandar-seo** · 11-27-2006, 01:04 AM

Can anybody tell me about the different positionings?

With regards,
Mandar Thsoar

**Svoboda** · 12-04-2006, 07:47 PM

I'd check out DynamicDrive.com. They have some very good CSS-based layouts including the 3 column layout you're looking for in both fixed and liquid flavors.

Thread: Table layout without Tables

Thread Tools

Related

need help for table layout Forum: HTML Forum

TABLES- can any one help me stop the text streching the tables. Forum: HTML Forum

Need Help - Table / Template stretching out my layout! Forum: HTML Forum

How can you make a table border on only one side of the table? Forum: HTML Forum

Avoiding nested tables or grouping separate tables in chunks Forum: HTML Forum

Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Re: Table layout without Tables

Tags for this Thread

Cloudjiffy- PaaS for Developers