css表格如何上面一个下面多个

html-css05

css表格如何上面一个下面多个,第1张

结构呢?我觉得挺像。好,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下都是可以的。

css与表格不同,css是样式和代码分离也就是一个页面或几个页面对应一个样式表或者多个样式表。而表格是所见即所得,样式在表格里面写。因此当一个页面需要做局部的调整,如果是css写的只需要找到css文档,找到所修改的内容所对应的样式表直接修改就好了。而table的则需要找到页面的对应位置(table页面代码好乱的,你懂得),然后修改样式。再有如果所应用的页面是静态的例如cms(内容管理系统)所生成的页面是静态页面,如果用css做只需要修改css,那么所有引用css的都自动改变样式了,而是用table的则需要找到每个页面,都进行修改。

这样说你应该懂了吧。来点简单的添加长宽高吧。

css的:

样式表:

#wrap{width:100pxheight:50px}

页面代码:

<div id="wrap">内容</div>

table的

页面代码

<table width="100px" height="50px">

<tr><td>内容</td></tr>

</table>

1、创建使用css样式表有三种,分别是外部样式表,内部样式表和内联样式。下面通过一个小demo演示它们的用法,首先新建一个html文件,放入3个button按钮,给前两个按钮分别设置class属性为btn1和btn2:

2、接着准备一个css文件,命名为demo.css,在文件内写入按钮A的样式,保存css文件:

3、回到刚才的html文件,在style标签中用link标签引入上一步创建的css文件,这就是外联样式的用法,总结就是创建好的css文件内写好样式,然后在html文件中用link标签引入即可,这也是大部分网站使用的方法,因为其引入方便,管理起来也比较方便:

4、接着是内部样式表的使用,这里直接在head标签里创建style标签,在里面加入btn2的样式。对于内部样式表简单的html文件,内部样式是很方便的,但是结构复杂的html文件使用它就会让文件显得很混乱:

5、最后是内联样式的使用,直接在第三个标签内使用style属性加入样式就可以了:

6、最后保存html文件,打开浏览器可以看到三个按钮的样式都出现了。以上就是css样式表的制作方法: