Positionering af tabeller
Undgå tabeller og brug css. - Sådan lyder ofte. Alligevel og ofte er det den letteste måde at løse et problem på. Jeg har et problem med at få en tabel på en side placeret. Men selv kunne men hvordan bærer jeg mig ad?Min kode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="da">
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<title>Eksempel</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
font: 85% arial, helvetica, sans-serif;
background: #B0BFC2;
color: #444;
}
#container
{
text-align: left;
margin: 0 auto;
width: 700px;
/* header-base.gif er små blå kvadradiske boxe */
background: #FFF url(header-base.gif) repeat-y;
}
h1
{
margin: 0;
padding: 0;
}
#nav {
background-colour:#444;
float: left;
width: 160px;
display: inline;
margin-left: 20px;
padding: 15px 0;
}
#indhold {
float: left;
width: 475px;
margin-left:45px;
padding: 15px 0;
background-color:#FFF
}
#tabel
caption
{
text-align: left;
margin: 0 0 .5em 0;
font-weight: bold;
}
table
{
border-collapse: collapse;
text-align: left;
}
th, td
{
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: .5em;
text-align: left;
}
tr
{
background: #3DB4FF;
text-align: left;
}
thead th
{
background: #036;
color: #fff;
text-align: left;
}
tbody th
{
font-weight: normal;
background: #599BFF;
text-align: left;
}
</style>
</head>
<body>
<div id="container">
<h1> Sitenavn </h1>
<div id="nav">
<ul id="topnav">
<li><a href="#">Hjem</a></li>
<li><a href="#">Om</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Medarbejdere</a></li>
<li><a href="#">Produkter</a></li>
</ul>
</div>
<div id="indhold">
<div class="table">
<h2>Kontingent for 2008</h2>
<table summary="kontingenter">
<caption>Kontingent</caption>
<thead><tr>
<td>text</td>
</tr>
</thead>
<tbody>
<tr>
<th id="en">Alminindelige medlemmer</th>
<td headers="en">kr. 200,00</td>
</tr>
<tr>
<th id="to">Ægtepapar (samlevere)</th>
<td headers="to">kr. 300,00</td>
</tr>
<tr>
<th id="tre">Studerende og unge under 24 år</th>
<td headers="tre">kr. 120,00</td>
</tr>
<tr>
<th id="fire">Pensionister</th>
<td headers="fire">kr. 120,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
