How to put buttons outside table, instead of in the table

  • (2 Pages)
  • +
  • 1
  • 2

27 Replies - 1545 Views - Last Post: 13 April 2015 - 10:46 AM

#1 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 05:58 AM

Hi,

Could anyone please help me as I am trying to create three buttons, however the buttons are within the table, therefore I want to have the buttons outside the table near the table on the left hand side of the table, outside the table.

cho "<table border='1'>

 <tr>
 <th>ItemName</th>
 <th>ItemImage</th>
 <th>ItemDetails</th>
 <th>RentPrice</th>                                  
 </tr>";
 

while($row = mysql_fetch_array($result))
   {
   echo "<tr>";
   echo "<td><a href='itemdetail.php?itemID=".$row['ItemID']."'>" . $row['ItemName'] . "</td>";

	
   echo "<td><a href='itemdetail.php?itemID=".$row['ItemID']."'><img src='./images/deals/".$row['ItemImage']."' width='' height='' alt=''></a></td>";
   echo "<td>" . $row['ItemDetails'] . "</td>";	
   echo "<td>" . $row['RentPrice'] . "</td>";
    echo "<td><input type='button' value='Google Map' onclick='window.location.href=<googlemap url here>'>"; 
    echo "<input type='button' value='Google Map' onclick='window.location.href=<googlemap url here>'>"; 
	echo "<input type='button' value='Google Map' onclick='window.location.href=<mailto:[email protected]?Subject=Hello%20again> target='_top''></td>"; 
	
	
   echo "</tr>";
   }
 echo "</table>";

 mysql_close($con);
 ?>


Is This A Good Question/Topic? 0
  • +

Replies To: How to put buttons outside table, instead of in the table

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4212
  • View blog
  • Posts: 13,303
  • Joined: 08-June 10

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:12 AM

Quote

I want to have the buttons outside the table near the table on the left hand side of the table

we cannot conclude that from only knowing the table. we need to know what the full HTML structure is.

Note: mailto is deprecated. it relies on the user having an MTA installed and to be willing to use his own email for sending. if you want to provide a mail contact form to the user, make a form where the user can enter the details and send it to you from your server. additionally, publishing your email address like that gets you spammed in no time.
Was This Post Helpful? 0
  • +
  • -

#3 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:14 AM

its got nothing to do with the full code, I cant paste the full code as it has confidential information in it.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4212
  • View blog
  • Posts: 13,303
  • Joined: 08-June 10

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:15 AM

then the only answer I can give is that you do it like anywhere else when you place two block elements next to each other.
Was This Post Helpful? 0
  • +
  • -

#5 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:19 AM

could you show me please

I have included an image of my website, for you to look at.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • So Smart! S-M-R-T!
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,719
  • Joined: 12-December 12

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:26 AM

The simplest way is to use CSS to remove the borders of the right column, so the buttons don't look like they are part of the table. You can do the same if the buttons appear in the left column.

This post has been edited by andrewsw: 13 April 2015 - 06:27 AM

Was This Post Helpful? 0
  • +
  • -

#7 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:36 AM

I have added a div class called buton_small.

so shall I edit the css style for this, could I use float.

andrewsw could you please advise.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • So Smart! S-M-R-T!
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,719
  • Joined: 12-December 12

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:46 AM

If you use a div for this then you'll have to store the button details until after the table is constructed. Then you would construct the div with the buttons and, yes, possibly float it to the right so that it sits beside the table. You'll have to reduce the width of the table as it occupies the full browser-width by default.

Doing it this way though, it will be very difficult to get the buttons to sit neatly next to the table-row they represent; they won't align properly.

This is why I suggest just hiding the borders.
Was This Post Helpful? 0
  • +
  • -

#9 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:50 AM

What about this, is this wahat you mean.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4212
  • View blog
  • Posts: 13,303
  • Joined: 08-June 10

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:54 AM

View Postandrewsw, on 13 April 2015 - 02:46 PM, said:

You'll have to reduce the width of the table as it occupies the full browser-width by default.

nope. see http://www.w3.org/TR...s.html#h-11.2.1 and http://www.w3.org/TR...tml#table-model
Was This Post Helpful? 1
  • +
  • -

#11 andrewsw   User is offline

  • So Smart! S-M-R-T!
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,719
  • Joined: 12-December 12

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:58 AM

Right, sorry. Don't know what I was thinking :whistling:



Strange though that it says "In the absence of any width specification, table width is determined by the user agent." but then the second link provides the algorithm for rendering the table.

Ah well ;)

This post has been edited by andrewsw: 13 April 2015 - 07:06 AM

Was This Post Helpful? 0
  • +
  • -

#12 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 06:59 AM

the table width is not a problem, as I print screened the image to make it look big, my website is the perfect size. Do you think it looks better with or without the borders. I have a div class called button_small witch I would like to turn these button in to, to make the housestyle look better. how will I be able to add css to this.
Was This Post Helpful? 0
  • +
  • -

#13 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 07:08 AM

any advise please.
Was This Post Helpful? -1
  • +
  • -

#14 andrewsw   User is offline

  • So Smart! S-M-R-T!
  • member icon

Reputation: 6578
  • View blog
  • Posts: 26,719
  • Joined: 12-December 12

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 07:12 AM

Following Dormilich 's correction, you might float the table to the left so that the div sits next to it. I will reiterate though, that the buttons won't align neatly with the table rows if you take this approach, without some effort.

View Postjohn_1993, on 13 April 2015 - 02:08 PM, said:

any advise please.

Do not bump your post after 8 minutes, this is a volunteer forum.
Was This Post Helpful? 0
  • +
  • -

#15 john_1993   User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 148
  • Joined: 16-March 15

Re: How to put buttons outside table, instead of in the table

Posted 13 April 2015 - 07:29 AM

If I want to make the buttons match my css style button which is called button_small, what will I need to do?,


I have tried to put in input id= or name =, however the button is still the default button.

echo "<input id='button_normal'name='button_small' type='button' value='Google Map' onclick='window.location.href=<mailto:[email protected]?Subject=Hello%20again> target='_top''></td>"; 

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2