表格是常用的页面元素。做网页经常要借助表格来进行排版,用好表格是页面设计的关键。借助表格,你可实现你所设想的任何排版效果。另外,也可灵活使用表格的背景、框线等作出较美观的效果。
插入表格
我们要新建一个表格。点击 Objects 面版的
,或点击Insert/Table,或使用快捷键Ctr+Alt+T,就会弹对话框。
(表格的定义对话框)
下面进行解释:
Rows :表格的行数。
Columns :表格的列数。
Cell Padding :表元间隙设置。
Cell Spacing :表元内部空白。
Width :表格的宽度。后面的下拉选单有两项,是宽度的单位。Percent是百分比单位,例如在此时Width值为75的情况下,表示表格宽度占到浏览器窗口的75% 。Pixels 是像素单位,在此时Width值为75的情况下,表示表格宽度为75像素(最普遍的电脑屏幕分辨率设置为800*600,即宽800像素,高600像素)。建议单位一般选择Pixels,若选作Percent,当浏览器窗口大小调整时,表格也会随之调整,有时会影响整体布局。 Border :表格边框的宽度。因表格多用于页面排版,故边框宽度很多时候都取0。
点击OK按钮,插入表格。
表格的Properties面板
选中表格,显示出表格的Properties面版。
(表格的Properties面版)
下面给出详细解释:
Table Name :表格名,一般可不填。
Rows :表格的行数。前面已定义,现在可更改。
Cols :表格的列数。前面已定义,现在可更改。
W :表格的宽度。前面已定义,现在可更改。注意后面的下拉选单中,Percent被 % 所代替,但意义是一样的。
H :表格的高度。一般可不填,让其随内容的增加而自动调整。其后面下拉选单同W。
CellPad :表元间隙。前面已定义,现在可更改。
Cell Spacing :表元内部空白。前面已定义,现在可更改。
Align :表格在页面中的水平对齐方式。后面的下拉菜单有四个选项:Default表示使用浏览器的默认值(这个默认值一般为左对齐),Left表示左对齐,Center表示居中对齐,Right表示右对齐。
Border :表格的边框宽度。前面已定义,此时可更改。
:点击可清除掉各行的高度。
:点击可清除掉各列的宽度。
V Space :表格上边框与其上部其它页面元素、下边框与其下部其它页面元素的间距。
H Space :表格左边框与其左边其它页面元素、右边框与其右边其它页面元素的间距。
Light Brdr :边框明部的颜色。可填写特定颜色的英文单词或以#开头的16进制颜色代码,也可用点击后面的
,使用调色版。
Dark Brdr :边框暗部的颜色。设置方法同Light Brdr。
Bg :表格的背景图案。
Bg(下) :表格的背景颜色。
Brdr :表格的边框颜色。
表元的操作
用鼠标点击表格任一表元的内部,Properties面版会如下图。
(表元的Properties面版)
此时Properties面版的上半部其实就是文本的Properties面版。我们当然可往表格里加入文本,也可加入图象,甚至表格。还可以给文本或图象加上超级链接。其方法同一般操作完全一样,只不过是限制在某一特定表元内部罢了。
首先,拖动鼠标,选中几个表元,点击Properties面版上的
,选中的个表元即 被合并在一起。
用鼠标选中一个表元,点击 Properties面版上的
,会出现一个对话框。
(拆分表元的对话框)
选中Rows表示按行拆分,选中Columns表示按列拆分。
Number of Rows的值为拆分的新表元的数目。
另外,Properties面版上,H可设置表元的高度。较上的Bg可设置表元的背景图案,Brdr可设置各单独表元的边框颜色。设置方法均同对表格整体的设置。
在加入文本时,可选择Properties面版上的No Wrap和Header。当文本长度超过表元长度时,选择No Wrap,文本将继续向前,表元宽度会随之调整;不选No Wrap,文本将自动换行。
选中文本,若选上Header,文本会变粗。
在加入的图象的宽度或高度超过表元的宽度和高度时,表元会自动调整以适应加入的图象。
设置完毕后,还可直接用鼠标拖动表格的各边框来调整表格或各行、列的宽度。
用表格排版
经过前几节的学习,大家可以尝试着编写一些简单的网页了。但很快大家就会发现一些问题:为什么我的文本和图像很难安排到我设想的位置?为什么我的两个表格无法并排排列?为什么……
这就需要借助表格来进行页面排版。
我们可在首先做一个表格,预先设计好行列的分布。然后把图像、文本等分别加到合适的表元里。因为各表元的宽度、高度是可以设置和调整的,通过事先的预计和事后的调整,一定可把文本和图像排到合适的位置。
注意,此时我们用来排版的表格,边框一般应设为0,这样用浏览器就看不到这个表格了,以免影响美观。