Jump to content

Table headers and php results arent lined up


Recommended Posts

I know its not a php issue but my figures aren't lined up with my headings. The headings are formatted as below:

 


<table width="850" border="0" cellspacing="0" cellpadding="0">
			<tr align="left">
				<td width="25"> </td>
				<td width="45" align="center">ftd</td>

				<td width="100"><a href="#">serial no.</a></td>
				<td width="333"><a href="#">product name</a></td>
				<td width="95" align="center">display order</td>
				<td width="46" align="center"><a href="#">display</a></td>
				<td width="66" align="right"><a href="#">pricet</a></td>
				<td width="30"> </td>

				<td width="110">action</td>

 

The results are formattted as below

 


<tr align="left">
<td width="33"><input type="radio" value="<?php echo $row['ProductNo'];?>" name="something" /></td>
<td width="82"><a class="black"><?php echo $row['ProductNo'];?></a></td>
<td width="61"><?php echo $row['ProductName'];?></td>
<td width="61"><?php echo $row['Display'] ;?></td>
<td width="230"><?php echo $row['Price'];?></td>
<td width="230"><input type="submit" name="submit" value="Edit" /></td>

</tr>

<?
}
?>

</table>

 

Any help would be great!!!

You list off 7 items now...

 

In your header, you need to remove the 2 empty columns:

					<td width="25"> </td>
and
				<td width="30"> </td>

 

In your body, it looks like you have a display field, but no display order field. So you need to add a field there.

 

Basically, all you need to know is the first TD in the header will be above the first TD in the body, etc. So make sure they all match up.

Ive changed things around a bit

 

<table width="850" border="0" cellspacing="0" cellpadding="0">
			<tr align="left">
				<td width="25"> </td>
				<td width="100"><a href="#">serial no.</a></td>
				<td width="333"><a href="#">product name</a></td>
				<td width="95">display order</td>
				<td width="46"><a href="#">display</a></td>
				<td width="66"><a href="#">pricet</a></td>
				<td width="30"> </td>
				<td width="110">action</td>
				</tr>

 

and

 

<tr align="left">
<td><input type="radio" value="ProductNo<?php echo $row['ProductNo']; ?>" name="something" /></td>
<td><a class="black"><?php echo $row['ProductNo'];?></a></td>
<td><?php echo $row['ProductName'];?></td>
<td>Display order results</td>
<td><?php echo $row['Display'] ;?></td>
<td><?php echo $row['Price'];?></td>
<td> </td>
<td><input type="submit" name="submit" value="Edit" /></td>
</tr>


<?
}
?>

</table>

 

The tables still arent alligned correctly. They look as follows

 

serial no.  product name  display order  display  pricet    action

1 Call of Duty 4: Modern Warfare Display order results yes 55.99  

2 Assassin's Creed Display order results yes 55.99  

5 Ace Combat 6: Fires Of Liberat Display order results yes 55.99  

3 The Simpsons Game Display order results yes 57.99  

4 Need For Speed: ProStreet Display order results yes 55.99

I've inserted a screenshot to show how my table looks now

 

The source code is:

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>e-commerce admin page sample | item</title>
<link href="../Admin_files/admin.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" src="../Admin_files/wrapper.js"></script>
</head>
<body>
<div id="Box">
  <div id="logoBox"><a href="http://www.btrax.com/" target="_blank"><img src="../Admin_files/logo.gif" width="51" height="125" border="0" /></a></div>

<div id="contentBox">

<!-- logo start -->
<div id="container">
	<div class="padTop28"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- logo finish -->



<!-- menu start -->

<div id="container">
			<div id="menu1">
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../order/new.php" class="black">order</a></div>
		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../sales/sales.php" class="black">sales</a></div>
		<div id="menu_space1"><!-- --></div>

		<div id="menu_on"><!-- --></div>
		<div id="menu_text_on"><a href="../item/list.php" class="black_on">item</a></div>
		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../shipping/current.php" class="black">shipping fee</a></div>
		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../coupon/current.php" class="black">coupon</a></div>

		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../news/list.php" class="black">news</a></div>
		<div class="clr"><!-- --></div>
	</div>
	<div class="clr"><!-- --></div>		<div class="clr"><!-- --></div>
	<div class="padTop5"><!-- --></div>
	<div class="clr"><!-- --></div>

	<div id="dotted"><!-- --></div>
	<div class="clr"><!-- --></div>
	<div class="padTop5"><!-- --></div>
	<div class="clr"><!-- --></div>
	<div id="menu2">
		<div id="menu_hide"><!-- --></div>
		<div id="menu_text_off"> </div>
		<div id="menu_space1"><!-- --></div>
		<div class="clr"><!-- --></div>
  <!-- -->

          </div>
          <div id="menu_text_on"><a href="../admin_files/list.php" class="black_on">Games</a></div>
          <div id="menu_space2">
            <!-- -->
          </div>
          <div id="menu_text_off"><a href="../admin_files/dvdlist.php" class="black">DVD</a></div>
          <div id="menu_space2">
            <!-- -->

          </div>
          <div id="menu_text_off"><a href="../admin_files/cdlist.php" class="black">CD</a></div>
          <div class="clr">
            <!-- -->
          </div>
        </div>
        <div class="clr">
          <!-- -->
<!-- menu finish -->



<!-- top start -->
<div id="container">

	<div id="line"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<div id="containerBg1">
	<div class="padTop15"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- top finish -->




<!-- data title start -->
<div id="containerBg2">
	<div class="padTop2"><!-- --></div>
	<div class="clr"><!-- --></div>
	<div class="titleBox">
		<table width="850" border="0" cellspacing="0" cellpadding="0">
			<tr align="left">
				<td width="25"> </td>
				<td width="100"><a href="#">serial no.</a></td>
				<td width="333"><a href="#">product name</a></td>
				<td width="95">display order</td>
				<td width="46"><a href="#">display</a></td>
				<td width="66"><a href="#">pricet</a></td>
				<td width="30"> </td>
				<td width="110">action</td>
				</tr>
	</div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- data title finish -->




<!-- 1px space start -->
<div id="containerBg1">
	<div class="padTop1"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- 1px space finish -->



<!-- data top start -->
<div id="containerBg3">

	<div class="padTop1"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- data top finish -->



<!-- data content start -->
<div id="containerBg4">

	<!-- data start -->
	<form method="post" action="edit.php">
<table width="850" border="0" cellspacing="0" cellpadding="0">
<?php
// let's get some data
include('adminconnect.php');
$query = "SELECT ProductNo,ProductName,Display,Price FROM Product WHERE Producttype = 'Game' ";
$result = mysql_query($query) or die (mysql_error());
while ($row = mysql_fetch_array($result)){
// loop through and display
?>

<tr align="left">
<td><input type="radio" value="ProductNo<?php echo $row['ProductNo']; ?>" name="something" /></td>
<td><a class="black"><?php echo $row['ProductNo'];?></a></td>
<td><?php echo $row['ProductName'];?></td>
<td>Display order results</td>
<td><?php echo $row['Display'] ;?></td>
<td><?php echo $row['Price'];?></td>
<td> </td>
<td><input type="submit" name="submit" value="Edit" /></td>
</tr>


<?
}
?>

</table>
</form>
	</div>



</div>
<div class="clr"><!-- --></div>
<!-- data content finish -->



<!-- data btm start -->
<div id="containerBg3">

	<div class="padTop1"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- data btm finish -->



<!-- btm start -->
<div id="containerBg1">
	<div class="padTop15"><!-- --></div>
	<div class="clr"><!-- --></div>

</div>
<div class="clr"><!-- --></div>
<div id="container">
	<div id="line"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<div class="padTop16"><!-- --></div>
<div class="clr"><!-- --></div>
<!-- btm finish -->


</div>

</div>
</body>
</html>

 

 

A table should be made like this:

 

<table>
   <tr>
      <td></td>
      // add more <td> tags for each cell
   </tr>
   <tr>
      <td></td>
      // there must be the SAME number of <td> tags here as in the last spot.
   </tr>
</table>

 

Go and count your td tags. You probably have more in between one set of tr tags than you do in the other set of tr tags.

Yeah, you have the header and footer in separate tables. You *should* have them in the same table, but if that isn't possible, try making the width attributes match up too. Looking at what you have now, that would mean copying over the width attributes from the header to the body.

I'm a little confused as to how I allign the below widths with the php output???

 

<table width="850" border="0" cellspacing="0" cellpadding="0">

<tr align="left">

<td width="25"> </td>

<td width="100"><a href="#">serial no.</a></td>

<td width="333"><a href="#">product name</a></td>

<td width="95">display order</td>

<td width="46"><a href="#">display</a></td>

<td width="66"><a href="#">pricet</a></td>

<td width="30"> </td>

<td width="110">action</td>

</tr>

As haku described. You should have all of the information (headers and data) in the same table like so:

 

<table width="850" border="0" cellspacing="0" cellpadding="0">
  <tr align="left">
    <td> </td>
    <td><a href="#">serial no.[/url]</td>
    <td><a href="#">product name[/url]</td>
    <td>display order</td>
    <td><a href="#">display[/url]</td>
    <td><a href="#">pricet[/url]</td>
    <td> </td>
    <td>action</td>
  </tr>
<?php
  while(...){
?>
  <tr align="left">
    <td><input type="radio" value="ProductNo<?php echo $row['ProductNo']; ?>" name="something" /></td>
    <td><a class="black"><?php echo $row['ProductNo'];?></a></td>
    <td><?php echo $row['ProductName'];?></td>
    <td>Display order results</td>
    <td><?php echo $row['Display'] ;?></td>
    <td><?php echo $row['Price'];?></td>
    <td> </td>
    <td><input type="submit" name="submit" value="Edit" /></td>
  </tr>
<?php
}
?>
</table>

 

This way, everything will automatically be aligned. Is this structure feasible in your script or do the tables HAVE to remain separate?

My code now looks like this

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>e-commerce admin page sample | item</title>
<link href="../Admin_files/admin.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" src="../Admin_files/wrapper.js"></script>
</head>
<body>
<div id="Box">
  <div id="logoBox"><a href="http://www.btrax.com/" target="_blank"><img src="../Admin_files/logo.gif" width="51" height="125" border="0" /></a></div>

<div id="contentBox">

<!-- logo start -->
<div id="container">
	<div class="padTop28"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- logo finish -->



<!-- menu start -->

<div id="container">
			<div id="menu1">
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../order/new.php" class="black">order</a></div>
		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../sales/sales.php" class="black">sales</a></div>
		<div id="menu_space1"><!-- --></div>

		<div id="menu_on"><!-- --></div>
		<div id="menu_text_on"><a href="../item/list.php" class="black_on">item</a></div>
		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../shipping/current.php" class="black">shipping fee</a></div>
		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../coupon/current.php" class="black">coupon</a></div>

		<div id="menu_space1"><!-- --></div>
		<div id="menu_off"><!-- --></div>
		<div id="menu_text_off"><a href="../news/list.php" class="black">news</a></div>
		<div class="clr"><!-- --></div>
	</div>
	<div class="clr"><!-- --></div>		<div class="clr"><!-- --></div>
	<div class="padTop5"><!-- --></div>
	<div class="clr"><!-- --></div>

	<div id="dotted"><!-- --></div>
	<div class="clr"><!-- --></div>
	<div class="padTop5"><!-- --></div>
	<div class="clr"><!-- --></div>
	<div id="menu2">
		<div id="menu_hide"><!-- --></div>
		<div id="menu_text_off"> </div>
		<div id="menu_space1"><!-- --></div>
		<div class="clr"><!-- --></div>
  <!-- -->

          </div>
          <div id="menu_text_on"><a href="../admin_files/list.php" class="black_on">Games</a></div>
          <div id="menu_space2">
            <!-- -->
          </div>
          <div id="menu_text_off"><a href="../admin_files/dvdlist.php" class="black">DVD</a></div>
          <div id="menu_space2">
            <!-- -->

          </div>
          <div id="menu_text_off"><a href="../admin_files/cdlist.php" class="black">CD</a></div>
          <div class="clr">
            <!-- -->
          </div>
        </div>
        <div class="clr">
          <!-- -->
<!-- menu finish -->



<!-- top start -->
<div id="container">

	<div id="line"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<div id="containerBg1">
	<div class="padTop15"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- top finish -->









<!-- 1px space start -->
<div id="containerBg1">
	<div class="padTop1"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- 1px space finish -->



<!-- data top start -->
<div id="containerBg3">

	<div class="padTop1"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- data top finish -->



<!-- data content start -->
<div id="containerBg4">

	<!-- data start -->
	<form method="post" action="edit.php">
        <table width="850" border="0" cellspacing="0" cellpadding="0">
  <tr align="left">
    <td> </td>
    <td><a href="#">serial no.[/url]</td>
    <td><a href="#">product name[/url]</td>
    <td>display order</td>
    <td><a href="#">display[/url]</td>
    <td><a href="#">pricet[/url]</td>
    <td> </td>
    <td>action</td>
  </tr>
<?php
  while(...){
?>
  <tr align="left">
    <td><input type="radio" value="ProductNo<?php echo $row['ProductNo']; ?>" name="something" /></td>
    <td><a class="black"><?php echo $row['ProductNo'];?></a></td>
    <td><?php echo $row['ProductName'];?></td>
    <td>Display order results</td>
    <td><?php echo $row['Display'] ;?></td>
    <td><?php echo $row['Price'];?></td>
    <td> </td>
    <td><input type="submit" name="submit" value="Edit" /></td>
  </tr>
<?php
}
?>
</table>



</div>
<div class="clr"><!-- --></div>
<!-- data content finish -->



<!-- data btm start -->
<div id="containerBg3">

	<div class="padTop1"><!-- --></div>
	<div class="clr"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<!-- data btm finish -->



<!-- btm start -->
<div id="containerBg1">
	<div class="padTop15"><!-- --></div>
	<div class="clr"><!-- --></div>

</div>
<div class="clr"><!-- --></div>
<div id="container">
	<div id="line"><!-- --></div>
</div>
<div class="clr"><!-- --></div>
<div class="padTop16"><!-- --></div>
<div class="clr"><!-- --></div>
<!-- btm finish -->


</div>

</div>
</body>
</html>
[code]

But im getting the error 

Parse error: syntax error, unexpected '.' in C:\xampp\htdocs\Admin_files\list.php on line 146

line 146 refers to 

<?php
  while(...){
?>

[/code]

LOL!!

 

Sorry, I've fixed that up now and inserted a screenshot. Im not really happy with the way the radio buttons look (Id rather them in the white table backgrond). Would anyone suggest putting them with a header and if so what would you lable it?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.