Table Border in HTML/CSS

I am creating a table in HTML and trying to assign the cells a border. Here is how it appears.

See that weird border in 2nd row, last cell. That's the problem I am having.

<table class="info">
    <tbody>
        <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
        </tr>
        <tr>
            <td><span>0</span></td>
            <td><span>0</span></td>
            <td><span>0</span></td>
            <td><span>0</span></td>
        </tr>
        <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
        </tr>
        <tr>
            <td><span>0</span></td>
            <td><span>0</span></td>
            <td><span>0</span></td>
        开发者_开发技巧    <td><span>0</span></td>
        </tr>
        <tr>
            <td>Some text</td>
            <td>Some text</td>
        </tr>
        <tr>
            <td><span>0</span></td>
            <td><span>0</span></td>
        </tr>
    </tbody>
</table>

Here's my css....

table.info {
    width: 100%;
    text-align: center;
}

table.info td {
    background: #fff;
    border: 2px solid #ccc;
    text-align: center;
}

What am I doing wrong over here?

UPDATE - I checked the css being inherited and I found this...

table {
  border-collapse:collapse;
  border-spacing:0;
}

Your HTML is not correct. Either you must have equal no. of TDs in your each row or you can match markup by using rowspan/colspan.

for the last 2 rows make a cell with colspan=2..something like this:

<tr>
      <td><span>0</span></td>
      <td><span>0</span></td>
      <td colspan="2"></td>
  </tr>

Maybe this will help:

(HTML)

<table class="info">
  <tbody>
      <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
      </tr>
      <tr>
          <td><span>0</span></td>
          <td><span>0</span></td>
          <td><span>0</span></td>
          <td><span>0</span></td>
      </tr>
      <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
      </tr>
      <tr>
          <td><span>0</span></td>
          <td><span>0</span></td>
          <td><span>0</span></td>
          <td><span>0</span></td>
      </tr>
      <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td colspan="2" class="empty">&nbsp;</td>
      </tr>
      <tr>
          <td><span>0</span></td>
          <td><span>0</span></td>
          <td colspan="2" class="empty">&nbsp;</td>
      </tr>
  </tbody>

(CSS)

table.info {
    width: 100%;
    text-align: center;
}

table.info td {
    background: #fff;
    border: 2px solid #ccc;
    text-align: center;
}

table.info .empty {
  border:none;
}

ok i have tested it .. and it's not working on firefox.. but chrome and ie allow you to use tables with different numbers of columns on each row... as @chinmayee said, its not correct to do that, cause tables are only used to represent tabular data.. i'd sugest you to change your html and use divs with float to obtain the effect that you want..

good luck