Css 如何调整表的属性？

我有这个简单的代码

<div class="rating" >
<table>
<tr>
     <th> Award </th>
     <th> Winner </th>
     <th> Runner-up </th>    
</tr>
<tr>
    <td> Starburst Award </td>
    <td> #winner </td>
    <td> #runner-up#</td>
</tr>
<tr>
    <td> Rising Star Award </td>
    <td> #winner </td>
    <td> #runner-up#</td>

</tr>
 <tr>
    <td> Shooting Star Award  </td>
    <td> #winner </td>
    <td> #runner-up#</td>

</tr>   
 <tr>
    <td> Shining Star Award </td>
    <td> #winner......................... </td>
    <td> #runner-up#.....................................</td>

</tr>   
</table>
</div>
table.rating, th,tr,td
{
 width:100%;   
border-collapse:collapse;
    border:1px solid black; height:50px;
    border:1px solid black;
}

使用css我想做得更好。我怎么能让它看起来更像一张桌子，而不是像那样分开，中间有一个？

---

我已经创建了一个，我真正想做的就是使表看起来更好。

以下代码将其设置为更像一个表：

<div class="rating" >
<table border="1">
<tr>
 <th> Award </th>
 <th> Winner </th>
 <th> Runner-up </th>    
</tr>
<tr>
 <td> Starburst Award </td>
 <td> #winner </td>
 <td> #runner-up#</td>
</tr>
<tr>
 <td> Rising Star Award </td>
 <td> #winner </td>
 <td> #runner-up#</td>

</tr>
<tr>
 <td> Shooting Star Award  </td>
 <td> #winner </td>
 <td> #runner-up#</td>

</tr>   
<tr>
 <td> Shining Star Award </td>
 <td> #winner</td>
 <td> #runner-up#</td>

</tr>   
</table>
</div>
<style type="text/css">
  table.rating, th,tr,td
  {
    width: 30%;
    border-collapse:collapse;
    border:1px solid black; 
    height:50px;
    border:1px solid black;
    text-align: center;
  }
</style>

下面是它的样子：

我不太确定你在找什么，但那应该是个好的开始。您确实应该在html文档的内部有标记，但出于演示目的，上面的方法仍然有效

编辑：只是一个关于我所做更改的注释-

---

我首先删除了最后两个单元格中文本后的句点。不太清楚你把它们放在那里干什么。其次，我在CSS中添加了文本对齐：居中。如果不希望文本居中，可以将其更改为（例如）text align:left以使其向左对齐。第三，您不需要边框，如果不需要边框，只需从CSS中删除边框选项即可。最后，我将单元格的宽度更改为30%，所以它们都应该是相同的宽度。这使事情变得更加整洁和干净。100%使一个单元格成为表格的整个宽度，我想这是您不想要的。如果希望单元格占用多个列，则应使用colspan属性。

您的表已经看起来“正常”，但什么对您来说是好的？然后我就可以发布答案了。您希望表格的外观如何？为什么将表格宽度设置为100%，单元格高度设置为50px？为什么单元格中没有句点字符串？这些明显的事情让事情看起来更糟。