CODEWITHSUNDEEP
htmlcss
BaBazinga
BaBazinga

Reputation: 159

Centering input buttons inside a table

So the table is centered perfectly. However the td tags aren't correctly. I want the input button to all be centered without any space in between. I have td align center but nothing seems to be working. 

<html>
<head>
<title>BuyRite Liquor Store - English Town Road (Old Bridge, NJ)</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>




</head>
<body>

	<table align ="center">		
		
	<form> 
		
		<tr width = "100%">
			<td align="center"><input type="text" id = "input" name = "dbname" placeholder="Database Name"></td>
			<td align="center"><input type="text" id = "input" name = "tblname" placeholder="Table Name"></td>
		</tr>
		
		<tr>
			<td align="center"><input class= "button2-link" type="submit" name="createDB" value="Create Database"></td>	
			<td align="center"><input class= "button2-link" type="submit" name="deleteDB" value="Delete Database"></td>
		</tr>			
		
		<tr>
			<td align="center" width="1px"><input class= "button2-link" type="submit" name="createTBL" value="Create Table"></td> 
			<td align="center" width="1px"><input class= "button2-link" type="submit" name="emptyTBL" value="Empty Table"></td> 
			<td align="center" width="1px"><input class= "button2-link" type="submit" name="deleteTBL" value="Delete Table"></td> 
		</tr>
	
	</table>
	</form>
	
	

</body> 
</html>

Upvotes: 2

Views: 2251

Answers (2)

David
David

Reputation: 3194

To answer your question the input elements are given a default padding by the browser - In chrome this is 1px, and a border, in chrome this is also around the 1px mark.

To remove the border I've added in a <style> element that explicitly specifies that any <input>'s which are children of <td> elements will have padding of 0px. I gave the two inputs you are referring to a class of .input so that the styles don't get applied elsewhere.

See the JS fiddle here: http://jsfiddle.net/cmmvn9dd/1/

<html>
<head>
<title>BuyRite Liquor Store - English Town Road (Old Bridge, NJ)</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<style>

td input {
  padding:0px;
}

</style>


</head>
<body>

  <table align ="center">       

  <form> 

    <tr width = "100%">
      <td align="center"><input type="text" class="input" name = "dbname" placeholder="Database Name"></td>
      <td align="center"><input type="text"  class="input" name = "tblname" placeholder="Table Name"></td>
    </tr>

    <tr>
      <td align="center"><input class= "button2-link" type="submit" name="createDB" value="Create Database"></td>   
      <td align="center"><input class= "button2-link" type="submit" name="deleteDB" value="Delete Database"></td>
    </tr>           

    <tr>
      <td align="center" width="1px"><input class= "button2-link" type="submit" name="createTBL" value="Create Table"></td> 
      <td align="center" width="1px"><input class= "button2-link" type="submit" name="emptyTBL" value="Empty Table"></td> 
      <td align="center" width="1px"><input class= "button2-link" type="submit" name="deleteTBL" value="Delete Table"></td> 
    </tr>

  </table>
  </form>



</body>  
</html>

Upvotes: 0

whoacowboy
whoacowboy

Reputation: 7447

The buttons are centered in your <td> tags. If you put all the buttons you would like into one td, they will all be centered.

See the JSBin.

<html>
  <head>
    <title>BuyRite Liquor Store - English Town Road (Old Bridge, NJ)</title>
  </head>
  <body>
    <form> 
      <table align="center">   
        <tr width="100%">
          <td align="center">
            <input type="text" id="input" name="dbname" placeholder="Database Name">
            <input type="text" id="input" name="tblname" placeholder="Table Name">
          </td>
        </tr>
        <tr>
          <td align="center">
            <input class="btnCreateDB" type="submit" name="createDB" value="Create Database">
            <input class="btnDeleteDB" type="submit" name="deleteDB" value="Delete Database">
          </td>
        </tr>     
        <tr>
          <td align="center" width="1px">
            <input class="btnCreateTable" type="submit" name="createTBL" value="Create Table">
            <input class="btnEmptyTable" type="submit" name="emptyTBL" value="Empty Table">
            <input class="btnDeleteTable" type="submit" name="deleteTBL" value="Delete Table">
          </td> 
        </tr>
      </table>
    </form>
  </body> 
</html>

Upvotes: 1

Related Questions