css合并表格

竭诚为您提供优质文档/双击可除

css合并表格

篇一：表格css实例步骤

用表格布局网页过程

1）单击“文件|新建”命令，新建一个空白文档，并将文档保存为index.html。

2）插入背景图片（图片位于素材images/back.jpg）

3）插入1行1列的表格，表格宽度为764像素，其他设置如下图所示。

4）单击“确定”按钮插入表格，在属性面板中将“对齐”设置为“居中对齐”，背景颜色为#ffffff。（注意：确保表格是选中的）

5）将光标移到单元格中，插入一个2行1列的表格，宽度为759像素，并属性面板中将对齐设置为居中对齐。

6）将光标移到第1行单元格中，单击“插入|媒体|Flash”命令，在对话框中选中文件“images/banner.swf”，单击确定插入flash动画。

7）选中flash文件，在“属性”面板中单击“播放”

按钮，可以播放插入的flash动画。

8）将光标移到第2行单元格中，插入“images/navi.gif”，完成后，效果如下

9）将光标移到顶部flash部分表格的外面，插入一个1行2列的表格，宽度为759像素，在属性面板中将对齐设置为居中对齐。（记主体信息表）

10）将光标移到第1列单元格中，在属性面板中将宽设置为157像素，“垂直”设置为“顶端”，插入一个5行1列的表格（表格的宽度157像素）（此表格记为表格1）。

11）将光标移到表格1的第1行单元格中，在“属性”面板中设置背景图片为“images/left01.gif”，其宽157，

高200，垂直为顶端，效果如下

12）将光标移到表格1的第1行单元格中，插入1行1

列的表格，宽105，高112，对齐为居中对齐。（记此表为表2）

13）将光标移到表2的单元格中，单击“插入|标签”

命令，打开“标签选择器”对话框，

如图所示。

14）选择如上图所示，单击插入按钮，插入标签，后单击“关闭”

15）在“代码视图”中，将光标移到标签中，设置

“scrollamount”属性值为2，direction属性为up，height 属性为112，。onmouseover和onmouseout属性，将光标移到与之间，然后输入相应的文字，比如“欢迎光临”具体代码如下：

16）将光标移到表格1的第2行单元格中（滚动信息下面的单元格），在属性面板中，设置背景图片为

“images/left_02.gif”，然后设置单元格的高度为151像素，垂直设置为“顶端”

17）将光标移到表格1的第3行单元格中，在属性面板中，设置背景图片为“images/left_03.gif”，然后设置单元格的高度为181像素，垂直设置为“顶端”

18）将光标移到表格1的第3行单元格中，插入1行1列的表格，宽度为90%，对齐设置为居中。

19）将光标移到新插入的表格中，插入7行7列的表格，宽度为100%，单元格间距为2。

20）合并7行7列的表格的第一行，并在合并后的单元格中输入“>>”，设置单元格的对齐方式为“居中对齐”，并在其他的单元格中输

入相应的文字

21）将光标移到表格1的第4行单元格中，在属性面板中，设置背景图片为“images/left_041.gif”，然后设置单元格的高度为235像素，垂直设置为“顶端”

22）将光标移到表格1的第4行单元格中，插入1行1列的表格，宽度为152像素，对齐设置为左对齐。并输入相关文字，如下图

21）将光标移到表格1的第5行单元格中，在属性面板中，设置背景图片为“images/left_04.gif”，然后设置单元格的高度为235像素，垂直设置为“顶端”

22）将光标移到表格1的第5行单元格中，插入1行1列的表格，宽度为152像素，对齐设置为左对齐。并输入相关文字，如下图

23）将光标移到页面中，在属性面板中，将垂直设置为“顶端”，背景颜色设置为“#e0f4fa”。

24）将光标移到右边单元格，插入一个2行1列的表格（记表3），宽度602像素。

25）将光标移到表3的第1行单元格中，插入“images/life_banner.jpg”。

26）将光标移到表3的第2行单元格中，插入一个3行1列的表格（记表4），宽度为584像素，在属性面板中，对齐设置为“居中对齐”，效果如下图。

27）将光标移到表4的第1行单元格中，插入“images/right_01.gif”，效果如下图

篇二：csstable属性

csstable属性属性

border-collapseborder-spacingcaption-sideempty-cell stable-layout描述设置是否把表格边框合并为单线的边框。设置分隔单元格边框的距离。设置表格标题的位置。设置是否显示表格中的空单元格。设置显示单元、行和列的算法。css表格属性可以帮助您极大地改善表格的外观。1.表格边

框如需在css中设置表格边框，请使用border属性。下面

的例子为table、th以及td设置了蓝色边框：

table,th,td{border:1pxsolidblue;}亲自试一试请注意，

上例中的表格具有双线条边框。这是由于table、th以及td 元素都有独立的边框。如果需要把表格显示为单线条边框，请使用border-collapse属性。

2.折叠边框border-collapse属性设置是否将表格边框折叠为单一边框：

table{border-collapse:collapse;}table,th,td{border:

1pxsolidblack;}亲自试一试3.表格宽度和高度通过width

和height属性定义表格的宽度和高度。下面的例子将表格

宽度设置为100%，同时将th元素的高度设置为50px：

table{width:100%;}th{height:50px;}亲自试一试

4.表格文本对齐text-align和vertical-align属性设置表格中文本的对齐方式。text-align属性设置水平对齐方式，比如左对齐、右对齐或者居中：td{text-align:right;}亲自试一试vertical-align属性设置垂直对齐方式，比如