What provides a vertical space between 2 Tables

Forum Moderators: open

Message Too Old, No Replies

What provides a vertical space between 2 Tables

ThomasAJ

7:00 am on Aug 26, 2009 (gmt 0)

Sorry - simple I know - cannot figure what/where is the tag/element or whatever that puts in a space between 2 tables that are 'one above the other'.

birdbrain

7:30 am on Aug 26, 2009 (gmt 0)

Hi there ThomasAJ,

CSS margin is what you need. ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
table {
border:2px solid #999;
}
td {
width:100px;
height:62px;
border:1px solid #666;
text-align:center;
}
#table1 {[blue]
margin-bottom:50px;[/blue]
}
</style>
</head>
<body>
<table id="table1"><tr>
<td>table one</td>
</tr></table>
<table id="table2"><tr>
<td>table two</td>
</tr></table>
</body>
</html>

birdbrain

ThomasAJ

7:53 am on Aug 26, 2009 (gmt 0)

So "margin-bottom:50px" is the actual Style element(?)

birdbrain

8:13 am on Aug 26, 2009 (gmt 0)

It certainly is. ;)

ThomasAJ

8:42 am on Aug 26, 2009 (gmt 0)

Many many thanks

birdbrain

8:52 am on Aug 26, 2009 (gmt 0)

No problem, you're very welcome. :)

swa66

12:22 pm on Aug 26, 2009 (gmt 0)

Or do it without classes or IDs:


table+table {
  margin-top: 50px
}

IE6 needs extra help (doesn't it always?), IE7.js fixes this among many other things.