Dreamweaver 插入表格

表格是Web网页的重要组成元素之一。页面通过对表格进行修饰，可以为用户提供需要的显示效果。

一、插入表格

1、新建一个HTML空白页

2、点击‘插入’---‘表格’，如下图

3、会弹出一个‘表格’对话框，填入你想设计的几行几列的表格，和宽度，高度之类的参数，点击确定即可。如下图：

4、效果跟WORD文档很类似，如下图：

选中表格，在‘属性’面板中会有各种参数，背景颜色之类的，选择就可以了，很简单，如下图：

二、设置表格标题

1、设计页面时，可以给页面中的表格加上标题。表格的标题功能是由标记实现的，其语法格式如下所示。

<CAPTION align=值 valign=值 >标题</CAPTION>

CAPTION的参数值见下表：

2、具体操作，重复前面一节，在第三步弹出‘表格’对话框的时候，在‘标题’和‘摘要’分别输入需要的文本，如下图：

效果如下：

三、跨行和跨列处理

如果你会使用WORD，就会使用表格的跨行和跨列处理。

具体操作：创建一个新表格，选中你要处理的表格，右击，选择‘表格’，会出现一溜的表格处理菜单。

选择你所需要的‘合并单元格’或者其他选项。

四、设置表格背景图像

设置表格背景图像在我用的Dreamweaver CS6这个版本的表格’属性‘面板中已经找不到了，但这不是说就没办法为表格设置背景图像了，因为还可以通过代码来设置。

打开’拆分‘视图，我们看到表格的代码是这样的：

在<table width="400" border="1" cellpadding="0" cellspacing="0" >这个语句中加入background就能自动跳出’浏览‘，点击便能选择图片了，效果如下：

最终效果如下：

五、对齐方式

大表格的对齐方式：选中整个大表格，在’属性‘面板中选择对齐方式。效果如下：

单元格的对齐方式：选中某单元格，在’属性‘面板中的’水平‘或’垂直‘设置：

六、设置单元格大小

选择要设置的单元格，在“属性”面板中的“宽”，“高”设定数值

七、设置表格边框、单元格内间距、单元格外间距：

在<table width="400" border="1" cellpadding="0" cellspacing="0" >这个语句中，分别包含了设置边框、单元格内间距、单元格外间距的设置，border这个是边框属性，不难理解；cellpadding属性是单元格内间距，即单元格内容和“边界”间距是多少像素；cellspacing则是每个单元格之间的间距。下面举一个栗子，这段代码会设置一个边框为1，内间距位3，外间距为5的表格：

<table border="1" cellpadding="3" cellspacing="5">
<tr>
<td>第一行第1格</td>
<td>第一行第2格</td>
<td>第一行第3格</td>
</tr>
<tr>
<td>第二行第1格</td>
<td>第二行第2格</td>
<td>第二行第3格</td>
</tr>
</table>

效果如下：

尝试一下

转载本站内容时，请务必注明来自W3xue，违者必究。