html,如何控制表格中单元格的大小
<body>
<div align="center">
<table width="90%" border="1">
<tr>
<td width="30%" >第一</td>
<td width="70%">行</td>
</tr>
<tr>
<td width="40%">第二</td>
<td width="60%">行</td>
</tr>
</table>
</div>
</body>
</html>
请教：
1.上面的是以
<td width="40%">第二</td>
<td width="60%">行</td>
为准
<td width="30%" >第一</td>
<td width="70%">行</td>
失效。那怎么分别控制每行的单元格大小呢？ 展开
1、利用 height属性，这样是直接拉高 td 单元格的高度，缺点：文字不能对齐
2、做为height属性文字垂直不对齐的补充，增加 line-height属性，与height相同时则垂直居中，但换行则会导致两行间距太大。
3、padding-top padding-bottom 可以增加上下边距，很好用的属性，在bootstrap框架中是通过这个属性实现表格样式的。就算多行，也是一样保持间距。
或者结合使用，选择一款适合的。
.table tr td { padding:10px 0;} 这样设置省事。
实现代码：
<table cellspacing="0" style="color:#FFF; text-align:left; font-size:14px; font-weight:bold; margin-left:220px; width:980px; height:200px;text-align:center">
<tr >
<td bgcolor="e91e6f"; style=" width:196px;">01</td>
<td bgcolor="224071"; style=" width:196px;">02</td>
<td bgcolor="f12339"; style=" width:196px;">03 </td>
<td bgcolor="1ea27e"; style=" width:196px;">04</td>
<td bgcolor="224071"; style=" width:196px;">05</td>
</tr>
<tr>
<td bgcolor="1ea27e">06</td>
<td bgcolor="e91e6f">07</td>
<td bgcolor="224071">08</td>
<td bgcolor="f12339">09 </td>
<td bgcolor="1ea27e">10</td>
</tr>
<tr>
<td bgcolor="e91e6f">11</td>
<td bgcolor="224071">12</td>
<td bgcolor="f12339">13</td>
<td bgcolor="1ea27e">14 </td>
<td bgcolor="224071">15</td>
</tr>
<tr>
<td bgcolor="1ea27e">16</td>
<td bgcolor="e91e6f">17</td>
<td bgcolor="224071">18</td>
<td bgcolor="f12339"></td>
<td bgcolor="1ea27e"></td>
</tr>
</table>
2、做为height属性文字垂直不对齐的补充，增加 line-height属性，与height相同时则垂直居中，但换行则会导致两行间距太大。
3、padding-top padding-bottom 可以增加上下边距，很好用的属性，在bootstrap框架中是通过这个属性实现表格样式的。就算多行，也是一样保持间距。
或者结合使用，选择一款适合的。
.table tr td { padding:10px 0;} 这样设置省事。
实现代码：
<table
cellspacing="0"
style="color:#FFF;
text-align:left;
font-size:14px;
font-weight:bold;
margin-left:220px;
width:980px;
height:200px;text-align:center">
<tr
>
<td
bgcolor="e91e6f";
style="
width:196px;">01</td>
<td
bgcolor="224071";
style="
width:196px;">02</td>
<td
bgcolor="f12339";
style="
width:196px;">03
</td>
<td
bgcolor="1ea27e";
style="
width:196px;">04</td>
<td
bgcolor="224071";
style="
width:196px;">05</td>
</tr>
<tr>
<td
bgcolor="1ea27e">06</td>
<td
bgcolor="e91e6f">07</td>
<td
bgcolor="224071">08</td>
<td
bgcolor="f12339">09
</td>
<td
bgcolor="1ea27e">10</td>
</tr>
<tr>
<td
bgcolor="e91e6f">11</td>
<td
bgcolor="224071">12</td>
<td
bgcolor="f12339">13</td>
<td
bgcolor="1ea27e">14
</td>
<td
bgcolor="224071">15</td>
</tr>
<tr>
<td
bgcolor="1ea27e">16</td>
<td
bgcolor="e91e6f">17</td>
<td
bgcolor="224071">18</td>
<td
bgcolor="f12339"></td>
<td
bgcolor="1ea27e"></td>
</tr>
</table>
