表格在HTML中很多情况的默认样式太难看,设计人员就需要自己设置,在这我和大家分享下表格边框变细的经验,适合css初学者。
HTML表格边框变细的css样式――工具/原料Adobe Dreamweave 软件HTML表格边框变细的css样式――方法/步骤
HTML表格边框变细的css样式 1、
首先新建表格,代码如下:
<table width="500" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
HTML表格边框变细的css样式 2、
在table里加css样式,代码如下:
<table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
HTML表格边框变细的css样式 3、
样式注解:
单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
border-collapse:collapse表示表格的两边框合并为一条
HTML表格边框变细的css样式――注意事项border="1" 这个地方别把border="1" 写成border="0"