Trouble with centering table data ?

vmars316 · October 19, 2016

Hello & Thanks ;

<!DOCTYPE html>
<html>
-<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta charset="utf-8" />
<title>Debug Hillary Only</title>
<!-- 

-->
<style>
			#assets { height: 0px; overflow: hidden; visibility: hidden; width: 0px; }

			body { 	background-color: Black; margin: 0; overflow: hidden; padding: 0; }

			canvas { cursor: none;  }
			
			table { color: #E1E1E1; background-color: #732222; height: 24px; width: 600px; border: none; }
			
            button {font-size: 16px;}
</style>
</head>
<body onload="Game.start()" onresize="onScrnResize()">
<div id="table1">	
<table align="center">
  <tr>
    <td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td>
    <td width="5%"></td>
    <td width="10%"> Good Hits</td> <td id="GoodHitz" width="5%"> </td>
    <td width="8%"></td>
    <td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td>	
  </tr>
   </table>
</div>	
	<div id="canvasDiv" align="center" >
        <canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas> 
	</div>
	<div id="table2" align="center" > 
	  <table align="center">
      <tr align="center">
        <td><button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button> </td>
      </tr>
      <tr align="center">	  
        <td><button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button> </td>  
        <td><button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button> </td>
        <td><button onclick="clearIt()" ontouchstart="clearIt()">Clear</button> </td>
        <td><button onclick="quitIt()" ontouchstart="quitIt()">Quit</button> </td>
      </tr>  
      </table>
    </div>
	<div id="assets" >
			<img id="lie02" src="sprites/lies02.png" width="64" height="64" />
			<img id="cowpie" src="sprites/cowpie.png" width="32" height="32" />
			<img id="thrower" src="sprites/thrower.png" width="64" height="64" />
    </div>			
<script type='text/javascript'>
//
</script>
</body>
</html>

I am Trouble with centering table data :

Pls, what am I doing wrong ?

Above is my code :

Thanks

Ingolme · October 19, 2016

You need CSS. This is a very general rule, but it will work:

table, th, td {
  text-align: center;
}

The align attribute is deprecated and shouldn't be used.

vmars316 · October 19, 2016

Hmm..

THis sort of worked .

<!DOCTYPE html>
<html>
-<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta charset="utf-8" />
<title>Debug Hillary Only</title>
<!-- 

-->
<style>
			#assets { height: 0px; overflow: hidden; visibility: hidden; width: 0px; }

			body { 	background-color: Black; margin: 0; overflow: hidden; padding: 0; }

			canvas { cursor: none;  }
			
			table, th, tr, td { color: #E1E1E1; background-color: #732222; height: 24px; width: 600px; border: none;
			              text-align: center;}
			
            button {font-size: 16px;}
</style>
</head>
<body onload="Game.start()" onresize="onScrnResize()">
<div id="table1" align="center">	
<table align="center">
  <tr>
    <td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td>
    <td width="5%"></td>
    <td width="10%"> Good Hits</td> <td id="GoodHitz" width="5%"> </td>
    <td width="8%"></td>
    <td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td>	
  </tr>
   </table>
</div>	
	<div id="canvasDiv" align="center" >
        <canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas> 
	</div>
	<div id="table2" align="center" > 
	  <table align="center">
      <tr>
        <td><button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button> </td>
      </tr>
      <tr align="center">	  
        <td><button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button> </td>  
        <td><button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button> </td>
        <td><button onclick="clearIt()" ontouchstart="clearIt()">Clear</button> </td>
        <td><button onclick="quitIt()" ontouchstart="quitIt()">Quit</button> </td>
      </tr>  
      </table>
    </div>
	<div id="assets" >
			<img id="lie02" src="sprites/lies02.png" width="64" height="64" />
			<img id="cowpie" src="sprites/cowpie.png" width="32" height="32" />
			<img id="thrower" src="sprites/thrower.png" width="64" height="64" />
    </div>			
<script type='text/javascript'>
//
</script>
</body>
</html>

This is what I had originally , but I wanted to change colors in top & bottom rectangles .

Thanks

vmars316 · October 19, 2016

Trouble with <> code .

vmars316 · October 19, 2016

Still trouble with <> code , try this :

<!DOCTYPE html>

<html>

-<head>

<title>Debug Hillary Only</title>

http://vmars.us/javascript/GameObject.html

-->

<style>

#assets { height: 0px; overflow: hidden; visibility: hidden; width: 0px; }

body { background-color: Black; margin: 0; overflow: hidden; padding: 0; }

canvas { cursor: none; }

table { color: #E1E1E1; background-color: #992D2D; height: 24px; width: 800px; border: none; }

button {font-size: 16px;}

</style>

</head>

<div>

<tr>

<td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td>

<td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td>

</tr>

</table>

</div>

<button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button>

<button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button>

__ <button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button>

__ <button onclick="clearIt()" ontouchstart="clearIt()">Clear</button>

__ <button onclick="quitIt()" ontouchstart="quitIt()">Quit</button>

</div>

</div>

//

</script>

</body>

</html>

Edited October 19, 2016 by vmars316

vmars316 · October 20, 2016

Thanks

This is working ok .

.

I forgot I needed to reference id="buttonsArea" as #buttonsArea .

Thanks

vmars316 · October 20, 2016

vmars316 · October 20, 2016

<!DOCTYPE html>

<html>

-<head>

<title>Debug Hillary Only</title>

http://vmars.us/javascript/GameObject.html

-->

<style>

#assets { height: 0px; overflow: hidden; visibility: hidden; width: 0px; }

body { background-color: Black; margin: 0; overflow: hidden; padding: 0; }

canvas { cursor: none; }

table { color: #E1E1E1; background-color: #732222; height: 24px; width: 600px; border: none; }

#buttonsArea { color: #E1E1E1; background-color: #732222; width: 600px; border: none; }

button {font-size: 16px;}

</style>

</head>

<div>

<tr>

<td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td>

<td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td>

</tr>

</table>

</div>

<button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button>

<button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button>

__ <button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button>

__ <button onclick="clearIt()" ontouchstart="clearIt()">Clear</button>

__ <button onclick="quitIt()" ontouchstart="quitIt()">Quit</button>

</div>

</div>

</body>

</html>

Sign In

Trouble with centering table data ?

Recommended Posts

vmars316

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity