Jump to content

Trouble with centering table data ?


vmars316
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Still trouble with <> code , try this :

 

 

<!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: #992D2D; height: 24px; width: 800px; border: none; }
button {font-size: 16px;}
</style>
</head>
<body onload="Game.start()" onresize="onScrnResize()">
<div>
<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>
<br><br>
<button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button>
<br><br>
<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 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>
Edited by vmars316
Link to comment
Share on other sites

<!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; }


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


button {font-size: 16px;}

</style>

</head>

<body onload="Game.start()" onresize="onScrnResize()">

<div>

<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>

<!-- <br><br> -->

<div id="buttonsArea">

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

<br><br>

<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>

<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>

</body>

</html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...