Formatting a table

music_fan01 · October 24, 2011

http://starr05.comule.com/guestbook.php

I am trying to get my tables that I have before and after some signs my guestbook centered and below where I have my "Guestbook" header. Right now, its centerd, but its up where my links are. I've tried making a div for my table

#table{margin-top:2cm;}

but that didnt work so I went ahead and took it out. Not too sure what else I can try.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


    <!-- header -->
    <div id="header">
        <div id="logo"><a href="index.html">Header</a></div>
        <ul id="menu">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Contact</a></li>
        <li><a href="guestbook.php">Guestbook</a></li>
                  </ul>
<div id="icon"><a href="twitter.com/">
<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>

   
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Guestbook</strong></h1>


<table width="400" border="0" align="left" cellpadding="3" cellspacing="0">
<tr>
<td align="center"><strong>Guestbook</strong>
<p>Please leave your comments.</p>
<p>* Required field</p></td>

</tr>
</table>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<form id="form1" name="form1" method="post" action="addguestbook.php">
<td>
<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<td width="117">* Name</td>
<td width="14">:</td>
<td width="357"><input name="name" type="text" id="name" size="40" /></td>
</tr>
<tr>
<td valign="top">* Comment</td>
<td valign="top">:</td>
<td><textarea name="comment" cols="40" rows="3" id="comment"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Submit2" value="Reset" /></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="400" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td align="center"><strong><a href="viewguestbook.php">View Guestbook</a> </strong></td>
</tr>
</table>
</div>

</div>


           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>

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



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


    <!-- header -->
    <div id="header">
        <div id="logo"><a href="index.html">Header</a></div>
        <ul id="menu">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="contact.php">Contact</a></li>
        <li><a href="guestbook.php">Guestbook</a></li>
            
                  </ul>
<div><a href="twitter.com/">
<img border="0" src="http://www.000webhost.com/forum/images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>

  
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Guestbook</strong></h1>


<table width="400" border="0" align="center" cellpadding="-" cellspacing="0"  >
<tr>
<td><strong>View Guestbook | <a href="guestbook.php">Sign Guestbook</a> </strong></td>
</tr>
</table>
<br>

<?php
$mysql_host = "mywebhost";
$mysql_database = "a7560006_guest";
$mysql_user = "a7560006_hoku";
$mysql_password = mypassword";
$tbl_name="guestbook"; // Table name

// Connect to server and select database.
mysql_connect("$mysql_host", "$mysql_user", "$mysql_password") or die("cannot connect server ");
mysql_select_db("$mysql_database") or die("cannot select DB");

$sql="SELECT * from $tbl_name";
$result=mysql_query($sql);

while($rows=mysql_fetch_array($result)){
?>

<table width="400" border="0" align="center" cellpadding="0" cellspacing="1" >
<tr>
<td><table width="400" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>Comment Number</td>
<td>:</td>
<td><? echo $rows['comment_id']; ?></td>
</tr>
<tr>
<td width="117">Name</td>
<td width="14">:</td>
<td width="357"><? echo $rows['name']; ?></td>
</tr>
<tr>
<td valign="top">Comment</td>
<td valign="top">:</td>
<td><? echo nl2br($rows['comment']); ?></td>
</tr>
<tr>
<td valign="top">Date/Time </td>
<td valign="top">:</td>
<td><? echo $rows['datetime']; ?></td>
</tr>
</table></td>
</tr>
</table>
<BR>

<?php
}
mysql_close(); //close database
?>



</div>

</div>
           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>

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

</body>
</html>

sunfighter · October 24, 2011

you put your html up teice. Need the css code.

music_fan01 · October 25, 2011

Oops! Heres my css. Sorry about that.

/* body */

body {
margin:114px 0 0 0; 
line-height:15px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
}

a { 
color:#018BC1;
}
a:hover { 
text-decoration:none;
}
#header {}
#logo { 
padding:30px 0 120px 0;
color:#fff; 
text-align:center;
}


/* logo */
#logo a{ 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:24px; 
text-transform:uppercase; 
}

/* Menu */
#menu {
color:#fff; 
text-align:center; 

}
#menu ul {
text-align:center;
list-style:none; 
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a { 
font-weight:bold; 
font-size:14px; 
text-decoration:none; 
color:#fff; 
background-color:#445d6c; 
padding:0 10px 2px 10px;
}
#menu ul a:hover 
{ 
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;

}
#content {
width: 780px; 
margin:0 auto;
overflow:hidden;
margin-bottom:3cm;



}

/ * Text */
#text {
    float: left;
width: 760px;
margin-top:1cm;
}
#text p {
margin:7px 0 7px 0;
}

#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
margin:30px 0 0 0; 
padding:5px 0 7px 45px; 
text-transform:uppercase; 
font-size:25px; color:#fff; 
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}

/* Footer */

#footer {
background:url(images/footer_bckg.jpg) no-repeat top center; 
height:102px; clear:both; 
width:780px; 
margin:0 auto; 
}
#left_footer {
float:left;
padding:60px 0 0 30px; 
color:#fff; font-size:12px;
}
#left_footer a { 
color:#fff;
}
#left_footer a:hover { 
text-decoration:none;
}
#right_footer { 
float:right;  
padding:60px 30px 0 0; 
color:#fff;  
font-size:12px; text-align:right;
}
#right_footer a { 
color:#fff;
}
#right_footer a:hover { 
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px

}


/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
.row img {
    margin: 2px;
    border: 1px solid #0000ff;
    clear: both;
    width: 100px;
    height: 90px;
    margin-left:3px;
}

.first
{
    float: right;
    text-align: center;
} 
     
.last {
    border: 1px solid #ffffff;
    float: right;
}

.desc
{
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 10px;
}


/* image */
#image {

margin-top:1cm;
width: 400px;
margin-top:2cm;
}

/* paragraphs */
#p {
    float: left;  
    margin-right: 4px;
padding-left: 20px;
    font-size:12pt;
}

/* Divider */
#div {
float: right; 
width: 20px; 
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}

sunfighter · October 26, 2011

When I started to work on this I was running into something weird. I traced it to this line in your css file: / * Text */. There is a space between the first / and the *.

Little thing but it does bring things to a halt.

Although you set your tables to 400px the largest one is 420, so I changed all that. Also renamed #text to #inside and changed the sub p and li accordingly.

You used two tables to do your form. Not needed so eliminated one. - also took the <h1> out of #inside.

In your css file you use padding to center things and set relationships so I just followed suite for centering. You may want to change the vertical spacing.

Your CSS:

/* body */
body {
margin:114px 0 0 0;
line-height:15px;
font-family: Tahoma, Arial;
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20;
color:#bed7e6;
font-size:11px;
}

a {
color:#018BC1;
}
a:hover {
text-decoration:none;
}
#header {}
#logo {
padding:30px 0 120px 0;
color:#fff;
text-align:center;
}

/* logo */
#logo a{
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:24px;
text-transform:uppercase;
}

/* Menu */
#menu {
color:#fff;
text-align:center;
}
#menu ul {
text-align:center;
list-style:none;
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a {
font-weight:bold;
font-size:14px;
text-decoration:none;
color:#fff;
background-color:#445d6c;
padding:0 10px 2px 10px;
}
#menu ul a:hover
{
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width: 440px;
margin:0 auto;
overflow:hidden;
}

/* Text */
#inside {
width: 420px;
margin:0 auto;
}
#inside p {
margin:7px 0 7px 0;
}

#inside li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
padding:5px 0 7px 150px;
text-transform:uppercase;
font-size:25px;
color:#fff;
background:url(images/h1_bckg.jpg) no-repeat;
}

/* Footer */
#footer {
background:url(images/footer_bckg.jpg) no-repeat top center;
height:102px; clear:both;
width:780px;
margin:0 auto;
}
#left_footer {
float:left;
padding:60px 0 0 30px;
color:#fff; font-size:12px;
}
#left_footer a {
color:#fff;
}
#left_footer a:hover {
text-decoration:none;
}
#right_footer {
float:right;
padding:60px 30px 0 0;
color:#fff;
font-size:12px; text-align:right;
}
#right_footer a {
color:#fff;
}
#right_footer a:hover {
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px
}

/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
.row img {
    margin: 2px;
    border: 1px solid #0000ff;
    clear: both;
    width: 100px;
    height: 90px;
    margin-left:3px;
}

.first
{
    float: right;
    text-align: center;
}

.last {
    border: 1px solid #ffffff;
    float: right;
}

.desc
{
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 10px;
}

/* image */
#image {

margin-top:1cm;
width: 400px;
margin-top:2cm;
}

/* paragraphs */
#p {
    float: left;
    margin-right: 4px;
padding-left: 20px;
    font-size:12pt;
}

/* Divider */
#div {
float: right;
width: 20px;
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}

And your HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- header -->
<div id="header">
<div id="logo"><a href="index.html">Header</a></div>
    <ul id="menu">
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Contact</a></li>
    	<li><a href="guestbook.php">Guestbook</a></li>
    </ul>
<div id="icon">
	<a href="twitter.com/">
	<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
	</a>
</div>
</div>
<!--end header -->

<!-- main -->
<div id="main">
<div id="content">
		<h1><strong>Guestbook</strong></h1>
	<div id="inside">
<table width="420" border="1" cellpadding="3" cellspacing="0">
		<tr>
		<td><strong>Guestbook</strong>
		<p>Please leave your comments.</p>
		<p>* Required field</p></td>

		</tr>
		</table>

		<table width="420" border="1" cellpadding="3" cellspacing="1" style="background-color: #000000;">
		<form id="form1" name="form1" method="post" action="test.php">  <!--addguestbook-->
		<tr>
		<td style="width: 117px;">* Name</td>
		<td style="width: 14px;">:</td>
		<td style="width: 357px;"><input name="name" type="text" id="name" size="40" /></td>
		</tr>
		<tr>
		<td valign="top">* Comment</td>
		<td valign="top">:</td>
		<td><textarea name="comment" cols="40" rows="3" id="comment"></textarea></td>
		</tr>
		<tr>
		<td> </td>
		<td> </td>
		<td><input type="submit" name="Submit" value="Submit" /> <input type="reset" name="Submit2" value="Reset" /></td>
		</tr>
		</form>
		</table>

		<table width="420" border="1" cellpadding="3" cellspacing="0">
		<tr>
		<td align="center"><strong><a href="viewguestbook.php">View Guestbook</a> </strong></td>
		</tr>
		</table>
	</div>
</div>



<!-- footer -->
<div id="footer">
<div id="left_footer">© Copyright 2011<strong> Author </strong></div>
	<div id="right_footer">
		<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
		Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>
	</div>
</div>
<!-- end footer -->
</div>
<!-- end main -->
</body>
</html>

Sign In

Formatting a table

Recommended Posts

music_fan01

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

music_fan01

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information