Ur top Column has 4 td ( 2 x 2 Colspan ) ; ur Head has Colspan "3" not 4. ur 3rd row has colspan 3 again. and the last row where the error is has 3 cols total. and u didnt set the padding OK.
I did the Code below for u already. i also inserted the missing CSS and fixed the tableerrors for u. Ur welcome :D
* { margin: 0px; padding: 0px; outline: 0; box-sizing: border-box; }
body {
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
line-height: 1.667;
font-weight: normal;
color: #585858;
}
.container { width: 960px; margin: 0 auto; padding: 40px 20px; }
.outer-table { width: 701px; margin: 0 auto; display: block; }
table { border-collapse: collapse; }
table,
table tr,
table th,
table td { border: 1px solid #9d9d9d;}
.text-header { font-family: "Georgia", sans-serif; font-size: 17px; line-height: 21px; font-weight: normal; color: #2c2c2c; padding: 8px 14px; text-align: left; background: #d0d0d0; }
.inner-table tr td { width: 281px; line-height:33px; text-align:center;text-decoration:none;}
.inner-table tr td a {text-decoration:none; color: grey;width;100%;height:100%;display:block;}
.inner-table tr td a:hover {text-decoration:none; color: white;background:black;}
.grey { background:#e6e6e6;}
.padding-table { padding: 15px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html vs psd</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<table class="outer-table">
<thead>
<tr>
<th colspan="4" class="text-header">Cras id leo non nisi semper ultrices a sit amet lectus</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="padding-table">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus mollis metus, a imperdiet mauris dapibus ac. Phasellus nec adipiscing nulla. Aliquam sit amet malesuada lorem. Praesent erat lorem, hendrerit ac vehicula pellentesque, tristique quis quam. Suspendisse at ligula enim. Cras id leo non nisi semper ultrices a sit amet lectus.
</td>
<td colspan="2" valign="top">
<table class="inner-table">
<tr>
<td class="grey"><a href="#">1</a></td>
<td class="grey"><a href="#">2</a></td>
<td class="grey"><a href="#">3</a></td>
<td class="grey"><a href="#">4</a></td>
<td class="grey"><a href="#">5</a></td>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
</tr>
<tr>
<td class="grey"><a href="#">8</a></td>
<td class="grey"><a href="#">9</a></td>
<td class="grey"><a href="#">10</a></td>
<td class="grey"><a href="#">11</a></td>
<td class="grey"><a href="#">12</a></td>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
</tr>
<tr>
<td class="grey"><a href="#">15</a></td>
<td class="grey"><a href="#">16</a></td>
<td class="grey"><a href="#">17</a></td>
<td class="grey"><a href="#">18</a></td>
<td class="grey"><a href="#">19</a></td>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
</tr>
<tr>
<td class="grey"><a href="#">22</a></td>
<td class="grey"><a href="#">23</a></td>
<td class="grey"><a href="#">24</a></td>
<td class="grey"><a href="#">25</a></td>
<td class="grey"><a href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
</tr>
<tr>
<td class="grey"><a href="#">29</a></td>
<td class="grey"><a href="#">30</a></td>
<td class="grey"><a href="#">31</a></td>
<td class="grey"></td>
<td class="grey"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" class="padding-table" style="background: #d0d0d0;">
Phasellus nec adipiscing nulla. Aliquam sit amet malesuada lorem. Praesent erat lorem, hendrerit ac vehicula pellentesque, tristique quis quam.
</td>
</tr>
<tr>
<td colspan="1" width="1" class="padding-table">
<b>Suspendisse</b>
</td>
<td colspan="3" valign="top" class="padding-table">
Praesent erat lorem, hendrerit ac vehicula pellentesque, tristique quis quam. Suspendisse at ligula enim. Cras id leo non nisi semper ultrices a sit amet lectus.
</td>
</tr>
</tbody>
</table>
</div><!-- /.container -->
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
