任务8.2 表格属性

模块8用HTML5创建表格任务8.2表格属性网页设计项目教程（HTML5+CSS3+JavaScript）学习目标知识目标理解表格属性和设置；掌握HTML5表格的基本结构与语义化标签；掌握单元格的跨行和跨列合并。能力目标能够独立完成HTML5表格设计与实现；能够通过设置边框、间距和单元格合并，增强表格的视觉效果与数据展示效果。素养目标培养信息结构化、数据展示清晰性的职业素养；培养精益求精的工匠精神，追求美观与功能结合；培养细致认真的工作态度，确保数据准确与展示整洁。任务描述构建网页表格时，常需对内容进行有效组织与展示，以提高可读性与美观度。本任务探讨HTML5表格的高级功能：行分组、列分组、单线/分离单元格及跨行跨列合并，并通过样式与属性增强表格的视觉效果。相关知识和技能任务8.2涵盖以下5个表格属性知识点：▪8.2.1表格的按行分组显示——使用<thead>、<tbody>、<tfoot>组织行组▪8.2.2表格的按列分组显示——使用<colgroup>、<col>组织列组▪8.2.3单线表格——使用frame、rules属性控制边框显示▪8.2.4分离单元格——使用cellpadding、cellspacing控制间距▪8.2.5跨多行、多列的单元格——使用rowspan、colspan合并单元格8.2.1表格的按行分组显示从结构看，可按“行”把表格分组（行组），分为表头、主体、脚注。▪<thead>：表格的表头（页眉）行组，通常放置列标题。▪<tbody>：表格的主体（正文）行组，放置主要数据。▪<tfoot>：表格的脚注（表尾）行组，放置汇总信息（如合计）。▪作用：表头/表脚可独立于正文滚动；长表格打印时每页重复表头/表脚；可分别为各组设置样式。注意thead、tbody、tfoot均为可选元素，可单独或组合使用（并非必须全部出现）。若同时出现，推荐次序为thead、tfoot、tbody，便于浏览器在收齐数据前先呈现页脚。这三个标签必须放在<table>元素内部使用。实例代码8-3学生成绩单使用<thead>、<tbody>、<tfoot>对成绩表进行行分组。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>行组theadtbodytfoot</title></head><body><tableborder="1"align="center"width="500px"><caption>学生成绩单</caption><theadbgcolor="gray"><tr><th>姓名</th><th>性别</th><th>成绩</th></tr></thead><tfootbgcolor="gray"><tralign="center"><td>平均分</td><tdcolspan="2">540</td></tr></tfoot><tbody><tralign="center"><td>张三</td><td>男</td><td>560</td></tr><tralign="center"><td>李四</td><td>男</td><td>520</td></tr><tralign="center"><td>张三</td><td>女</td><td>540</td></tr></tbody></table></body></html>说明用thead/tbody/tfoot将表格按行分组。thead、tfoot背景设为gray。tfoot中“平均分”跨2列（colspan="2"）。运行效果见图8-4。8.2.2表格的按列分组显示若要改变整列的样式，需使用<colgroup>与<col>列组元素。▪<colgroup>：对表格中的列进行组合与格式化；放在<table>内、<caption>之后，任何<thead>/<tbody>/<tfoot>/<tr>之前。▪<col>：在<colgroup>内为某一列单独定义属性（须置于<colgroup>中）。▪两者均有span属性，表示横跨的列数。要点列组可一次性为整列设置样式，无需逐单元格重复。先写<colgroupspan="n">指定列范围，再在其中用<col>为单列细化。运行效果见图8-5（图书信息表）。实例代码8-4图书信息表使用<colgroup>与<col>对图书表进行列分组与配色。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>表格的列分组colgroup</title></head><body><tablewidth="50%"border="1"><colgroupspan="1"style="background-color:#999999;"></colgroup><colgroupspan="3"style="background-color:#eeeeee;"><colspan="2"><colstyle="background:#999999;"></colgroup><tr><th>编号</th><th>书名</th><th>作者</th><th>价格</th></tr><tr><td>1</td><td>HTML5实例讲解</td><td>王芳</td><td>$53</td></tr><tr><td>2</td><td>CSS3实例讲解</td><td>王明</td><td>$47</td></tr><tr><td>3</td><td>JavaScript实例讲解</td><td>王平</td><td>$50</td></tr></table></body></html>说明第一个<colgroupspan="1">设置第1列样式。第二个<colgroupspan="3">内含两个<col>，进一步细化后两列。运行效果见图8-5。8.2.3单线表格（frame/rules属性）table的frame与rules属性可控制边框的显示方式。▪frame：控制表格最外围四条边框的可见性（如只显示上/下/左/右边框）。▪rules：控制表格内部边框的可见性（如按行组、列组显示内边框）。▪取值对照见下页“表8-1frame属性取值及含义”。▪建议：边框样式优先用CSS实现，frame/rules仅作了解。提示frame管“外边框”是否显示；rules管“内边框”是否显示。实例代码8-5采用frame="hsides"、rules="groups"。运行效果见图8-6。表8-1frame属性取值及含义frame控制表格最外围四条边框的可见性，共9种取值。序号取值含义1void默认值。不显示表格最外围的边框。2box同时显示四条边框。3border同时显示四条边框。4above只显示顶部边框。5below只显示底部边框。6lhs只显示左侧边框。7rhs只显示右侧边框。8hsides只显示水平方向的两条边框。9vsides只显示垂直方向的两条边框。实例代码8-5班级信息表frame="hsides"只显示水平边框，rules="groups"按组显示内边框。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><tableborder="1"width="600"frame="hsides"rules="groups"><caption>班级信息表</caption><colgroupspan="1"width="200"></colgroup><colgroupspan="3"width="400"></colgroup><thead><tr><td>序号</td><td>学院</td><td>专业</td><td>班级</td></tr></thead><tfoot><tr><td>3-1</td><td>人工智能学院</td><td>人工智能技术</td><td>2401班</td></tr></tfoot><tbody><tr><td>2-1</td><td>信息学院</td><td>软件技术</td><td>2401班</td></tr><tr><td>2-2</td><td>计算机学院</td><td>物联网技术</td><td>2402班</td></tr></tbody></table></body></html>说明frame="hsides"：仅显示上、下两条水平边框。rules="groups"：按行组/列组显示内部边框。结合<colgroup>设置各列宽度。运行效果见图8-6。8.2.4分离单元格（cellpadding/cellspacing）用cellpadding与cellspacing控制单元格之间的间距。▪cellpadding：单元格边缘与其内容之间的空白（单位px），即单元格内边距。▪cellspacing：相邻单元格之间的空间（单位px），即单元格间距。▪注意：HTML5已不推荐这两个属性，建议用CSS的padding/border-spacing替代。要点cellpadding管“单元格内”的留白。cellspacing管“单元格之间”的留白。实例代码8-6采用cellpadding="6"、cellspacing="16"。运行效果见图8-7。实例代码8-6本周天气cellpadding与cellspacing控制表格边框与内容的间距。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><tableborder="1"frame="void"cellpadding="6"cellspacing="16"><caption>本周天气</caption><tr><th>日期</th><th>最高温</th></tr><tr><td>12月25日</td><td>4°</td></tr><tr><td>12月26日</td><td>4°</td></tr><tr><td>12月27日</td><td>-4°</td></tr><tr><td>12月28日</td><td>-3°</td></tr><tr><td>12月28日</td><td>-1°</td></tr></table></body></html>说明frame="void"：不显示最外围边框。cellpadding="6"：单元格内边距为6px。cellspacing="16"：单元格间距为16px。运行效果见图8-7。8.2.5跨多行、多列的单元格实际表格常需合并单元格，以符合内容布局需要。▪跨行（上下合并）：rowspan="n"，表示该单元格向下横跨n行。▪跨列（左右合并）：colspan="n"，表示该单元格向右横跨n列。▪rowspan/colspan应用于<td>或<th>。▪被合并（跨越）掉的单元格应从代码中删除，否则布局错位。要点合并方向：上下→rowspan，左右→colspan。例如<tdrowspan="2">表示该单元格跨2行。实例代码8-7“课程表”大量使用了跨行跨列。运行效果见图8-8。实例代码8-7课程表综合运用rowspan与colspan合并课程表中的单元格。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>课程表</title></head><body><tableborder="2px"align="center"width="600px"height="300px"><caption>课程表</caption><tralign="center"><th>项目</th><tdcolspan="5">上课</td><tdcolspan="2">休息</td></tr><tralign="center"><th>星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tralign="center"><throwspan="4">上午</th><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><tdrowspan="4">休息</td></tr><tralign="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr><tralign="center"><td>化学</td><td>语文</td><td>体育</td><td>计算机</td><td>英语</td><td>计算机</td></tr><tralign="center"><td>政治</td><td>英语</td><td>体育</td><td>历史</td><td>地理</td><td>计算机</td></tr><tralign="center"><throwspan="2">下午</th><td>语文</td><td>数学</td><td>英语</td><td>物理</td><td>计算机</td><td>英语</td><tdrowspan="2">休息</td></tr><tralign="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr></table></body></html>说明“项目”行用colspan合并出“上课”“休息”。“上午/下午”用rowspan跨多行。运行效果见图8-8（课程表）。任务实施创建一个《学生成绩表》，综合运用上述属性与操作美化表格显示。▪实施要求：▪综合使用colgroup（列组）、thead/tbody/tfoot（行组）组织表格结构。▪使用rowspan合并“序号/姓名/总分”表头，colspan合并“科目成绩”。▪用CSS设置边框、内边距、文字居中及列宽，提升视觉效果。参考实现：①用<style>设置table的border-spacing与th/td的边框、内边距、居中；②用<colgroup><col>设置各列宽度；③用<thead>（含rowspan/colspan）定义表头，<tbody>填充数据，<tfoot>汇总平均总分；④运行与调试，查看效果（图8-9）。任务实施代码（一）CSS样式用<style>统一设置表格的间距、边框、内边距与文字居中。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>学生成绩表</title><style>table{border-collapse:separate;border-spacing:5px;width:100%;}th,td{border:1pxsolid#ccc;padding:10px;text-align:center;}</style></head>要点border-collapse:separate+border-spacing控制单元格间距。th,td统一定义边框、内边距并居中。下页为对应的HTML表格结构。任务实施代码（二）HTML结构列组+行组+rowspan/colspan组成完整的学生成绩表。<body><table><colgroup><colstyle="width:10%;"><colstyle="width:20%;"><colstyle="width:20%;"><colstyle="width:20%;"><colstyle="width:20%;"><colstyle="width:10%;"></colgroup>