
<html>
<head>
<style type="text/css">
table { border: medium solid red; border-collapse: separate; }
td { border: thin solid blue; vertical-align: middle; height: 50px; text-align: center; border-collapse: collapse; }
th { border: thin solid aqua; vertical-align: middle; height: 50px; text-align: center; border-collapse: collapse; }
</style>
</head>
<body>
<p>todo this has different behavior between word and IE</p>
<table>
    <caption>This is a simple 3x3 table</caption>
    <tr id="row1">
    <th style='width: 20%;'>Header 1 </th>
    <td style='width: 40%;'>Cell 1 </td>
    <td style='width: 40%;'>Cell 2</td>
    </tr>
    <tr id="row2">
    <th>Header 2 </th>
    <td>Cell 3 </td>
    <td>Cell 4</td>
    </tr>
    <tr id="row3">
    <th>Header 3 </th>
    <td>Cell 5 </td>
    <td>Cell 6 </td>
    </tr>
</table>
</body>
</html>