这两天做网站时发现一个问题　很是郁闷　就是在表格中输入文字总是会自动粗体　煞是难看　怎么调整样式都没有用　那粗粗的颜色真是让人非常不爽　代码仔细瞧着了　发现表格的却是以<th></th>这个开头和结尾的，<th></th>是具有自动加粗文字功能的，将th改为td后，即出现了自己想要的结果，但是还有一个问题就是为什么添加表格的时候会自动以<th></th>开头和结尾呢，再琢磨发现，th是表示表格表头的，与td类似，都嵌套与tr内，但th是对文字自动加粗的，但是一个网页内每个表格里的代码都去做修改，岂不是很麻烦，原来，是在添加表格时，对页眉做了选择，默认为无时则是均以td开头和结尾，而选择后面几种时则会发现，只有选择的页眉部分会以th开头和结尾，这下就算是完全解决了

本课将讲讲表格与表单的制作，表格如果适当使用的话可以制作出各种各样的网页布局，虽然W3C不推荐这么做，不过对于初学者，这是一个非常简单快捷的布局方法。顺便提一下，这种布局方式我用了两年，直到开始做这个博客的时候才开始接触CSS，到了去年底才彻底放弃了表格的布局。当然，表格只是作为一个入门，在后面学习了CSS后就要尽快放弃它了。
    至于表单是为下一节的服务器端脚本准备的，如果不理解也没关系，随着后面的深入自然就能了解到它的使用了，好了，现在课程开始。
    首先新建一个文档，点击菜单上的“插入”->“表格”，弹出如下窗口
    

    相应地输入行数，列数，宽度，边框粗细，单元格边距，单元格间距，稍后我将给这些内容做进一步的解释，至于页眉，这个是表格的样式，也就是将哪部份单元格设为“标题”模式，设为标题模式后的单元格内的内容将居中，并且字体也会被加粗，建议大家选无，如果有需要创建表格后是可以任意设定的。至于“辅助功能”一栏实用性不强，这里就不多说了，有兴趣的可以自己尝试一下，并上网查查资料。
    现在我创建一个3行，2列，边框粗细为1，宽度为500像素，单元格边距为0，单元格间距为2的表格，如下图
    

    通过这个例子大家应该可以理解相应参数的意思吧。行，即是表格的横排，而列则为单元格的竖列；表格宽度有两种单位：像素与百分比，如果设定为像素，那么表格的宽度则为固定大小（当然，根据浏览者的显示屏的分辨率，显示出来的大小也会有所不同），如果是百分比，则根据用户的浏览器窗口的大小而发生动态的变化；边框宽度就是单元格的边框的宽度啦；单元格间距则是单元格与单元格之间的间距；至于单元格边距这个比较难解释，例子中我把它设定为0，因为在本例中是看不出的，现在给大家做个对比就明白了。
    首先在刚刚创建的表格的第一个单元格内输入一些内容，如下图所示
    

    大家是否发现，表格的两列变得不对称了？在某个单元格内输入的内容是会把这个单元格撑开，所以大家在设计的时候一定要给单元格设定好宽度，以避免这种情况的发生，至于如何设定和相应的规则下面会给大家讲解，现在继续我们的例子。现在我把单元格边距改为10，如下图
    

    大家是否发现文字与单元格边框之间多了一点空隙？这就是单元格边距的效果。
    下面说说表格属性的设定，首先选中整个表格，选中的方式是把鼠标移至任意一个单元格的边框，当鼠标变成一个上下的双箭头时（由于没有专门的截图软件，无法截取鼠标的图片，这里就不放图了）点击，就可以选中整个表格了，当然你也可以按着鼠标不放，拖动鼠标，这样就可以改变相应单元格的大小了。
    选中表格后属性面板中将变成如下形式
    

    表格ID你可以为你的表格设定一个ID，不过目前我们我们还不需要，所以这个可以不设定，未来学习了CSS和JS之后再进行讲解。表格ID下面的那几个是对单元格的宽高进行操作的，大家可以自己尝试下，这里不再累赘。你可以通过修改行数或者列数来改变表格的单元格数量，注意，所有操作都是从下至上，从右到左，也就是说如果你把行数+1，那么表格的最下方增加一行，-1则删除最下方一行（同时内容也一起删除，这个操作要慎重）；列数也一样+1则在最右边增加一列，-1则删除最右边的一列。还有表格的宽高，填充（也就是前面说的单元格边距），间距，边框都可以在这里修改。你也可以设定背景图像或者背景颜色，如果两个同时设定了的话优先显示背景图像，这里建议大家如果要设定背景图像的话最好把背景颜色设定为类似于图片的颜色，当网络速度较慢，图片无法显示的时候可以让背景颜色暂时填充上网页的空白保证网页布局的美观。对于边框颜色因为在一些浏览器中不支持，建议大家不要使用，如果需要设定边框颜色的话后面会教大家一个CSS设定边框的办法，仅当对CSS的一个提前的窥探。这里有个“对齐”，是关于表格相对于网页的位置的，默认是左对齐，大家可以尝试一下。
    还有一个“类”，和前面的ID是一样的，这里也不讲了，未来学习CSS的时候会深入讲解。
    现在说说怎么设定单元格的大小。其实这个很简单，把鼠标点击任意一个单元格那么光标就停在了这个单元格上，你就可以输入任意内容了，同时属性面板也变成了以下样式
    

    大家可以设定宽高，背景图像或颜色，边框颜色，单元格内文字的字体、大小、颜色等，这里需要注意的是，单元格的大小遵循一个对齐的规则，就是与同一行或同一列的单元格的高或宽相等，也就是说只要设定了第一行的某一个单元格设定了宽度，那么下面几行同一列的单元格宽度都与之相同；而第一列的某一个单元格设定了高度，那么其他列同一行的单元格的高度都与之相同。那么大家只需设定第一行或第一列的单元格的宽高就可以了，另外直接输入数字的话单位默认为像素，如果想用百分号作为单位，则要在数字后面添加一个“%”，注意，如果以百分号为单位是相对于表格的，比如表格宽为100像素，而单元格宽为10%，那么这个单元格的实际宽度就是10像素。
    还需要注意的一个问题是单元格的总宽度和表格宽度，表格的宽度是一行内所有单元格的宽度加上所有间距和边框粗细，比如一个2行3列，300像素，边框为1的表格，如果它的单元格宽度为100，那么总的宽度就超过了表格的宽度。如果总宽度超过了表格宽度浏览器则会把单元格的宽度进行压缩，如果总宽度不足，则会进行扩展。大家在设计的时候可以观察一下DW为我们提供的实际宽度（在进行表格设计的时候是会有一个图示表明表格和单元格的宽度的），也可以像我一样，留下一个单元格不设定宽度，让浏览器自动通过其他的单元格来去计算这个单元格的宽度。
    在下方中间的部分大家有没注意到两个复选框？分别是“不换行”与“标题”，如果勾选了不换行则该单元格内的内容将不会换行，超出了单元格的宽度后将把单元格撑开；而“标题”勾选后该单元格将成为标题单元格，单元格内的文字默认居中，并且被加粗。该操作与创建表格时候的页眉相似，只不过“页眉”是把整一片的单元格都设定为“标题”。
    

    在属性面板的左下角大家会发现上图所示的内容，这个是关于单元格内的对齐方式，默认的是水平上左对齐，垂直上居中，比如下图所示
    

    一般来说如果没有设定高度那么垂直上的对齐是没必要设定的，不过有时候有特殊需要设定了高度，那么就要设定好垂直的对齐了。
    水平对齐有“默认”，“左对齐”，“居中”，“右对齐”四个选项，具体大家也明白，这里就不多说了，大家大可不必选择“左对齐”，因为这个是默认的，不过有种特殊情况下面会和大家提到；垂直的对齐有“默认”，“顶端”，“居中”，“底部”和“基线”五个选项，基本上大家也能理解，不过“基线”这个要讲讲，这个对齐方式就是文字的底线与单元格的中线对齐，相当于居中，不过比居中稍微上一点点。
    关于对齐，这里要提到一个继承性的问题，IE会忽略表格的父元素，但是Firefox等其他非IE浏览器则会从表格的父元素里继承相应的属性。这个对于大家可能比较难以理解，大家只要记住，如果你的表格被另外某个东西包裹着，而这东西又设定了相应的对齐方式，那么你的单元格内的对齐方式就必须设定上，即使是默认值，因为Firefox会把包裹着表格的元素的对齐方式应用到单元格上。不过这个问题比较少见大家也不必太过在意（我最初做这个博客的时候就遇上了...）。
    

    在属性面板的左下方你还能看到上图所示的东西，左边的那个是合并单元格，右边的是拆分单元格。首先先说拆分，把光标停在某个单元格上，点击拆分，弹出下图窗口
    

    选择拆分行还是列，然后输入需要拆分的数，这里我选择拆分为5行，点确定，结果如下图
    

    大家可以看到，左边的那个单元格被拆分为5个，现在我们选中这5个单元格，选中的方法有三种，按住鼠标不放拖过这5个单元格，也可以按着ctrl逐个点击单元格，还可以选中第一个第一个单元格，按住shift点击最后一个单元格。接着我们发现下图中左边的那个按钮变亮了，点击它，这5个单元格又合并为一个了。
    

    这里需要注意一个问题，上面提到了，单元格之间是要遵循对齐的原则，所以下图所示的效果是不可能做出来的
    

    但是如果我们需要制作这么一个布局怎么办呢？很简单，建立一个2行2列的表格，将下面一行的两个单元格合并，在上面新插入一个1行3列的表格，当然，表格的边框成了一个问题，这里教大家两个表格的属性：rules和frame，前者设定单元格的边框样式，后者设定表格的边框样式，选中你的表格，点击DW的“代码”进入代码视图，被选中高亮部分则是整个表格的代码，在代码开头的“<table”后面添加空格，插入以上两个属性，就可以实现相应的样式，插入的格式为rules="" ;双引号内的内容为属性的值，注意，各属性之间必须有一个空格隔开，比如这段代码：
    <table width="980" border="1" cellspacing="0" cellpadding="0" rules="cols" frame="void">
    关于rules和frame这两个属性的值大家可以参考http://www.haosblog.com/wzread.asp?id=186
    现在我们来讲讲表单，其实这个内容非常简单，大家大可自己操作一下了解，，然后配后未来课程的服务器端技术，表单就能为网站实现各种功能了。这里只是稍作介绍，可能大家会有些不理解，不过没关系，大家可以先操作一下稍作了解，等到未来讲解服务器端技术的时候再回头做个参考。
    点击菜单栏的“插入”->“表单”，我们能看到又弹出一个菜单列，这里有着许多选项，如下图
    

    我们首先点击第一个的“表单”，这样我们就插入了一个表单项，选中表单后属性面板将变成下图所示
    

    表单名称大家可以设定一个，动作是指表单提交到哪个网页，目标与链接的目标一样，详情参照第一课中的链接部分；方法是指数据提交的方法，有“GET”和“POST”两种，其中默认为“GET”，这两者的最大区别在于，“GET”用URL（即网页地址）来传递数据，而“POST”用HTTP协议传递数据（具体后面的服务器端技术将会详细讲解），还有一个MIME类型，DW中提供了application/x-www-form-urlencoded和multipart/form-data两个选项，其实还有一个text/plain，这是和表单的数据编码形式有关，在后面有关上传的部分将会有所提及，目前一般使用默认的方式。
    接着介绍一下按钮，按钮属性不多，除了公有的“名称”，“类”以外只有“值”和“动作”两个，“值”即是按钮上显示的文字提示，“动作”有“提交表单”，“重设表单”和“无”，设为“提交表单”则该按钮点击后将按钮所在表单内的所有表单项的内容都提交到表单所指向的提交页面；“重置表单”则该按钮点击后将清空在表单的所有表单项的内容（如果设置了默认值则恢复到默认值）；“无”则无动作。
    接着是单选框与复选框，复选框比较容易，“选定值”属性则为若该选框被选中，那么提交给服务器的内容是什么；初始状态则为在默认情况下该选框是否被选中。单选框和复选框一样，不同的是同一组的单选框只能选择其中一个，如何把它们编为一组呢？很简单，只要在名称的属性里输入一个名称，同一名字的单选框将被划为同一组，比如本博客在留言上有个性别的选项，就是两个单选框，其名称均为“sex”，而被标记为“男”的单选框值为“m”，被标记为“女”的单选框值为“f”，在提交后判断“sex”的值，那么就可以知道留言者的性别啦；另外一个办法就是在插入菜单中的表单下的“单选按钮组”，执行的效果是一样的。
    接着是“列表/菜单”，这个稍微有些复杂，在属性中有类型，初始化选定，高度，是否允许多选（这两个属性仅在类型为列表时可用），其他的都比较简单大家可以自己操作一下，这里介绍一下列表值，和初始化选定，点击属性面板上的“初始值”按钮，弹出以下窗口
    

    点击“+”可以新增值，“-”则删除相应值，项目标签是该标签显示的内容，值则是该标签被选中后的值，建议不要和项目标签一样，尽量设置得简单一点，比如一个递增的数字。
    文件域用于文件上传的部分，这里在后面关于文件上传的部分会详细介绍。
    图像域类似于按钮，不同的是它可以用相应的图片替换按钮的样式。
    最后说说隐藏域，隐藏域的作用在于将一些数据藏入表单，这部分数据在网页中不显示出来，但是提交的时候是一并提交上服务器的，最常见的应用就是论坛编辑帖子的部分，在编辑的页面内设置一个隐藏域，内含有该帖子的ID，提交后根据该ID来判断该修改那篇帖子。隐藏域只有两个属性，名称和值，大家可以根据自己的实际情况自行输入。
    关于表单的内容大家可能会比较难以理解，因为这里介绍得非常简单，而且也无法实际应用，不过大家不用担心，在未来的动态网页设计部分将会应用到表单，通过动态网页技术的学习，大家是可以很快的对表单的内容上手的，在此之前希望大家可以稍微做一下尝试，算是对未来的学习做一个铺垫吧。下周将会给大家看一个用表格做网页布局的例子，这个例子来自于我前年开发的一个网页游戏，当初还不懂CSS的我仍在使用表格这种笨方法来布局，而且还用到了炉火纯青的境界，呵呵，不过自从接触了CSS之后，表格的布局就被我迅速抛弃了，在前期虽然因为一些浏览器的执行问题而对表格有所保留，但是随着对CSS了解的深入，网页中的表格被我一再抛弃，如今我的博客除了文章用表格做列表以外已经见不到表格的影子了。希望大家通过本次学习对网页布局有一定了解，并通过未来的动态技术开发对HTML有更加深入的了解，在未来学习了CSS以后也希望大家能尽快抛弃表格，因为表格虽然操作简便，但是它的代码量庞大，而且思路不清晰，这对未来的维护是很不利的。好了各位，我们下周见。