PDA

View Full Version : Aligning a table within a div

amy2go
08-01-2002, 05:04 PM
I'm still new to all this web programming, but here's what I've got. I can't seem to get the table to center inside the div. Please help.(Btw, I took out the scripting and a few other things so it would be a little shorter since I can't provide a link to the page; however, you should be able to just copy and paste to run from a local browser). Thanx in advance, Amy

<html>
<head>
<title>Call Log Search</title>

<style type="text/css">

body {background-color:#f9f9f9;
margin:0;
padding:0;}

div {width:60%;
background-color:#ffffff;
border-width:medium;
border-style:inset;}

table {width:95%;
border:0;
padding:0;
margin:0;}

</style>
</head>
<body>

<center>
<p><br>
<h2>Customer Call Log: Search</h2>
<p>

<div>

<form name=frmSearch onSubmit="return fnSubmit()" action="/clsearch.pl">
<p><br>
<table>
<tr>
<td>
Enter dates to search:<br>
<em>(Format: MM/DD/YY)</em><br></span>
<p></td>
</tr>
<tr>
<td>
<em>From</em><br>
<input name=txtDate1 type=text size=20></span>
<p></td>
</tr>
<tr>
<td>
<em>To</em><br>
<input name=txtDate2 type=text size=20></span>
<p></td>
</tr>
<tr>
<td>
<button onclick="fnValidDate()" accesskey=f><u>F</u>ind</button></span>
<p></td>
</tr>
</table>
</form>
</div>
</center>
<p>
</body>
</html>
MCookie
08-01-2002, 05:46 PM
Hi, just a tip: when you're in trouble with divs, forms, tables, cells and whats more, just set a border or a background color to it, makes it easy to see what's going on.. might help a lot..


<html>
<head>
<title>Call Log Search</title>
<style type="text/css">
body {
background-color:#f9f9f9;
margin:0;
padding:0;
}
div, form, table {
margin-left:auto;
margin-right:auto;
}
h2 {
text-align:center;
margin-top:50px;
}
form, table {
width:50%;
}
div {
width:60%;
background-color:#ffffff;
border:medium inset #000;
}
</style>
</head>
<body>
<h2>Customer Call Log: Search</h2>
<div>
<form name=frmSearch onSubmit="return fnSubmit()" action="/clsearch.pl">
<table>
<tr>
<td>Enter dates to search:<br>
<em>(Format: MM/DD/YY)</em></td></tr>
<tr>
<td><em>From</em><br>
<input name="txtDate1" type="text" size="20"></td></tr>
<tr>
<td><em>To</em><br>
<input name="txtDate2" type="text" size="20"></td></tr>
<tr>
<td><button onclick="fnValidDate()" accesskey="f"><u>F</u>ind</button></td></tr></table>
</form>
</div>
</body>
</html>
amy2go
08-01-2002, 07:46 PM
Thanks for the tip. After adding border=1 to the table, I realize that it is aligning just fine, so I just removed the width attribute.

Amy