html div 制作表格,使用table制作表格

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

CSS border-spacing 属性：

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

HTML cellpadding 与 cellspacing属性：

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

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

HTML:

姓名	性别	邮箱
穗溪	男	admin@xiaoboy.com
梅赢	男	metrin@xiaoboy.com

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