小虾虎鱼

小虾虎鱼

使用table制作表格

作者 禾惠 发表于 2012/07/19,最后修改于 2012/07/19

    在使用table制作表格之前先了解一些相关属性。

    CSS border-spacing 属性:

    说明:该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。

    HTML cellpadding 与 cellspacing属性:
    单元格边距(表格填充)() -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间

    单元格间距(表格间距)() -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

HTML:

<table border="0" cellpadding="0" cellspacing="1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>邮箱</th>
    </tr>
    <tr>
        <td>穗溪</td>
        <td>男</td>
        <td>admin@xiaoboy.com</td>
    </tr>
    <tr>
        <td>梅赢</td>
        <td>男</td>
        <td>metrin@xiaoboy.com</td>
    </tr>
</table>

CSS:

table{border-collapse:separate;border-spacing:1px;border-color:#f00;border-width:0;width:100%;background:#ccc;border:1px #ccc solid;font-family:verdana,arial;font-size:10pt;line-height:100%;} /*字体的大小、行高以及字体都需要定义,否则会出现在不同浏览器中单元格的高度不一样*/
th{background:#e6eeee;border:1px #fff solid;padding:5px;}
td{background:#fff;padding:5px;vertical-align:top;}


穗溪原创,转载请注明 来自于小虾虎鱼 http://www.xiaoboy.com