网页设计与制作案例实战教程课件 第7章 使用表格布局网页

第7章使用表格布局网页网页设计与制作案例实战教程目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.1.1

表格的组成表格由行、列和单元格组成。在一个表格中，横向的称为行，纵向的称为列；行与列交叉的部分叫做单元格；单元格中的内容和单元格边框之间的距离叫做边距；单元格和单元格之间的距离叫做间距；整个表格的边缘叫做边框。7.1.2插入表格在网页文档中将鼠标移动至要插入表格的位置，执行“插入丨Table”命令，或按Ctrl+Alt+T组合键打开“Table”对话框。在该对话框中设置参数后，单击“确定”按钮即可根据设置插入表格。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.2.1设置表格属性选中整个表格后可以在“属性”面板中设置表格属性参数，如图为选中表格的“属性”面板。7.2.2设置单元格属性选中表格中的某一单元格，在“属性”面板中颗设置该单元格的属性。7.2.3鼠标经过颜色onMouseOut、onMouseOver属性可以创建鼠标经过时单元格颜色改变的效果。7.2.4表格的属性代码通过在“代码”视图中添加width、border等属性代码，同样可以设置表格参数。1.width属性用于指定表格或某一个表格单元格的宽度，单位可以是像素或百分比。

2.height属性用于指定表格或某一个表格单元格的高度，单位可以是像素或百分比。3.border属性用于设置表格的边框及边框的粗细。值为0时不显示边框；值为1或以上时显示边框，值越大，边框越粗。4.Bordercolor用于指定表格或某一个表格单元格边框的颜色。7.2.4表格的属性代码5.bordercolorlight属性用于指定表格亮边边框的颜色。6.bordercolordark属性用于指定表格暗边边框的颜色。7.bgcolor属性用于指定表格或某一个表格单元格的背景颜色。8.background属性用于指定表格或某一个表格单元格的背景图像。9.cellspacing属性用于指定单元格间距，即单元格和单元格之间的距离。7.2.4表格的属性代码10.cellpadding属性用于指定单元格边距（或填充），即单元格边框和单元格中内容之间的距离。11.align属性用于指定表格或某一表格单元格中内容的垂直水平对齐方式。属性值有left（左对齐）、center（居中对齐）和right（右对齐）。12.valign属性用于指定单元格中内容的垂直对齐方式。属性值有top（顶端对齐）、middle（居中对齐）、bottom（底部对齐）和baseline（基线对齐）。7.2.5实操案例：陶瓷展览馆以陶瓷展览馆网页制作为例，对表格的添加与设置进行介绍。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.3.1选择整个表格选中表格后才可以对其进行编辑，常用地选择整个表格的方式有以下4种：插入表格，单击表格上下边框即可选择整个表格。在“代码”视图或“拆分”视图下，选中表格代码，即<table>和</table>标签之间所有部分，即可选中表格。单击某个单元格，右击鼠标，在弹出的快捷菜单中选择“表格>选择表格”命令即可选中表格。单击某个单元格，执行“编辑>表格>选择表格”命令即可选中表格。7.3.2选择单个单元格选中表格中的单元格时，该单元格四周将出现深色实线边框，如图7-19所示。用户可以通过以下2种方式选择单个单元格：按住鼠标左键不放，从单元格的左上角拖至右下角，即可选择该单元格。按住Ctrl键，单击单元格即可选中该单元格。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.4.1拷贝和粘贴表格制、粘贴单个单元格或多个单元格可以节省表格制作的时间，提高效率，在复制时用户可以选择保留单元格的格式设置。若要粘贴多个表格单元格，剪贴板的内容必须和表格的结构或表格中将粘贴这些单元格的部分兼容。7.4.2增减表格的行和列打开网页文档，单击某个单元格，执行“编辑>表格>插入行”命令或按Ctrl+M组合键，即可在插入点上方插入1行表格。7.4.3删除表格和清除表格内容删除表格会一同删除表格中的内容，而清除表格内容只会清除表格中的内容而不影响表格。下面将对此进行介绍。1.删除表格选中整个表格按Delete键即可删除表格及表格内的内容。若只是想删除某行或某列单元格，可以选中整行或整列后按Delete键删除。2.清除表格内容当单个单元格或多个单元格不能构成整行或整列时，只能清除单元格中的内容而不删除表格。用户可以选择要清除的单元格后按Delete键删除其中的内容。7.4.4合并或拆分单元格合并或拆分单元格可以丰富表格效果，使其呈现出不规则的质感。1.合并单元格选中网页文档中表格中连续的单元格，执行“编辑>表格>合并单元格”命令，即可合并单元格。2.拆分单元格选中表格中要拆分的单元格，执行“编辑>表格>拆分单元格”命令，打开“拆分单元格”对话框。7.4.5实操案例：尔肆手表以尔肆手表网页制作为例，对表格的设置与编辑进行介绍。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.5课堂实战春林建筑本案例将以春林建筑网页制作为例，对表格的应用与编辑进行介绍。目录Contents7.1

插