图表排版设计html,网页的排版(表格篇上)

  表格的使用

表格是网页的一个非常重要元素，因为HTML本身并没有提供更多的排版手段，我们往往就要借助表格实现网页的精细排版。可以说表格的是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了了网页设计师的水平。

点击对象面板的

，看到如下的对话框：

① 行(Rows)：表格的行数；列(Columns)：表格的列数；

② 宽(Width)：表格的宽度，单位可以是像数(Pixels)或百分比(Percent)。按像素定义的表格大小是固定的，而按百分比定义的表格，会按照浏览器的大小而变化。后面会继续深入讲解两种定义方法的区别；

③ 边框(Borde)r：表格线的宽度；

④ 间距：单元格间距；内距：单元格内距。所谓的单元格，就是表格里面的每一小格。

按照如图的设置后，就得到下面这个表格：

在表格线上点一下，可以全选整个表格，此时可在属性面板看到：

①行(Rows)，列(Cols)：表格的行和列；

② 宽(W)，高(H)：表格的宽和高，通常情况下，我们都不会定义表格的高度；

③ 间距(CellPad)，边距(CellSpace)：单元格间距和单元格边距；边框(Border)：表格线的宽度；

④ 对齐(Ailgn)：表格的对齐方式，可以将表格靠左(Left)、置中(Center)、靠右(Right)

⑤

：消除行的高度设置；

：消除列的宽度设置；

：将表格宽度的设置由百分比转换为像素；

：将表格宽度的设置由像素转换为百分比；

⑥ (背景色)Bg Color：设置表格的背景颜色；

⑦边框颜色(Brdr Colo)r：设置表格线的颜色；

⑧ Bg Image：设置表格的背景图，如果设置了背景图，背景颜色就失效了；点击后面的公文包按钮选择背景图；

如果我们把光标移到其中一个单元格，此时看到的属性面板又有所不同：

①

：合并单元格(之前要先选择相应的需要合并单元格)；

：拆分单元格，拆分为多行或多列；

② 水平(Horz)：单元格内部的水平对齐方式，作用与

类似；

垂直(Vert)：单元格内部的纵向对齐方式；

③ 宽(W)，高(H)：单元格的宽度与高度；

④ 背(Bg)：单元格背景图；

⑤ 背(Bg)：单元格背景颜色；

⑥边框(Brdr)：单元格边框颜色。