vmars316 Posted October 19, 2016 Share Posted 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 Link to comment Share on other sites More sharing options...
Ingolme Posted October 19, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
vmars316 Posted October 19, 2016 Author Share Posted 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 Link to comment Share on other sites More sharing options...
vmars316 Posted October 19, 2016 Author Share Posted October 19, 2016 Trouble with <> code . Link to comment Share on other sites More sharing options...
vmars316 Posted October 19, 2016 Author Share Posted October 19, 2016 (edited) 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> 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> <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 October 19, 2016 by vmars316 Link to comment Share on other sites More sharing options...
vmars316 Posted October 20, 2016 Author Share Posted October 20, 2016 Thanks This is working ok . . I forgot I needed to reference id="buttonsArea" as #buttonsArea . Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted October 20, 2016 Author Share Posted October 20, 2016 Link to comment Share on other sites More sharing options...
vmars316 Posted October 20, 2016 Author Share Posted October 20, 2016 <!DOCTYPE html> <html> -<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <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> <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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now