Click to See Complete Forum and Search --> : table trouble


Lola8
06-22-2008, 10:51 AM
I want to create two columns that rest evenly side-by-side, each containing text. Should these be made as two separate tables, or as one table? How can I get them to align correctly? Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Links</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
<meta name="generator" content="BBEdit 8.7" />
</head>
<body>


<div id="wrap">

<div id="header">
<p id="navbuttons">
<a href="../index.html">home</a>
<a href="artists.html">artists</a>
<a href="writing.html">writing</a>
<a href="listings_news.html">news+listings</a>
<a href="links.html"class="current">links</a>
<a href="about.html">about</a>
<a href="contact.html">contact</a>
</p> <!-- end #navbuttons -->
</div> <!-- end #header -->

<div id="main">

<div class="links">
<table border="0" width="100" cellpadding="20"class="artists">
<tr><td valign="top">

<h1> Artists </h1>
<p> <a href="http://www.sophiecwhite.com/"> www.sophiecwhite.com <br>
<a href="http://www.jeremywillis.com/"> www.jeremywillis.com </p>
</td></tr>
</table>

<table border="0" width="100" cellpadding="20"class="other">
<td valign="top">

<h2> Other </h2>
<p> <a href="http://www.rhizome.org/"> www.rhizome.org
</td>

</tr>
</table>

</div> <!-- end .links -->

</div> <!-- end #main -->

</div> <!-- end #wrap -->

</body>
</html>



Here is my css:


.links {text-align:center;margin-left:250px;margin-top:100px;position:relative;}

.links p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;}

bathurst_guy
06-22-2008, 05:34 PM
Or don't use tables at all and use divs with float: left.

WebJoel
06-23-2008, 06:46 PM
<div id="header">
<p id="navbuttons">
<a href="../index.html">home</a>
<a href="artists.html">artists</a>
<a href="writing.html">writing</a>
<a href="listings_news.html">news+listings</a>
<a href="links.html"class="current">links</a>
<a href="about.html">about</a>
<a href="contact.html">contact</a>
</p> <!-- end #navbuttons -->
</div> <!-- end #header --> This whole thing could be written better as an unordered list (UL), and you might want a 'whitespace' in here to delineate "links.html" from "class="current" "