CSS 表格属性

html-css015

CSS 表格属性,第1张

CSS表格属性用于设置HTML表格的样式,HTML表格由 <table></table> 标签嵌套 <tbody>, <tr>, <td>等标签组成,一个HTML表格默认至少包含table,tbody,tr,td四个元素。

CSS表格属性:

显示表格边框有时候特别重要,它能让表格结构更清晰。

默认的表格有双边框,这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。

CSS即层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS控制表格横向显示Html代码: <div style="position:relative"><table class="t1"><tr><td>1</td></tr></table><table class="t2"><tr><td>2</td></tr></table><table class="t3"><tr><td>3</td></tr></table></div>CSS代码:<style type="text/css">.t1, .t2, .t3 {width:100pxposition:absolute}.t2 {top:0left:100px}.t3 {top:0left:200px}</style>

结构呢?我觉得挺像。好,Div的结构搞定了,下面就用CSS去控制它:equal{display:tableborder-collapse:separate}

.row {display:table-row}

.row div {display:table-cell}

.row .one {width:200px}

.row .two {width:200px}

.row .three {}

上面说一下上边各个CSS属性的意义:

1.dispaly:table让.equal层作为块级元素的表格来显示,也就是将显示成表格的样子

2.border-collapse:separate边框独立,就像表格没有合并单元格以前

3.display:table-row将.row作为表格行tr显示

4.display:table-cell将.row的下级div作为表格单元格td显示

使用border-spacing:10px主要是来区分几个盒子,因为IE下不能正常显示,但是在:Mozilla、Opera、Firefox、Chrome下都是可以的。