3 replies [Last post]
tiepolo
tiepolo's picture
Offline
Regular
Last seen: 5 years 27 weeks ago
Timezone: GMT-8
Joined: 2003-09-16
Posts: 12
Points: 5

I'm trying to make this layout without using tables. http://yoshidadesign.com/table.html

I'm still learning CSS so any help is appreciated. Thanks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 40 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Is it possible to make this layout without tables?

Hi tiepolo,
It depends on your meaning of possible Smile
You can create a similar page without table but it may behave differently in different browsers.

The best thing to do would be try it out, experiment with different ways of doing it eg. positioning absolutely, relative or floating.

Hope that helps

freak
Offline
newbie
Last seen: 15 years 41 weeks ago
Timezone: GMT-8
Joined: 2003-10-04
Posts: 7
Points: 0

Is it possible to make this layout without tables?

Sure you could.

The only question I think you have to ask yourserlf is what are the advantages of laying out your site like that? Does each section of text really need to be layed out as you have it?

But, yes, you can, as I said, do it exactly like you have it in that image. By having everything aligned to the left, and defining measurements in pixels, you can absolutely position the divs to where they need to be.

You might want to add overflow: scroll; to some of the div's to keep them from breaking up.

// freak

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Is it possible to make this layout without tables?

Hi,

As said above it's easy to create a lyout like that but it does depend on the content and what you want to happen to it.

Here's a very quick example (no allowance has been made for the broken box model in ie5 etc).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#outer {
width:754px;
height:199px;
border: 1px solid #000;
}
#outer img.left {float:left;border:1px solid #000}
.margin {margin-top:20px;}

.inner {
border-bottom:1px solid #000;
height:40px;
line-height:40px
} 
.inner2 {
border-bottom:1px solid #000;
height:74px;
} 
.inner3 {
height:40px;
line-height:40px
} 

</style>

</head>

<body>
<table width="750"  border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="4" width="166" height="197"><img src="" name="fixed size" width="166" height="197" alt=""></td>
    <td colspan="2"><img src="" name="fixed size" width="584" height="33" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"> text will go here </td>
  </tr>
  <tr>
    <td width="331" rowspan="2"><img src=""  name="fixed size" width="331" height="81" alt=""></td>
    <td width="251">text will go here</td>
  </tr>
  <tr>
    <td>text will go here</td>
  </tr>
</table>
<div id="outer">
	<img src="" class="left" name="fixed size" width="166" height="197" alt="">
	<div class="inner2"><img src="" class="margin" name="fixed size" width="584" height="33" alt=""></div>
	<div class="inner">Text will go here</div>
	<img src="" class="left" name="fixed size" width="331" height="81" alt="" >
	<div class="inner">Text will go here</div>
	<div class="inner3">Text will go here</div>
</div>


</body>
</html>

Hope that helps anyway.

Paul