表格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）在“代码视图”中，将光标移到<marquee>标签中，设置“scrollamount”属性值为2，direction属性为up，height属性为112，。

Onmouseover和Onmouseout属性，将光标移到<marquee>与</marquee>之间，然后输入相应的文字，比如“欢迎光临”具体代码如下：
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列的表格的第一行，并在合并后的单元格中输入“<<<2011-11>>>”，设置单元格的对齐方式为“居中对齐”，并在其他的单元格中输入相应的文字
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”，效果如下图
28）将光标移到表4的第2行单元格中，在属性面板中，设置背景图像为“images/right_02.jpg”，,垂直设置为“顶端”，效果如下图
29）将光标移到表4的第2行单元格中，插入1行1列的表格（记表5），宽度88%，属性面板中的对齐设置为“居中对齐”。

30）在表5中，插入相关文字和图片，排版
31）将光标移到表4的第3行单元格中，插入“images/right_03.gif”，效果如下图
32）通过标签选中主体信息表（见步骤10），
右移光标一下，插入一个1行1列的表格，宽度759像素，在面板属性中，对齐设置为“居中对齐”。

33）将光标移到单元格中，设置背景图片“images/bottom.gif”，高度为62，设置文字的对齐方式为居中，输入版权信息，
效果如图：
34）保存，按F12预览结果。

CSS制作过程
1）单击“文件|新建|CSS”新建一个CSS文件，保存为style.css。

2）新建CSS规则，创建body标签规则
单击确定，具体设置如下图
代码如下
BODY {
FONT-SIZE: 12px; LINE-HEIGHT: 120%; FONT-FAMILY: "arial","宋体" }
3）新建CSS规则，
4）新建CSS规则，
5）新建CSS规则，
6）新建CSS规则，
上述操作后，style.CSS的代码如下：
将style.CSS应用index.HTML文件
打开index.HTML文件，展开CSS面板，单击附加样式按钮，将style.CSS添加到HTML文件中，保存，预览效果。