搜索
使用表格可以清晰地显示列成表的数据，例如股票行情的数据列表。实际上表格的作用不只是显示数据，它还在网页定位上起着重要的作用。8.1使用HTML建立表格表格的建立将利用3个最基本的HTML标签来完成，它们分别是table标签、tr标签和td标签。建立一个最基本的表格，必须包含一组table/table标签、一组tr/tr标签以及一组td/td标签，这也是最简单的单元格表格。table/table标签的作用是定义一个表格，tr/tr标签的作用是定义一行，而td/td标签的作用是定义一个单元格。8.1.1一个最简单的表格观察下面的代码。htmlheadtitle单元格/title/headbodycentertableborder=1trtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/trtrtd单元格5/tdtd单元格6/td/tr/table/center/body/html注意代码中以粗体显示的语句。这就是一个最基本的表格，它只有3行2列，下面就详细讲解一下这3个标签。table标签：它用于标识一个表格，就如同body标签一样，告诉浏览器这是一个表格。tr标签：它用于标识表格的一行，也就是建立一行表格，代码中有多少个tr/tr标签，就表示有多少行的表格。td标签：它用于标识表格的一列，也就是建立一个单元格，它必须放在tr标签里使用，一个tr标签内有多少个td就表示这行里有多少列或是说有多少个单元格。8.1.2各种表格样式在上一节中介绍了表格的建立方法，但这样一个表格样式比较单一，在实际应用中还可以利用相关的HTML标签来设置表格的各种样式。下面就一一进行介绍。1.表格边框的设置现在来了解一下table标签中各属性的用法，首先是设置表格边框的样式。htmlheadtitle表格的边框属性/title/headbodycentertableborder=10cellspacing=20cellpadding=30trtd单元格1/tdtd单元格2/td/tr/table/center/body/html注意代码中以粗体显示的语句。控制表格的边框共有3个属性，分别是border、cellspacing和cellpadding属性。2.表格高宽的控制对于表格的高、宽度也是通过height和width两个属性来控制的。htmlheadtitle表格的长宽/title/headbodycentertableborder=1width=200height=100trtd课程/tdtd教室/td/trtrtd语文/tdtd东楼1-1/td/tr/table/center/body/html注意代码中以粗体显示的语句。两者的语法结构为tablewidth=n或m%、tableheight=n或m%，n代表一个数值，单位为像素（px），m代表0到100的数，即0%到100%，表格将相对于当前窗口大小的百分比来显示。注意，这里的高宽设置是整个表格的高宽设置。3.表格相关颜色的设置下面介绍表格的边框和背景颜色的设置。htmlheadtitle表格的颜色设置/title/headbodycentertableborder=3bordercolor=redbgcolor=yellowtrtd课程/tdtd教室/td/trtrtd语文/tdtd东楼1-1/td/trtrtd英语/tdtd西楼1-1/td/tr/table/center/body/html注意代码中以粗体显示的语句。表格的边框颜色是通过bordercolor属性来设置的，tablebordercolor=颜色值，表格的边框颜色包括了表格的外框颜色和单元格的外框颜色。而表格的背景颜色是通过bgcolor属性来设置的，tablebgcolor=颜色值。8.2在Dreamweaver中创建和操纵表格有了上面的基础，再学习使用Dreamweaver制作表格就很容易了。选择“插入”菜单的“表格”命令，在出现的对话框中指定表格的行数、列数、列宽和边线宽度，这时文档窗口的文本光标处会出现一个空白表格。如果开始时不能确定这些参数，那么也可以使用默认值，后面还可以用属性面板来修改表格的外观。8.2.1在属性面板中控制表格Dreamweaver对表格的控制非常灵活。属性面板可以分别控制整个表格、表格的一行、表格的一列或一个单元格。属性面板的控制对象由选中的对象决定。当把鼠标移到表格的四周时，鼠标指针的形状变为十字形，这时单击鼠标左键，表格四周出现一个框，表示选中整个表格。这时控制面板各项参数的作用如下。·行和列：设定表格的行数和列数。·宽和高：设定表格宽度和高度。可以通过浏览器窗口百分比或使用绝对像素数来定义。例如设定宽度为60%，即表格的宽度为浏览器窗口宽度的60%，如果访问者使用640像素宽的浏览器窗口，则表格宽度为384像素。当浏览器窗口大小变化时，表格的宽度也随之变化。如果设置表格宽度为400像素，那么无论浏览器窗口的大小为多少，表格的宽度都不会变。·填充：设定单元格中的内容与单元格边线之间的距离，缺省值为1。·间距：设定单元格之间的距离，缺省值为2。·对齐：设定表格的对齐方式，居左、居中或居右。·和：清除行高和列宽。·：根据当前值，把列宽转换为绝对像素数。·：根据当前值，把列宽转换为窗口宽度的百分比。·：根据当前值，把行高转换为绝对像素数。·：根据当前值，把行高转换为窗口高度的百分比。·边框：设定表格外框的宽度。如果设置为0，就可以选择菜单“查看//可视化助理→表格边框”命令观察表格的外框。·背景颜色：设定表格的背景色。·边框颜色：设定表格框线的颜色。·背景图像：设定表格的背景图片。选取整个表格最方便的方法是把鼠标移到表格右边界的外侧，按下鼠标并向左拖拽，可以快速地选中整个表格。当把鼠标移到上边框附近，鼠标指针的形状变为向下的箭头时，单击鼠标左键，可以选中表格的一列。当把鼠标移到左边框附近，鼠标指针的形状变为向右的箭头时，单击鼠标左键，可以选中表格的一行，这时的属性面板与列属性面板基本相同。这里介绍一个很有用的按钮，它可以把一列或一行单元格合并成一个。实际上，只要按住鼠标，划过几个相连的单元格，再释放鼠标，就可以选中这几个单元格，然后单击按钮，就可以把选中的单元格合并成一个单元格。当选中一个单元格时，可以拆分单元格。单击按钮，在出现的对话框中选择是沿横向还是沿纵向拆分单元格，并输入拆分出的单元格数。经过调整各个属性，把表格调整为我们需要的样子。在单元格中可以放置文字或图片，并且可以设置文本和图片的格式。8.2.2实践与练习：制作“成绩单”表格本例着重练习在Dreamweaver中创建一个基本表格，其中会讲解创建表格时对行数、列数以及宽度等表格属性的设置，以及向表格里添加文本内容。（1）首先运行程序Dreamweaver8，选择菜单栏“文件→新建”命令，创建新文档。（2）创建好新文档之后，在文档窗口内输入表格的标题，这里输入“成绩单”，在属性面板中将其字体设为粗体并居中对齐，然后在文本的后面按键盘上“Enter”键以便插入表格。提示：在新建的文档中输入文字后，在属性面板中将文本设为居中对齐时，文本行会出现虚线，这些虚线是DIV标签。如果多输入一些段落文本后再进行居中对齐，就不会出现DIV标签。（3）选择菜单栏“插入→表格”命令，弹出“表格”对话框。（4）在“表格大小”里设置行数和列数及表格宽度。这里设置为“行数”5，“列数”6，“表格宽度”为300，单位设为“像素”。单击“确定”接钮，一个5行6列的表格就生成了。（5）表格创建好以后，开始对这表格输出数据。在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，从键盘输入“姓名”。在第一行的第二个单元格内单击鼠标左键或直接按键盘上的“→”键，在第二个单元格内输入“数学”。（6）依次在各个单元格里输入数据。输入时，按键盘上“↓”键文本光标会下移到下一行的同一列单元格，按“←”键文本光标会左移一个单元格，按“↑”键会上移到上一行的同一列单元格。（7）输入完成后，可以根据需要对在属性面板中对单元格进行排列，在“水平”后面的下拉菜单中设置为“居中对齐”，然后按“Ctrl+S”保存文档，预览网页效果。8.2.3实践与练习：制作“旅游行程表”立体表格本例着重练习在Dreamweaver中创建一个“旅游行程表”，通过对表格边框的属性设置来创建一个有立体感的表格。（1）首先运行程序Dreamweaver8，选择菜单栏“文件→新建”命令，创建新文档。（2）创建好新文档之后，在文档窗口输入表格标题，这里输入“旅游行程表”，在属性面板中将文本的字体设为粗体并居中对齐。提示：在新建的文档中输入文字后，在属性面板中将文设为居中对齐时，文本行会出现显线，如图8.17所示，这虚线是DIV标签。如果多输入些段落文后再进行居中对齐，就不会出现DIV标签。（3）选择菜单栏“插入→表格”命令，或按键盘组合键“Ctrl+Alt+T”，或单击“常规”工具面板上的“表格”按钮，弹出“表格”对话框。（4）在“表格”对话框的“表格大小”里设置行数和列数及表格宽度。这里设置“行数为”4，“列数”为3，“表格宽度”为300，单位设为“像素”，“边框粗细”1。单击“确定”接钮，一个4行3列的有立体感表格就生成了。（5）鼠标在表格左边单击，并按住鼠标左键向右拖动，选中表格。此时属性面板就显示出该表格的属性。（6）修改属性面板上的“填充”、“间距”、“边框”的数值，就可以改变表格的立体程度效果，如将“填充”、“间距”、“边框”的数值都设为8。（7）通过第（6）步的操作修改表格属性后立体效果过于强烈，需要再次修改相关数值，得到适当的立体效果后，开始对这表格输出数据。（8）在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，从键盘输入“日期”。按键盘上的“→”键，在第二个单元格内输入“上午”，第三单元格输入“下午”。（9）输入完后，可以根据需要对文本进行一些编辑，如颜色设置、居中等。然后按菜单“文件→保存”命令，保存文档，预览网页效果。8.2.4实践与练习：制作“旅游行程表”双线表格本例着重练习在Dreamweaver中创建一个“旅游行程表”，通过对表格的边框及边框颜色的设置来创建双线表格。（1）首先运行程序Dreamweaver8，选择菜单栏“文件→新建”命令，创建新文档。（2）创建好新文档之后，在文档窗口内单击鼠标左键，确认文本光标在文档区域内闪烁。接着就可以直接在文档区域内输入相关的文字信息。这里输入“旅游行程表”作为表头，设字体为粗体、颜色为红色。（3）选择菜单栏“插入→表格”命令，插入一个“行数”为4、“列数”为3、“表格宽度”为300，单位设为“像素”、“边框粗细”为1，单击“确定”接钮。（4）此时鼠标在表格右边闪烁，按鼠标向左拖动，选中表格。此时属性面板显示出该表格的属性。（5）单击属性面板中“间距”后的小方框，输入数字“2”，“边框”保持默认的“1”，此时“边框颜色”未设置。（6）单击属性面板中“边框颜色”后的小色块，弹出颜色编辑器，吸取边框颜色，如图8.30所示。吸取颜色后边框背景色被设为桔黄色。（7）完成（5）（6）步操作后，表格效果就成了双线表格效果。至此双线表格制作完了。（8）在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，输入“日期”。按键盘上的“Tab”键，文本光标就会跳到下一个