透析表格──表格基础

网络与通信

表格是网页上最常用的元素。可以说不会熟练地使用表格,是做不好网页的。本系列将讲解表格的构成和制作方法,以Dreamweaver为操作工具,并结合HTML代码,帮助你学会从基础的表格到各种不同样式的另类表格的制作方法。
  作为网页的一个部分,表格是由“标记”(TAG)组成的。下面我们通过几个实例,来说说怎么在Dreamweaver中制作简单的表格,以及HTML代码中这些标记的含义。

1. 绘制表格

打开Dreamweaver,在OBJECTS面板上点“Insert Table”图标,如果找不到OBJECTS面板,可以按“Ctrl+F2”将它打开((图1))。

图1
图1

  弹出表格设置窗口((图2)),可以看到窗口中有六项可以设置:
图2
图2

  Rows:表格的行数
  Columns:表格的列数
  Width:表格的宽度,在前一个框中填入数值,在后面的框中选择单位,Pixels是像素,Percent为百分比。
  Border:表格的边框,设置为0时,表格不显示边框。
  Cell Padding:单元格的内边距,即单元格与单元格内的文字之间的距离。
  Cell Spacing:单元格之间的间隔值。
  本例中我们绘制一个两行三列、宽200像素、边框为1的表格,填好这些参数,点OK按钮完成表格插入,这时在Dreamweaver窗口中表格显示如(图3)
图3
图3

2. 表格代码分析

现在我们来看看这个表格是由什么样的HTML代码组成的。点击Dreamweaver上方三个视图切换按钮中的代码模式((图4)红圈处),可以看到网页的HTML源代码。

图4
图4

  我们可以看到,表格部分的代码如下:
  
  
  
  
  
  
  
  
  
  
  
  
     
     

  我们这就讲解一下表格的基本语法:
  ...
- 定义表格
   - 定义表行
   - 定义表头(一般情况下不使用)
   - 定义单元格(表格的内容就放在这里)
  HTML标记一般都是成对出现的,有一个开始标记就会有一个结束标记,比如有就有
。一个最简单的表格是由
三对标记构成的。而它们三个是包含关系,这就像一个大盒子,我们可以想象一下,是最外面的大盒子,大盒子中放了两个稍小一些的盒子,它们就是表格的两行;而这两个稍小的盒子中还分别装着三个更小的盒子,这三个并排放在一起,组成表格中这一行的三个单元格。
  在这三个小盒子中,你就可以放自己想放的东西了。上面代码
中放的都是一个有点奇怪的符号“ ”,它在网页中其实显示的是一个空格,是Dreamweaver自动加上用来占位的。
  最初级的表格就是如此了,但要想用好表格远不止这么简单,在下一期中,我们将对表格的外观进行初级的修改。