5.1 在网页中插入表格

视频讲解

Dreamweaver CC提供了强大而完善的表格可视化操作功能，利用这些功能可以快捷插入表格、格式化表格等，使开发网页的周期大大缩短。

【操作步骤】

第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。

第2步，在编辑窗口中，将光标定位在要插入插件的位置。

第3步，选择【插入】|【表格】命令（快捷键为Ctrl+Alt+T），打开【表格】对话框，如图5.1所示。

图5.1 【表格】对话框

提示：如果插入表格时，不需要显示对话框，可选择【编辑】|【首选项】命令，打开【首选项】对话框，在【常规】分类选项中取消选中【插入对象时显示对话框】复选框，如图5.2所示。

图5.2 【首选项】对话框

（1）【行数】和【列】文本框：设置表格行数和列数。

（2）【表格宽度】文本框：设置表格的宽度，其后面的下拉列表可选择表格宽度的单位。可以选择【像素】选项设置表格固定宽度，或者选择【百分比】选项设置表格相对宽度（以浏览器窗口或者表格所在的对象作为参照物）。

（3）【边框粗细】文本框：设置表格边框的宽度，单位为像素。

（4）【单元格边距】文本框：设置单元格边框和单元格内容之间的距离，单位为像素。

（5）【单元格间距】文本框：设置相邻单元格之间的距离，单位为像素。

（6）【标题】选项区域：选择设置表格标题列拥有的行或列。标题列单元格使用<th>标记定义，而普通单元格使用<td>标记定义。

☑ 【无】选项：不设置表格行或列标题。

☑ 【左】选项：设置表格的第1列作为标题列，以便为表格中的每一行输入一个标题。

☑ 【顶部】选项：设置表格的第1行作为标题列，以便为表格中的每一列输入一个标题。

☑ 【两者】选项：设置在表格中输入行标题和列标题。

（7）【标题】文本框：设置一个显示在表格外的表格标题。

（8）【摘要】文本框：设置表格的说明文本，屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。

第4步，在【表格】对话框中设置表格3行3列，宽度为100（100%），边框为1像素，则插入表格效果如图5.3所示。

图5.3 插入的表格

提示：一般在插入表格的下面或上面显示表格宽度菜单，显示表格的宽度和宽度分布，它可以方便设计者排版操作，不会在浏览器中显示。选择【查看】|【可视化助理】|【表格宽度】命令可以显示或隐藏表格宽度菜单。单击表格宽度菜单中的小三角图标，会打开一个下拉菜单，如图5.4所示，可以利用该菜单完成一些基本操作。

图5.4 表格宽度菜单

在没有明确指定边框粗细、单元格边距和单元格间距的情况下，大多数浏览器默认边框粗细和单元格边距为1像素、单元格间距为2像素。如果要利用表格进行版面布局，不希望看见表格边框，可设置边框粗细、单元格边距和单元格间距为0。【表格】对话框将保留最后一次插入表格所输入的值，作为以后插入表格的默认值。

第5步，切换到【代码】视图，可以看到自动生成的HTML代码，使用<table>标记创建表格的代码如下。

     <table width="100%" border="1">
         <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>&nbsp;</td>
         </tr>
     </table>

其中<table>标记表示表格框架，<tr>标记表示行，<td>标记表示单元格。当插入表格后，在【代码】视图下用户能够精确编辑和修改表格的各种显示属性，如宽、高、对齐、边框等。