Table Alingments in the webpage

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
shehan31
Forum Commoner
Posts: 59
Joined: Sun Aug 29, 2010 5:24 am

Table Alingments in the webpage

Post by shehan31 »

hi all;
I have been struggling to alighn the bottom table next to the first table which consist stockhistory etc.. Also it has to be under the transaction description. I have tried valign, vspace but couden't move.
does someone have any soloution to this. Please refer the attachment.
thank you. :)
Attachments
company.jpg
company.jpg (97.45 KiB) Viewed 4107 times
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Table Alingments in the webpage

Post by mecha_godzilla »

Hi,

Can you post your code please? Because this is more of a page layout issue than a PHP one, you might get a better response if you post this question to the HTML/CSS forum:

viewforum.php?f=68

Alternatively, a moderator might be able to move it for you :)

HTH,

Mecha Godzilla
shehan31
Forum Commoner
Posts: 59
Joined: Sun Aug 29, 2010 5:24 am

Re: Table Alingments in the webpage

Post by shehan31 »

mecha_godzilla wrote:Hi,

Can you post your code please? Because this is more of a page layout issue than a PHP one, you might get a better response if you post this question to the HTML/CSS forum:

viewforum.php?f=68

Alternatively, a moderator might be able to move it for you :)

HTH,

Mecha Godzilla

Code: Select all

<?php include("C:\wamp\www\guestbook\password_protect.php");?> 
<html>

<right>
<a href="http://127.0.0.1/guestbook.php/?logout=1"><font SIZE=3 face = arial  ><b>Logout</b></font></a>
</right>



</html>


<?php

/*echo "<a href=\"void.php?id=", $row['id']."\"><font SIZE = 3 FACE = arial align = right> <b>Void Here </b></font></a> </t>";

echo "<a href=\"stockcontrol.php?id=", $row['id']."\"><font SIZE = 3 FACE = arial align = right> Received Stocks </font></a> <span></span>";
echo "<span></span>";
echo "<a href=\"stockhistoryl.php? \"><font SIZE = 3 FACE = arial align = right> Stock History </font></a>"; */
echo"<hr> </hr>";



$dir = "www/";
if ($opendir= opendir($dir))
{
    while (($file = readdir($opendir)) !== FALSE) {
     if ($file!="."&&$file!=".."){
         
     
     echo "<img src='$dir/$file'height=100px width = 300px border = 4>";
     
     echo "<font SIZE = 7 width:40px FACE = Harlow Solid Italic > The Company</font>"; 
     
    }    
    }
}
echo "<hr></hr>";

 
/*
echo "
<center>
<table width = 700% border = 3% > </table>
<tr> 
<td>

</td> 
<td>
<font SIZE = 10 FACE = Harlow Solid Italic WIDTH=200PX> kiwi Nova (Pvt) LTD </font>
</td>
</tr>
</table>
</center>";
*/

echo "
<center>
<font SIZE = 6 ALIGN = centre valign = top> Transaction Description </font>
</center></p>";




//Connection to the data base.
$connect = mysql_connect ("localhost","root","") or die ("error");
mysql_select_db ("guestbook") or die ("eroor connecting Database");

$queryget = mysql_query ("select * from report ORDER BY Transaction_Number DESC LIMIT 5" ) or die (" error with table");


 //this while loop will get the information from the data base and it will be displayed on the web interface.
   
/* 
 // to get the summation of the parameter weight.
 $query = "SELECT  SUM(Weight) FROM report  "; 
     
$result = mysql_query($query) or die(mysql_error());

// Print out result
while($row = mysql_fetch_array($result)){
    echo "Total ".  $row['SUM(Weight)'];
    echo "<br />";
}
*/
// this will post the input data into the data base.
if (isset($_POST['submit1']))
   { 
   
   $Customername = $_POST['Customer_name'];
   $Transaction_Number = $_POST['Transaction_Number'];
   $Price = $_POST['Price'];
   $Weight = $_POST['Weight'];
   $date = date("Y-m-d");
   $time = date("H:i:s");
   $status = 'Completed'; // this is to indicate that the transaction has done.
   
   
    if ($Customername&&$Transaction_Number&&$Price&&$Weight )
    {
     $querypost = mysql_query (" INSERT INTO report VALUES ('','$Customername', '$Transaction_Number', '$Price', '$Weight','$date','$time','$status')");    
    
     echo "Please wait... <meta http-equiv='refresh' content='4'>";
    }        
 else 
 echo " fill out all fileds";
 }
 
// when the operator clicked the void button on the web interface,that perticular transaction has to be marked as cancel.this part is not working for it.
echo" 
<span>

<table width= '18 %' border = '3px'>
   <tr>
        <td bgcolor='#FFFFCC'>
         <a href=\"stockcontrol.php?id=", $row['id']."\"><font SIZE = 3 FACE = arial align = left> Stock Details & control </font></a> 
        </td>
        
   </tr>
     <tr>
        <td bgcolor='#FFFFCC'>
         <a href=\"stockcontrol.php?id=", $row['id']."\"><font SIZE = 3 FACE = arial align = right> Received Stocks </font></a>
        </td>
        
   </tr>
     <tr>
        <td bgcolor='#FFFFCC'>
          <a href=\"stockhistory.php? \"><font SIZE = 3 FACE = arial align = right> Stock History </font></a>
        </td>
        
   </tr>
   <tr>
   <td bgcolor='#FFFFCC'>
   <a href=\"void.php?id=" . $row['id']. "\"><font SIZE = 3 FACE = arial align = right> Update Ttransactions </font></a>
   </td>
   </tr>
   

 </span>
 </table> 




<form action='guestbook.php' method='POST' >
<table width= '35 %' border = '3px' align = 'center' valign = 10>
   <tr>
        <td>
         <font SIZE = 5 FACE = times new roman>Customer name</font>
        </td>
        <td>
        <input type='text' name='Customer_name' maxlength='30'>
        </td>
   </tr>
   <tr>
        <td>
        <font SIZE = 5 FACE = times new roman>Transaction Number</font>
        </td>
        <td>
        <input type='int' name='Transaction_Number' maxlength='25'>
        </td>
   </tr>
   <tr>
        <td>
        <font SIZE = 5 FACE = times new roman>Price</font> 
        </td>
        <td>
        <input type='int' name='Price' maxlength='25'>
        </td>
   </tr>
   <tr>
        <td valign='top'>
       <font SIZE = 5 FACE = times new roman>Weight</font>
        <td>        
        <input type='int' name='Weight' maxlength='25'>
        
        
        </td>
   </tr>
   </table>
   <p>
       <center>
        <input type='submit' name='submit1'  value='Confirm'>
       </center>
        </form>
        
        
    
        
        "
?>


Thank you for your reply.
This is my code. I am new to PHP.
thank you
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Table Alingments in the webpage

Post by mecha_godzilla »

Hi again,

I'm not sure where you got that code from but it looks very old :) You'd be better to set the page up first in Dreamweaver or Kompozer, then add it to your PHP script.

The problems with the HTML are:

1. Your closing </html> tag should be at the end of the script. Also, you don't have any <head></head> or <body><body> tags in there. The normal way to structure pages would be:

Code: Select all

<html>
    <head>
        <title>My Page Title</title>
    </head>
    <body>
        <p>Content goes here</p>
    </body>
</html>
2. The reason why the 'Customer name' table is centred is because this table has an attribute in the <table> tag of align = 'center' - you can either remove this attribute or change it to align='left' if you want.

3. If you want the 'Confirm' button to appear underneath the tables then you need to remove the <center></center> tags that surround the submit button, duplicate one of the table rows in the table and edit it so it looks like this:

Code: Select all

<tr>
<td align='center' valign='top' colspan='2'>
<input type='submit' name='submit1'  value='Confirm'>
</td>
</tr>
</table>
The reason why I say the code looks old is that you've got an awful lot of <font></font> tags in there - there's really no need to use this kind of markup as CSS makes pages much quicker (and simpler) to layout. Also, most sites have moved over to table-less layouts now - tables were only ever used to style pages because of the lack of CSS support in older browsers. You don't *have* to do this of course but it will make it much easier for you to maintain your pages.

If you need any more help please say so, and if you want to learn more about HTML or CSS I'd recommend you look at the tutorials on the w3schools site:

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

HTH,

Mecha Godzilla
shehan31
Forum Commoner
Posts: 59
Joined: Sun Aug 29, 2010 5:24 am

Re: Table Alingments in the webpage

Post by shehan31 »

mecha_godzilla wrote:align='center' valign='top' colspan='2'
Hi Godzilla;
I appriciate your support and thank you. The alterations have made but its not working. Please see the attachment. Becuase I am vermuch new to the subject, I tend to follw the online tutorials. Ex: I want to put some graphical effects to this web page with PHP but I find hard to install GD.
Thanking you
shehan31
Attachments
thisis.jpg
thisis.jpg (106.12 KiB) Viewed 4089 times
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Table Alingments in the webpage

Post by mecha_godzilla »

Hi,

You can't really do what you want with the code you've got because tables can't really be displayed side-by-side. Technically they're block elements, which means that when you place one table after another it's as if a <br> was added after them - like with paragraphs.

Your options are to either create one main table that can store the 'Stock details' and 'Customer name' tables in individual cells, or you need to start looking at using CSS.

Here's how to do it with tables...

Code: Select all

<table width='100%' border='3'>

    <tr>
        <td align='left' valign='top'>
        
            <table width='100' border='2'>
                <tr>
                    <td bgcolor='red' align='left' valign='top'>
                        First Table
                    </td>
                </tr>
            </table>
        
        </td>

        <td align='left' valign='top'>
        
            <table width='100' border='2'>
                <tr>
                    <td bgcolor='green' align='left' valign='top'>
                        Second Table
                    </td>
                </tr>
            </table>
        
        </td>
    </tr>
        
</table>
...and with CSS...

Code: Select all

<div id='first_table' style='float: left; width: 200px;'>
        
<table width='100' border='2'>
    <tr>
        <td bgcolor='red' align='left' valign='top'>
            First Table
        </td>
    </tr>
</table>
        
</div>

<div id='second_table' style='float: left; width: 200px;'>
  
<table width='100' border='2'>
    <tr>
        <td bgcolor='green' align='left' valign='top'>
            Second Table
        </td>
    </tr>
</table>

</div>

<div style='clear: both'></div>
The last <div></div> tag is important because it makes sure that any other content appears underneath the two layers rather than next to them.

HTH,

M_G
shehan31
Forum Commoner
Posts: 59
Joined: Sun Aug 29, 2010 5:24 am

Re: Table Alingments in the webpage

Post by shehan31 »

HI M_G
thank you for your reply. I will try CSS and will it work in this php script?
mecha_godzilla wrote:Hi,

You can't really do what you want with the code you've got because tables can't really be displayed side-by-side. Technically they're block elements, which means that when you place one table after another it's as if a <br> was added after them - like with paragraphs.

Your options are to either create one main table that can store the 'Stock details' and 'Customer name' tables in individual cells, or you need to start looking at using CSS.

Here's how to do it with tables...

Code: Select all

<table width='100%' border='3'>

    <tr>
        <td align='left' valign='top'>
        
            <table width='100' border='2'>
                <tr>
                    <td bgcolor='red' align='left' valign='top'>
                        First Table
                    </td>
                </tr>
            </table>
        
        </td>

        <td align='left' valign='top'>
        
            <table width='100' border='2'>
                <tr>
                    <td bgcolor='green' align='left' valign='top'>
                        Second Table
                    </td>
                </tr>
            </table>
        
        </td>
    </tr>
        
</table>
...and with CSS...

Code: Select all

<div id='first_table' style='float: left; width: 200px;'>
        
<table width='100' border='2'>
    <tr>
        <td bgcolor='red' align='left' valign='top'>
            First Table
        </td>
    </tr>
</table>
        
</div>

<div id='second_table' style='float: left; width: 200px;'>
  
<table width='100' border='2'>
    <tr>
        <td bgcolor='green' align='left' valign='top'>
            Second Table
        </td>
    </tr>
</table>

</div>

<div style='clear: both'></div>
The last <div></div> tag is important because it makes sure that any other content appears underneath the two layers rather than next to them.

HTH,

M_G
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Table Alingments in the webpage

Post by mecha_godzilla »

Hi,

The CSS example that I posted should work without any problems - the CSS code is embedded in the HTML tags so you don't need to attach a separate stylesheet. To make sure it works, I suggest you create the page as an HTML document initially - if it looks correct then you can just add the code to your PHP script.

If you're still having problems I can write the script for you but it's obviously better for you to do this yourself so you'll be able to understand how it all works.

HTH,

M_G
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Table Alingments in the webpage

Post by John Cartwright »

Moved to HTML, CSS and other UI Design Technologies.
shehan31
Forum Commoner
Posts: 59
Joined: Sun Aug 29, 2010 5:24 am

Re: Table Alingments in the webpage

Post by shehan31 »

Hi Mecha Godzilla;
Thank you for your reply. I will try this. These days I am working for report generating with FPDF. After completing that I will revert back to this topic.
Thanking you
Shehan31
mecha_godzilla wrote:Hi,

The CSS example that I posted should work without any problems - the CSS code is embedded in the HTML tags so you don't need to attach a separate stylesheet. To make sure it works, I suggest you create the page as an HTML document initially - if it looks correct then you can just add the code to your PHP script.

If you're still having problems I can write the script for you but it's obviously better for you to do this yourself so you'll be able to understand how it all works.

HTH,

M_G
Post Reply