html中table设置每个单元格的不同颜色和宽度

html-css09

html中table设置每个单元格的不同颜色和宽度,第1张

1、定义一个表格table，其中包含<tr><td>子标签

2、设置单元格颜色，只需利用css属性background-color添加在td上。

3、设置宽度，只需直接给td加上width属性。

示例：

<table border=1 cellSpacing=5 cellPadding=5>

<tr><td style="background-color:red">第一行第一个</td><td width="300px">第一行第二个</td></tr>

<tr><td>第二行第一个</td><td>第二行第二个</td></tr>

</table>

建议最好不要在table里面直接设置宽度，高度等，经常会出现设置的并没有生效的情况，

而如果是在style里面添加设置，就不会有问题，代码直接拷贝到body中间即可使用。

示例如下：

<table cellspacing="0" style="color:#FFFtext-align:leftfont-size:14pxfont-weight:boldmargin-left:220pxwidth:980pxheight:200pxtext-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>