If you want to show it in a webviewer, then you would need to add some html/css to make the background black and the text white. You will probably need to get the data using the web component, then feed this to an html page using the webviewstring.
On second thoughts, there may be a way to inject some css to the existing html using the javascript DOM. I would have to do some code finding and testing to see if this works.
there's a problem where the table wont show up after I press the show work button, but if I press the textbox and my keyboard pops up.then the table will finally show up. How to do make it show up immediately upon pressing the button
For centring, add this to your javascript, below the other settings for "nodes"
This will make the table fill the webviewer width. You can then decrease the width of the webviewer in the designer to suit your requirements (and set the Screen to centred)
I am not sure why you are having to click the button twice...