Welcome to WebmasterWorld Guest from 50.16.24.12

Forum Moderators: not2easy

html tables to div

convert

   
11:12 am on Mar 9, 2010 (gmt 0)

5+ Year Member



hello,
i hope you can help me to convert the tables to div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
<title>A simple table</title>
<link rel="stylesheet" type="text/css" media="screen" href="rowspan.css" >
</head>
<body text="#006666" bgcolor="white">

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="logobar" bgcolor="#ffff66">
<tr><td ><img src="logo.jpg" width="120" alt="Northampton Zoo Logo"></td>
<td class="center"><img src="ad2.gif" width="320" alt="main ad" ></td>
<td class="right"><img src="miniad.jpg" width="160" height="100" alt="mini ad" ></td></tr></table>


<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- Left Navigation -->
<td class="toc" rowspan="2">
<p>
<a href="lions.html">Lions</a>
<br /><a href="armadillos.html">Armadillos</a>
<br /><a href="hyenas.html">Hyenas</a>
<br /><a href="elephants.html" class="current">Elephants</a>
<br /><a href="giraffes.html">Giraffes</a>
<br /><a href="gorillas.html">Gorillas</a></p>
<img src="pixelshim.gif" width="110" alt="" />
</td>

<td class="main">

<h1>The Truth about Elephants</h1>


<table border=0 width="200" cellspacing="0" cellpadding="0" class="rightsidebar" align="right">

<tr><td><img src="elephant.jpg" width="200" height="150" alt="Elephant Baby"></td></tr>
<tr><td class="caption">A baby elephant hanging out with its mom, aunts and great-aunts, and maybe even its grandmother</td></tr>

</table>

<p>TEXT</p>

<p>TEXT</p>

<p>TEXT</p>

</td></tr>

<tr><td class="copyright">Copyright &copy; 2002 by Northampton Zoological Society, Inc.</td></tr>


</table>

</body></html>



and here is the .css file for the tables above here ;)

body {font-family:"Trebuchet MS", Verdana, sans-serif;color:#006666}

table, td {border:none}

h1 {font-size:1.8em;
white-space:nowrap;
margin:10px 0 5px}

p {font-size:.9em;
margin:0 0 10px 0}

.rightsidebar {width:200px;
float:right;
border:none;
background:#006666;
color:white;
margin:0 0 5px 10px}

.caption {font-size:.8em;
font-style:italic;
color:black;
text-align:center;
padding:5px;
margin:0;
color:white}

.toc {vertical-align:top;
width:110px;
background:#339966 url(longerfish.jpg);
padding:25px 0 0 10px}

.center {text-align:center}
.right {text-align:right}
.main {vertical-align:top;
padding-left:10px}

.logobar {background:#ffff66}

.toc a:link {color:white;
text-decoration:none;
font-weight:bold}
.toc a:visited {color:gray;
text-decoration:none;
font-weight:normal}
.toc a:hover {color:yellow;
text-decoration:underline;
font-weight:bold}
.toc a:active {color:yellow;
text-decoration:underline}

a:link.current {color:yellow}

.copyright {padding:5px;
background:#006666;
color:white;
font-size:.7em;
font-style:italic;
font-weight: bold}
7:05 am on Mar 14, 2010 (gmt 0)

5+ Year Member



Hi henk90,
I came across a great CSS book that might help you with this. It helped me get rid of tables.

Sticky Mail me if you'd like the title.

(Great quote seen elsewhere: "If I'd wanted to do tables, I would have been a waiter!")

Bill
4:14 pm on Mar 14, 2010 (gmt 0)

5+ Year Member



Hi Henk90,
I was just informed by a moderator on another thread that keeping subjects private as I did in my previous post is not the way to do it here.

So, the title is "CSS: The Missing Manual" by David Sawyer McFarland. This is an extremely well-written, easy to understand guide to using CSS. I hope it helps you, as well as any other forum members who are struggling to understand how CSS is used. It helped me.

Bill
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month