Table with custom borders

I'm trying to make a table similar to the following:

Here is my code:

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  wi开发者_如何学Pythondth="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Your Trun!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

But I have faced a problem when removing Your Trun! statement, the table will be like this:

How can I solve this issue?

Just use  :

<table bordercolor="#000000">
    <tr>
        <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player1 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player2 Status
        </th>
        <th  width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;">
            Player3 Status
        </th>
        <th  width="200" style="border-bottom: 2px dashed;">
            Player4 Status
        </th>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">&nbsp;</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td>
        <td width="200">Not Your Turn!</td>
    </tr>
    <tr>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td>
        <td width="200">Remaining Moves: 5</td>
    </tr>
</table>

jsFiddle: http://jsfiddle.net/Vgk2W/

css property "empty-cells:show;" may also work in more modern browsers
test: http://jsfiddle.net/Vgk2W/1/
support: http://www.quirksmode.org/css/tables.html