任务8.1 创建基础表格

模块8用HTML5创建表格任务8.1创建基础表格网页设计项目教程（HTML5+CSS3+JavaScript）学习目标知识目标理解表格属性与设置；掌握HTML5表格的基本结构与语义化标签；掌握单元格的跨行和跨列合并。能力目标能够独立完成HTML5表格设计与实现；能够通过设置边框、间距和单元格合并，增强表格的视觉效果与数据展示效果。素养目标培养信息结构化、数据展示清晰性的职业素养；培养精益求精的工匠精神，追求美观与功能结合；培养细致认真的工作态度，确保数据准确与展示整洁。任务描述表格是网页设计中非常实用的元素，能以结构化方式清晰展示数据。本任务主要介绍如何创建HTML基本的表格以及为表格添加标题。相关知识和技能任务8.1涵盖以下2个表格基础知识点：▪8.1.1定义基础表格——认识<table>、<tr>、<th>、<td>标签与基本语法▪8.1.2设置表格的标题——使用<caption>标签为表格添加标题8.1.1定义基础表格表格由若干行和列组成，行与列交叉的区域称为单元格。HTML表格一般通过<table>、<tr>、<td>和<th>等标签创建，其基本语法格式如下（数据单元格以“表格数据”表示）：<table><tr><th>表格标题</th><th>表格标题</th>…</tr><tr><td>表格数据</td><td>表格数据</td>…</tr>…</table>要点<table>：表格容器，包含一个或多个行。<tr>：定义表格中的一行。<th>：表头单元格，默认居中加粗。<td>：数据单元格，存放具体数据。实例代码8-1华为智能门锁产品表使用<table>、<tr>、<th>、<td>创建带边框的基础表格。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>华为智能门锁产品表</title></head><body><h3>华为智能门锁产品表</h3><tableborder="1"><tr><th>产品名</th><th>核心功能</th><th>解锁方式</th><th>安全设计</th></tr><tr><td>智能门锁SE猫眼版</td><td>高清猫眼+双引擎AI指纹</td><td>8种</td><td>防小黑盒虚位密码</td></tr><tr><td>智能门锁</td><td>3.97英寸大屏+远程可视对讲</td><td>8种</td><td>防小黑盒机械应急按钮虚位密码</td></tr><tr><td>智能门锁Pro</td><td>AI3D人脸识别+无线反向供电</td><td>9种</td><td>防小黑盒机械应急按钮虚位密码</td></tr></table></body></html>说明border="1"设置表格边框宽度为1。<th>为表头单元格，居中加粗显示。运行效果见图8-1（基本表格）。表格标签详解逐一认识构建表格的四个核心标签及其作用。table标签容器标签，在HTML中插入一个表格，内部包含一个或多个<tr>、<th>、<td>元素；复杂表格还可包含caption、thead、tbody、tfoot等。tr标签定义表格中的一行；<tr>、</tr>分别代表行的开始与结束，<tr>只能放在<table></table>中使用。th标签定义表头单元格。默认状态下，其文本呈现为居中的粗体文本，用于标记列标题。td标签定义标准单元格（数据单元格），存放具体数据或表单标签。必须先有<tr>，才能在其中定义<th>、<td>。注意<td>是“单元格（cell）”而非“列（column）”；列由同一列上的多个<td>组成。8.1.2设置表格的标题<caption>标签用于为表格定义标题，方便表述表格内容。▪标题位于表格框线之外，默认显示在表格上方（可通过caption-side调整），如同在表格上方加一个没有边框的行。▪<caption>标签必须紧随<table>标签之后，位于任何<tr>、<thead>等之前。▪每个表格只能定义一个标题，通常居中于表格之上。▪作用：清晰说明表格主题，提升可读性与信息结构化程度。实例代码为表格添加标题在<table>之后、首行<tr>之前插入<caption>即可。<!--在<table>标签之后、首行<tr>之前插入caption--><tableborder="1"><caption>华为智能门锁产品表</caption><tr><th>产品名</th><th>核心功能</th><th>解锁方式</th><th>安全设计</th></tr><tr><td>智能门锁SE猫眼版</td><td>高清猫眼+双引擎AI指纹</td><td>8种</td><td>防小黑盒虚位密码</td></tr><!--其余<tr>数据行与实例代码8-1相同--></table>效果添加<caption>后，表格上方多出一行标题。标题默认居中显示于表格之上。运行效果见图8-2（caption标签效果图）。任务实施调研我国新能源汽车现状，使用table、tr、th、td等标签创建一个表格。▪实施要求：▪使用HTML5的table、tr、th、td标签创建表格，呈现调研数据。▪为表格添加标题（caption），并设置基础边框与样式。▪数据应来自权威来源（国家统计局、中国汽车工业协会等）。实施步骤：①新建项目文件夹new-energy-car，内部新建index.html；②数据调研，整理代表性数据；③创建基础HTML结构（输入!后按Tab生成模板）；④在<main>内插入表格结构（caption+thead/tbody/tfoot）；⑤运行与调试，查看表格效果（图8-3）。任务实施代码（一）HTML骨架与样式步骤3：创建基础HTML结构，并用<style>设置简单表格样式。<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>中国新能源汽车发展现状</title><style>/*添加简单CSS样式*/table{width:80%;margin:20pxauto;border-collapse:collapse;}th,td{border:1pxsolid#ddd;padding:12px;text-align:center;}th{background-color:#f2f2f2;}caption{font-size:1.5em;margin:10px0;}</style></head><body><header><h1>中国新能源汽车市场发展分析（2020-2024）</h1></header><main><!--表格内容将在此处编写--></main></body></html>任务实施代码（二）表格结构步骤4：在<main>内插入caption、表头、表体与表尾（以部分年份为例，结构相同）。<table><caption>中国新能源汽车销量及市场份额（2020-2024）</caption><thead><tr><th>年份</th><th>销量（万辆）</th><th>市场份额</th><th>主要品牌</th><th>代表车型</th></tr></thead><tbody><tr><td>2020</td><td>136.7</td><td>5.4%</td><td>比亚迪、特斯拉、蔚来</td><td>比亚迪汉、Model3</td></tr><tr><td>2021</td><td>352.1</td><td>13.4%</td><td>比亚迪、小鹏、理想</td><td>秦PLUS、小鹏P7</td></tr><tr><td>2022</td><td>688.7</td><td>25.6%</td><td>比亚迪、特斯拉、广汽埃安</td><td>海豚、ModelY</td>