第8章 设计表格样式

第8章设计表格样式在网页中插入表格的表格标签、行标签和单元格标签学习目标01应用表格+CSS样式布局网页02本章任务任务1：设计表格任务2：定义表格样式任务3：案例实战—应用表格布局网页任务1设计表格任务描述本案例是一张15行、7列的表格，用来收集个人信息。在插入表格的过程中，会应用到表格单元格的横向合并和纵向合并，单元格文本居中，行高、列宽等设置图9-1-1：个人简历设计布局代码样式代码任务分析应用table标签插入表格，tr标签添加行，td标签添加单元格。2.单元格“照片”、“学习经历”、“工作经历”使用了单元格的“rowspan”属性列向合并，“起止年月”、“就读（培训学校）”、“专业/课程”等单元格使用了“colspan”横向合并。单元格的行高通过tr标签的height属性进行调整、列宽通过td标签的width属性进行调整。添加鼠标悬停在单元格上时单元格背景颜色改变的CSS样式。掌握表格单元格的横向合并和纵向合并，单元格文本居中，行高、列宽布局代码样式代码知识点导入table元素及属性详解table元素表示表格的范围，外框。用来定义表格，表格的其他元素包含在table标签里面。属性解释border=“”border表示表格的边框线的粗细，以像素为单位cellspacing=“”cellspacing表示单元格和单元格之间距离，值越大，间距越大cellpadding=“”cellpadding单元格边框和内容之间的距离，值越大，间距越大width=“”with表示表格的宽度height=“”height表示表格的高度bgcolor=“”bgcolor表示表格的背景颜色知识点导入caption元素及属性详解captioncaption标签用来制定表格的标题或者说明，caption是table的子元素，必须放在table中使用。caption的align属性可以设置标题的位置，但是，在HTML5中已经被废弃，不推荐使用，建议使用CSS样式设置。知识点导入tr元素及属性详解tr元素用来添加表格的行。属性解释align=“center/lift/right”规定表格内文本的对齐方式：居中/左对齐/右对齐bgcolor=“”bgcolor规定表格行的背景颜色valign=“top/bottom”规定表格行中内容的垂直对齐方式，上对齐/底部对齐知识点导入th元素及属性详解th元素用来定义表格的标题单元格，th是tr元素的子元素，必须放在tr标签里面；tr元素的内容会自动居中对齐并加粗文字属性解释align=“center/lift/right”表格中的文本居中/左对齐/右对齐colspan表示单元格跨越的行数rowspan表示单元格跨越的行数知识点导入td元素及属性详解td标签用来在tr中添加单元格，是tr的子元素，必须放在tr标签里面属性解释align=“center/lift/right”表格中的文本居中/左对齐/右对齐colspan表示单元格跨越的行数rowspan表示单元格跨越的行数知识点导入thead/tfoot/tbody元素td标签用来在tr中添加单元格，是tr的子元素，必须放在tr标签里面属性解释thead表格的表头，浏览器解析的内容放置在tbody和tfoot前面tbody表格的主体，浏览器解析的内容放置在tfoot的前面tfoot表格的页脚，浏览器解析的内容放置在表格的最下面示例thead/tfoot/tbody元素示例知识点导入colgroup元素colgroupcolgroup元素用来组合列，它的span属性可以设置组合列的数目；它可以包含一个子元素col；colgroup元素为table元素的子元素，必须放在caption元素之后，thead元素之前。示例colgroup元素示例要求将表格的第一列宽度设置为100px，背景颜色为红色；第二列和第三列的宽度设置为150px，背景颜色为粉红色；第四列的宽度设置为200px，背景颜色为灰色。知识点导入col元素colcol元素用来设定列的属性，也可以使用span属性来表示列数，没有span仅表示一列；col元素一般作为colgroup元素的子元素配合使用。示例col元素示例要求依次将表格第一列的背景颜色设置为红色，第二列的背景颜色设置为绿色，第三列的背景颜色设置为灰色任务实现关键布局代码任务描述任务分析任务实现关键样式代码任务描述任务分析任务2定义表格样式任务描述本案例应用CSS给表格添加边框，行和列添加背景颜色。表格行超出一页的显示范围时，把表格的标题和列标题进行“sticky”定位，使表格的标题和列标题能够始终定位在页面上，便于查看表格中的信息。图9-2-1：产品报价表页面布局代码样式代码任务分析插入一个层，输入表格的标题，并将标题设置为水平居中和垂直居中在层的下面插入表格。设置表格单元合并、文本居中。用“collapse”和“col”标签设置第一列和第二列的背景颜色。将层和表格的标题行“th”进行“sticky”定位。掌握表格的标题和列标题进行“sticky”定位布局代码样式代码知识点导入设置是否把表格边框合并为单一的边框属性：border-collapse属性值：separate为默认值，不合并，collapse边框合并设置分隔单元格边框的距离属性：border-spacing属性值：表示距离的单位知识点导入设置表格标题的位置属性：caption-side属性值：top为认值,在表格之上/bottom在表格之下设置是否显示表格中的空单元格属性：empty-cells属性值：hide/show为默认值知识点导入设置显示宽度是否随内容拉伸属性：table-layout属性值：auto为默认值，表示会随着内容拉伸/fixed表示列宽由表格宽度和列宽度设定任务实现部分布局代码任务描述任务分析任务实现关键样式代码任务描述任务分析任务3案例实战—应用表格

布局网页任务描述用表格将网页布局成页头、主体内容和页脚三部分，表格的背景颜色采用渐变填充。主体部分左右布局。图9-3-1：应用表格布局网页任务分析在网页中插入一个三行五列的表格，分别为页头、主体内容和页脚。表格颜色从左上角到右下角的渐变填充。表格第一行添加下边框，第三行添加上边框。