Table CSS Issue

I have this in HTML:

<div class="dataBurst" title="What is the Matrix?">
    <table align="center" height="100%">
        <tr>
            <td id="matrixTD">
                <span onclick="alert('Not Yet Online');" class="coredump" 
                    title="How Would You Know the Difference Between the Dream World And the Real World?">
                    Click for System Core Dump
                </span>
            </td>
        </tr>
    <开发者_如何学C/table>
</div>

The CSS I'm using:

div.dataBurst
{
    vertical-align:middle;
    width:500px;
    height:321px;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    padding:5px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
}


td#matrixTD
{
    text-align:justify;
    cursor:default; 
}

The issue is when I try to create a class/id using: <table align="center" height="100%">, it does not work; how can I implement this?

my site is at: http://guygar.com

After think about it for a while I think I slowly get what you are after: You want to vertically align the text "Click for System Core Dump" inside the div #dataBurst

I think you are thinking too complicate here. There is no real need to actually vertical align anything here, just give the div big top and bottom paddings:

<div class="dataBurst" title="What is the Matrix?" onclick="alert('Not Yet Online');">
     Click for System Core Dump
</div>

div.dataBurst {
    /* vertical-align:middle; -- not needed  */
    width:500px;
    padding: 150px 5px; /* First value is top/bottom, second is left/right. Adjust as neeeded. Replaces height:321px; */
    background-color:#FFF;
    text-align: center; /* replaces margin-left:auto; margin-right:auto; because you are centering inline text here. */
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    /* 
       Remove following, since there is not overflow happening here anyway,
       so the scrollbar properties also become unnecessary - and wont work 
       like this in newer IE's anyway, as they require the -ms- prefix.

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
    */
}

Also you need to decide which title you really want. I've removed the inner one, because it's probably overridden by the outer one anyway.

This works. The HTML:

<div class="dataBurst" title="What is the Matrix?">
    <table id="table">
        <tr>
            <td id="matrixTD">
                <span onclick="alert('Not Yet Online');" class="coredump" 
                    title="How Would You Know the Difference Between the Dream World And the Real World?">
                    Click for System Core Dump
                </span>
            </td>
        </tr>
    </table>
</div>

And the CSS:

div.dataBurst {
    vertical-align:middle;
    width:500px;
    height:321px;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    border-width:1px;
    border-style:solid;
    margin-bottom:20px;
    padding:5px;
    float:left;
    cursor:pointer;
    cursor:default;
    font-weight:normal;
    font-size:9px;

    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;

    scrollbar-base-color:#575757;
    scrollbar-3dlight-color:#a6a6a6;
    scrollbar-track-color: #a6a6a6;
}

table#table
{ 
    margin: 0 auto; height: 100%; 

}

td#matrixTD
{
    text-align:justify!important;
    cursor:default; 
}

And you should delete cursor: default; take a look here (only IE 5.5 is not supporting cursor: pointer; but nobody is using it anymore.): http://www.quirksmode.org/css/cursor.html#t09

I am not sure, but you want to move the attributes of table align="center" height="100%" to css? If yes then you have to delete this attributes from the table and add a class like this <table class="mytable"> when you do this, then in your css file you add the following rule

.mytable  {
    height: 100%;
    width: auto;
    margin: 0 auto;
}

you can change the class name in any name that you like (in html and css also).