第6章 表格与布局
插入表格
选择菜单命令“插入→表格”或者单击插入工具栏中左端的窗格形按钮,即弹出“插入表格”对话框,如下图:
如果菜单中“表格”项是暗的,是你当前视图选择了“布局视图”,在工具栏单击“布局”标签,选择“普通视图”即可。
对话框中“行数”“列数”你可以自己输入数字来设定。“宽度”项右边选择框中可选择“百分比”或“像素”,这是定义表格的总宽度。如果用百分比,表格的宽度会随屏幕大小变化,如果用像素定义,则不管屏幕大小,表格尺寸不变。
“边框”项右边框中输入表格边框线条宽度,如果不输入默认值1个像素。如果输入0可以产生无边框的表格。
“单元格填充”框中输入的数字表示表格里内容(文字、图像等)和表格线之间的距离。如果不输入默认为1个像素。
“单元格间距”是单元格与单元格之间的距离。如果不输入默认为2个像素。输入为0时,单元格之间没有距离,则单元格之间的边线将合并为2个像素宽的线条。
对话框中各项设置完成后,单击“确定”按钮即可生成空表格。
在表格中任意位置点击,编辑区下边即属性面板上面一行出现表格标签。单击<td>可选中光标所在位置单元格;单击<tr>选中光标所在位置一行单元格;单击<table>选中全部表格。
选中全部表格,表格被一黑色线框包围,右下角和右、下边中间各出现一个黑方块,称做“调节点”,拖动调节点可以改变表格尺寸大小。
初建立的表格,各单元格的宽度和高度是均匀分布的。鼠标指针移动到某一单元格右边线上时会变成中间有两条竖线的形状,拖动鼠标可调节该列单元格的宽度;鼠标指针移动到某一单元格下边线上时会变成中间有两条横线的形状,拖动鼠标可调节该行单元格的高度。
你先看了下面所说的几种情况再考虑是不是需要调节单元格宽度。
在没有进行人工调节宽度时:
1、如果各单元格输入的内容都不超过单元格宽度,各列宽度按均匀分布;
2、如果每列都有至少一个单元格达到或超过单元格宽度,各列宽度仍然按均匀分布;
3、如果某一列所有单元格内容都达不到单元格宽度,其他列有单元格内容超出单元格宽度时将自动压缩内容少的列而扩大其他列宽度。
4、列宽度不能再扩大时则换行,自动扩大当前行高度。
进行了人工调节宽度后,单元格宽度就不再自动调节,内容超过宽度时自动换行。单元格高度自动调节到能容纳所有内容为止。
在全部选中表格时,属性面板如下图:
“表格 ID”框中可以给表格输入一个名字,以供在程序语言中调用表格。不编程就不管这一项了。
“行”“列”两项中显示表格的行数和列数,重新改变数值可以添加或减少行数或列数。
“宽”“高”两项中是表格尺寸,可以在属性中重新设置尺寸,也可把百分比改为像素或把像素改为百分比。
“填充”“间距”两项中可以重新改变表格里内容和表格线之间的距离和单元格与单元格之间的距离。
“对齐”项里可定义表格在页面中位置,有左对齐、居中、右对齐三项。
“边框”项中可以重新输入边线的宽度。
“边框颜色”中默认是灰色,外线框呈上亮下暗的立体状。如果选择了其他颜色的线条,立体状即消失。
“背景颜色”和“背景图像”可以选择表格内容的背景,设置方法与前面讲的网页背景一样,只是这里设置对表格以外无效。
下半部左端还有六个小图标,最左两个是清除列宽和行高的设置。如果你调节了行高和列宽,后来还想让表格按内容多少自动调节,就点击这两个按钮。另外四个是像素和百分比交换。
熟练掌握了表格属性面板的使用,你就可以根据需要轻松地制作出各种各样表格了。
表格修改编辑
编辑表格,首先要认清“定位单元格”和“选中单元格”这两个概念。在表格中单击某一个单元格,这时光标成一竖线在单元格中闪动,称做“定位单元格”。定位在某一单元格可以在当前单元格内输入内容。当光标定位某一单元格,点击下面标签,竖线光标消失,该单元格被线框包围,称做“选中单元格”,选中单元格后,可对该单元格进行各种属性改变。
用鼠标指针定位在一个单元格后,按下左键拖拉到另一个单元格,可同时“选中”多个单元格。也可以在一个单元格单击后,按下“Shift”键,再单击另一个单元格,则以这两个单元格为两对角的一个矩形区域全被“选中”。
选中单元格后,属性面板如下图所示:
属性面板上半部和前面讲的一样,可以改变字体、字号、颜色和排列方式等。下半部可以对选中的单元格作局部定义。下行左边两个按钮一个是合并单元格,一个是拆分单元格。如果选中一个单元格,“合并”按钮是暗色的,如果同时选中多个单元格,“拆分”按钮是暗色的。
下面看具体操作方法:
如下图中,第一图选中了左上角四个单元格,选中后,单击“合并”按钮,就变成第二图中的样子。
选中一个单元格,按“拆分”按钮,先弹出对话框如下图:
首先你要选择拆分“行”或者是“列”,然后输入拆分的数量,如一图中我选择“列”输入“3”,拆分后如下图所示:
看到此图,你可能难想象,为什么下面格中的竖线也向右跑了。这是系统默认的对齐方式,原来的表格线按你拆分数量的最后一格对齐。那要想分成下图所示的样子怎么办:
这要多费点事,其实也不难。在前面拆分为三个单元格图中,选择三个单元格中右格,再拆分两个单格,这时成了四个单元格,然后选择中间两个单元格合并,就可成为不和下面竖线对齐的三个单元格了。
用表格布局网页
表格的拆分与合并功能对网页布局很有用,我们常见的很多网页,页面分成大小不等按各种方式排列的小块,多是用无边框表格进行定义的。
在一个页面中,如果需要分成很多个“块”,每个块中有不同的文字或图片、背景等,可以先根据块的分布制作表格,用上面叙述的方法拆合调节,每个单元格里都可以用不同的背景色填充,或都选择不同的背景图片平铺。当合适后,全部选中表格,在表格线项中选择“无”,即可在各个块中安排内容。
如果使用同一背景,用使块间不出现明显的分界线,可把表格间距选择为“0”像素。
本来在表格功能中还有布局表格方式,不过操作方法和这个一样,表格不用表格线时,和布局表格的功能与作用也都一样,这里就不再详细叙述了。下面看我们使用表格安排的画面,大家可以自己试试。
|