网页设计与制作基础（HTML5+CSS3）课件 第6章 表格设计.pptx

第6章

表格设计

目录表格结构01表格属性02表格例子03

6.1.1表格标签table/table表示表格标签,里面描述表格的属性。tr/tr定义表格行。td/td定义单元格，单元格里面存放数据，这些数据可以是图片、文字、声音、视频等。tablewidth=200pxborder=”1align=”center”trtd姓名/tdtd星座/td/trtrtd张三/tdtd双子座/td/trtrtd李四/tdtd巨蟹座/td/tr/table6.1表格结构

6.1.2插入表格（1）在设计视图中，可以选择插入-Table，在弹出的Table对话框中，设置表格行数为3，列为2，表格宽度为200px，边框粗细为1，再点击确认，即建立了3行2列的表格，(2)插入表格后，在表格属性窗口中，设置表格对齐方式align:居中对齐，(3)在表格的空白行内，依次输入相应的内容(4)如果要设置表格的背景，可以直接在table标签内，设置bgcolor，例如tablewidth=200border=1align=centerbgcolor=#abcedf

6.2表格属性6.2.1表格table属性表格table的常用属性包括以下部分：width：宽度height：高度align：水平对齐方式bgcolor：背景颜色border:边框粗细bordercolor:边框颜色cellspacing：单元格间距，即单元格和单元格之之间的距离cellpadding填充，单元格边距，即单元格里面的内容距离单元格边的值bordercolorlight:亮边框颜色（左上边框颜色）bordercolordark:暗边框颜色（右下边框颜色）

6.2.2表格行tr属性表格行tr的属性只要包括：align：行内容的水平对齐valign：行内容的垂直对齐bgcolor：行的背景颜色bordercolor:行边框颜色bordercolorlight:行的亮边框颜色bordercolordark:行的暗边框颜色

6.2.3单元格td属性单元格td的属性如下：width：单元格的宽度height：单元格的高度align：单元格内容的水平对齐valign：单元格内容的垂直对齐bgcolor：单元格的背景颜色bordercolor:单元格边框颜色bordercolorlight:单元格的亮边框颜色bordercolordark:单元格的暗边框颜色background:单元格的背景图像colspan：单元格跨列合并rowspan：单元格跨行合并

6.3.1必威体育精装版热曲榜页面例子（1）新建页面index.html,在页面中插入6行3列的表格，表格宽度自动，不设置具体的值，边框为1。插入表格后，在表格属性中设置对齐方式Align为“居中对齐”。6.3表格应用实例

6.3.1表格应用实例（2）根据效果图，在单元格里面输入相应内容，并合并相应的单元格.（3）设置样式：.biaoti{ font-family:楷体; font-weight:bold; text-align:center; font-size:xx-large; color:#4324CD;}td{text-align:center;}

6.3.1表格应用实例（4）设置表格只显示外边框的线，表格内部设置横向分隔线。可以使用表格的frame属性和rules属性tableborder=1align=centerframe=boxrules=rows在本例中，将frame=“box”，只显示表格四条边框线，同时设置rules=”rows”,设置横向分隔线，隐藏竖向分隔线。

Frame属性和rules属性取值

下面的例子为某个公司的项目进度汇总情况表格以淡蓝色调为主，设置边框线和灰色字体，同时设置隔行的背景色，提高用户的阅读体验。6.3.2设计统计数据表格

6.3.2设计统计数据表格（1）建立11行8列的表格，不设置表格宽度，在表格里面依次输入表头行th/th以及各行单元格内容：tabletrth活动/thth计划开始/thth计划工期/天/thth实际开始/thth实际工期/天/thth完成百分比/thth审核人/thth执行人/th/trtr…/tr…/table

6.3.2设计统计数据表格(2)设置表格的样式table{ table-layout:fixed;/*固定表格布局*/ empty-cells:show;/*显示空单元格*/ margin:0auto;/*居中对齐*